martes, 14 de mayo de 2013

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




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

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.