En este tutorial vamos a crear una elegante botonera de redes sociales sin necesidad de utilizar imágenes, solo utilizaremos las características y efectos de CSS3 y fonts icon de Font Awesome de Bootstrap. Esta botonera es muy fácil de hacer y támbien será útil para cualquier pagina web o blog, y lo mejor es que nos ayuda en gran manera en el tema de carga y optimización de nuestro sitio web.
Y al final este será el resultado:
Así que vamos a comenzar con el tutorial.
El HTML
Lo primero que tenemos que hacer es vincular la hoja de estilos que nos provee Font awesome en el documento HTML. Esta nos proporciona los fonts icons o fuentes iconos. Y estos son los que utilizaremos para visualizar las diferentes redes social simulando las imágenes.
Ahora si vamos con la estructura básica de la caja de iconos.
y lo que hacemos en este código HTML es básico pero que nos bastara con lo que queremos hacer. Tenemos el div contenedor de caja id=caja-redes dentro tenemos 5 enlaces que representaran los 5 iconos a esos enlaces los asociamos con 2 clases, icon-button para dar la forma al botón y el nombre de la red para aplicar un color diferente por CSS. Después tenemos la etiqueta i y la asociamos a cada clase requerida para mostrar el icono correspondiente ejemplo: para Facebook será icon-facebook, esto depende la hoja de estilos que nos provee de la fuente. Y luego con los span vacíos vamos a lograr la animación que se hace con el efecto hover, en CSS vamos aplicar colores independiente dependiendo del color de la red social.
y si vemos el HTML sin los CSS, vamos a tener esto hasta el momento:
los iconos que llamamos por medio del HTML y su clase asociada. Ahora seguimos con los CSS.
Los CSS
Los anteriores fueron los estilos de la caja contenedora y los enlaces a la tipografía, en realidad los enlaces son los iconos, así que le damos un tamaño y las centramos.
Aplicamos los estilos al botón el fondo blanco, border radius para dar su forma, que se muestren en línea con inline-block y otros estilos para lograr la apariencia adecuada.
En el CSS anterior nos centramos en el elemento span de cada ítem, primero le damos las dimensiones para que cuadren con el botón que tenemos y lo colocamos en el centro del mismo, luego aplicamos la propiedad transition de CSS3 para que cuando haga el cambio cuando este en hover sea progresivo, acá los colocamos en cero el height y width y en el hover le damos los 3em que es el tamaño original, y de esta forma creamos la animación del estado hover. Y luego nos enfocamos a cada red social individualmente para aplicar un color diferente de fondo por medio del span en el estado hover.
en el código anterior aplicamos estilos a elemento i que es el que contiene la fuente, y luego damos color a cada fuente individualmente dependiendo su color de red social. Y por ultimo le aplicamos un color blanco a la fuente en su estado hover.
Y con esto terminamos este ejercicio que espero que te sea de utilidad. Nos vemos el próximo tutorial.
Fuente:enlace
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información
No hay comentarios:
Publicar un comentario