martes, 28 de mayo de 2013

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 .