Creando iconos sociales desde firework , su estructura en html y css parte 2
Los iconos redondos son estos .
el primer icono que tengo es el de facebook
su mediada es de 34*34
y su posición para el css tomada desde fireworks es
#facebook{
background-position: 0 0;
}
veras que para cuadrarlo le bajo 1 a la y en el css coloco
x 0
y 0
si tomo las medidas del segundo .
icono twitter
x 43
y 1
para el css
es
#twitter{
background-position: -43px 0;
}
y así para las posiciones que continúan
si comparas con el css a continuación
veras que se entiende mejor .
de esta manera podemos crear menús laterales, menús horizontales y los que se nos de en la imaginación
html
<article id="c">
<ul>
<li><a href="" id="facebook"><span>Facebook</span></a></li>
<li><a href="" id="twitter"><span>twitter</span></a></li>
<li><a href="" id="youtube"><span>youtube</span></a></li>
<li><a href="" id="rss"><span>rss</span></a></li>
</ul>
</article>
el css3 para los iconos redondos .
#c ul {
list-style-type: none;
list-style-position: inside;
}
#c li{
display: inline-block;
margin-right: 0.313em;
background-color:#fc0;
}
#c a {
display: block;
width: 2.188em;
height: 2.188em;
background-image: url(../imagenes/iconos.png);
}
#c a span{
display: none;
}
#facebook{
background-position: 0 0;
}
#twitter{
background-position: -43px 0;
}
#youtube{
background-position: -85px 0;
}
#rss{
background-position: -128px 0;
}
#facebook:hover{
background-position: 0 -36px;
}
#twitter:hover{
background-position: -44px -36px;
}
#youtube:hover{
background-position: -85px -36px;
}
#rss:hover{
background-position: -128px -36px;
}
Gracias ;)
te interesaría .
Comentarios
Publicar un comentario