Aprende a utilizar el efecto burbuja para la sección de redes sociales en tu página, les dará un toque moderno y novedoso a los tan conocidos botones. Les recomendamos dos métodos diferentes para lograr este efecto.
Método 1: CSS Sprites
HTML
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<ul id=“bubble”>
<li>
<a class=“icon feed” href=“http://feeds2.feedburner.com/prlamnguyen” title=“Full RSS Feed”>Full RSS Feed</a>
</li>
<li>
<a class=“icon email” href=“http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&loc=en_U” title=“Feed via Emal”>Feed via email</a>
</li>
<li>
<a class=“icon twitter” href=“http://twitter.com/prlamnguyen” title=“Full RSS Feed”>Follow me on Twitter</a>
</li>
<li>
<a class=“icon facebook” href=“http://facebook.com/duylamng” title=“Full RSS Feed”>I‘m on Facebook</a>
</li>
<li>
<a class=”icon delicious” href=”http://delicious.com/save” onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=http://aext.net&title=AEXT.NET’, ‘delicious’,’toolbar=no,width=550,height=550′); return false;” title=”Full RSS Feed”>Save me</a>
</li>
<li>
<a class=“icon technorati” href=“http://technorati.com/faves?sub=addfavbtn&add=http://aext.net” title=“Full RSS Feed”>Fave me</a>
</li>
</ul>
|
CSS PARA EL FONDO:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
#bubble {
list–style: none;
margin: 0px;
padding: 0px;
}
#bubble li {
display: inline–block;
margin: 0px;
padding: 0px;
}
#bubble li a.icon {
background: url(images/sprites.png) no–repeat;
border: none;
display: block;
width: 128px;
height: 128px;
text–indent: –9999px;
}
|
CSS PARA LAS IMÁGENES:
Es muy importante tener encuenta las medidas exactas para usar CSS Sprites, de lo contrario no tendremos buenos resultados ya que la imagen nos quedará fuera de lugar.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
#bubble li a.feed {
background–position: –139px –12px;
}
#bubble li a.feed:hover {
background–position: –13px –12px;
}
#bubble li a.email {
background–position: –139px –149px;
}
#bubble li a.email:hover {
background–position: –13px –149px;
}
#bubble li a.twitter {
background–position: –139px –283px;
}
#bubble li a.twitter:hover {
background–position: –13px –283px;
}
#bubble li a.facebook {
background–position: –139px –422px;
}
#bubble li a.facebook:hover {
background–position: –13px –422px;
}
#bubble li a.delicious {
background–position: –139px –559px;
}
#bubble li a.delicious:hover {
background–position: –13px –559px;
}
#bubble li a.technorati {
background–position: –139px –698px;
}
#bubble li a.technorati:hover {
background–position: –13px –698px;
}
|
Método 2: Image Swapping
En este método tendremos más HTML que CSS ya que usaremos 2 imágenes por link
HTML:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<ul id=“bubble2”>
<li>
<a href=“#” title=“Full RSS Feed”>
<img class=“small” src=“images/feed.png” alt=“Full RSS” />
<img class=“large” src=“images/feed_large.png” alt=“Full RSS” />
</a>
</li>
<li>
<a href=“#” title=“Feed via Emal”>
<img class=“small” src=“images/email.png” alt=“Feed via Emal” />
<img class=“large” src=“images/email_large.png” alt=“Feed via Emal” />
</a>
</li>
<li>
<a href=“#” title=“Sigueme en Twitter”>
<img class=“small” src=“images/twitter.png” alt=“Follow me on Twitter” />
<img class=“large” src=“images/twitter_large.png” alt=“Follow me on Twitter” />
</a>
</li>
<li>
<a href=“#” title=“Estoy en Facebook”>
<img class=“small” src=“images/facebook.png” alt=“I’m on Facebook” />
<img class=“large” src=“images/facebook_large.png” alt=“I’m on Facebook” />
</a>
</li>
<li>
<a href=“#” title=“Guardame”>
<img class=“small” src=“images/delicious.png” alt=“Save me” />
<img class=“large” src=“images/delicious_large.png” alt=“Guardame” />
</a>
</li>
<li>
<a href=“#” title=“Fave me on Technorati”>
<img class=“small” src=“images/technorati.png” alt=“Fave me on Technorati” />
<img class=“large” src=“images/technorati_large.png” alt=“Fave me on Technorati” />
</a>
</li>
</ul>
|
CSS
Aquí la diferencia con el método 1 es que deberemos el alto y ancho del elemento < li >
|
1
2
3
4
5
6
7
8
9
10
11
12
|
#bubble2 {
list–style: none;
margin: 20px 0px 0px;
padding: 0px;
}
#bubble2 li {
display: inline–block;
margin: 0px 5px;
padding: 0px;
width: 72px;
height: 72px;
}
|
CSS PARA LOS LINKS:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
#bubble2 li a img {
position: relative;
border: none;
}
#bubble2 li a img.large {
display: none;
}
#bubble2 li a:hover img.small {
display: none;
z–index: 0;
}
#bubble2 li a:hover img.large {
display: block;
margin–top: –28px;
margin–left: –28px;
z–index: 1000;
}
|
Hay que tener cuidado de no olvidarse poner la propiedad “position: relative;” ya que es la que usaremos z-index para que las imágenes se agranden cuando hagamos hover. (z-index sólo funciona en la position relative o absolute)