En está ocasion vamos a aprender a colocar un efecto muy conocido a los iconos de tus redes sociales, este efecto lo logramos con CSS Sprite. Así que vamos al tutorial:
Paso 1
Primero vamos a crear la estructura de nuestro contenedor
Paso 2
Ahora tenemos que crear nuestras imagenes para que funcione el efecto. Entramos a CSS Sprite, en esta pagina subiremos las imagenes de nuestras redes sociales (iconos), es importante que subas individualmente por red social es decir primero subes la de facebook, icono normal (sin color o color oscuro) e icono con el efecto (con color).
Una vez terminamos de subir nuestras imagenes a la pagina CSS Sprites, nos debe quedar algo así:
Paso 3
Una vez ya tengamos nuestras imágenes, vamos a colocar los estilos a nuestra estructura HTML que previamente creamos.
Colocamos individualmente las imágenes, ya que los tenemos separados por redes sociales. Entonces en los estilos los colocamos separados, Ejemplo:
.social a.facebook { background: url(imagenes/facebook.png); }Y listo ya tenemos nuestras Redes Sociales con un bonito efecto.
Puedes descargar el resultado final, con todos los archivos desde aqui.
¿Tienes alguna duda?