Creando iconos sociales desde firework , su estructura en html y css

De aquí podrán descargar  los iconos que mas les gusten

 http://www.brandsoftheworld.com/

Mediadas para iconos

 cuadrados 

35*35

Teniendo  abierto el  editor  nos  centramos en las medidas .

Con una  base de 165 *35  y un color de  fondo  #040404.

Puedes ser de color o de forma que tu quieras pero con esta  medida  mas o menos  .

ahora  queda llenar con los iconos sociales  en este espacio conseguimos introducir  4  iconos de 35*35

puede ser cuadros como círculos  todo  vale.

Hasta ahora tenemos todo listo para el estado de reposo .


Estado hover.


Duplicamos el lienzo desde firework  .

agrandamos  a 70 .

quedando así.

Ahora  copiamos y  pegamos los iconos que tenemos  para duplicarlos  y poderlos trabajar en el css.

Cambiándolos de color  para darle el efecto hover

  teniendo los dos estados que necesito  exporto como jpg   o  png-24  este ultimo es mas recomendado la calidad es al 100% .

Solo queda  codear la maqueta en html5 y el estilo en el css3 .

html5


<article id="social">
<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>




Css





dando el estilo en css3


#social ul {
list-style-type: none;
list-style-position: inside;

}


#social li{
display: inline-block;
margin-right: 0.313em;

background-color:#fc0;
}
#social a {
display: block;
width: 2.188em;
height: 2.188em;
background-image: url(../componentes/iconos.jpg);
}


#social a span{

display: none;
}



Si visualizo en el navegador  tendré todas las imágenes  iguales y  para que cada una coja  su estilo propio  haremos la siguiente  .

identificarlas desde el html5 .




<article id="social">
<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>


y en estilo  del css3 


#social ul {
list-style-type: none;
list-style-position: inside;

}


#social li{
display: inline-block;
margin-right: 0.313em;

background-color:#fc0;
}
#social a {
display: block;
width: 2.188em;
height: 2.188em;
background-image: url(../componentes/iconos.jpg);
}


#social a span{

display: none;
}

#facebook{

background-position: 0 0;
}

#twitter{

background-position: -44px 0;
}

#youtube{

background-position: -87px 0;
}

#rss{

background-position: -130px 0;
}




#facebook:hover{

background-position: 0px -35px;
}

#twitter:hover{

background-position: -44px -35px;
}

#youtube:hover{

background-position: -87px -35px;
}

#rss:hover{

background-position: -130px -35px;
}

Con esto tendría que funcionar correctamente,   exactamente como esta muestra   http://dw.herobo.com/ 

si por casualidad  tiene una mala visualización en el color  solo tienes que exportar a png-24

  (importante ).Listo esto me despido  

                    Saludos !!!!!!!

  Seguro que te interesas por  .

fontsquirrel como instarlas en un paso a paso.

Atributos de un formulario en HTML5

Microdatos html5 .

Manifiestohtml5

Canvas  html5.

Nota adhesiva ,audio vídeo  html5.

CSS3. Trabajar con Múltiples imágenes de fondo  .
Border-radius,Shadow  CSS3.