Ejemplo simple de redes sociales – usando sprites y css3.

Cuando navegamos por Internet es baste común que nos encontramos con los clásicos menús de redes sociales que en algunos sitios los diseños son bastantes elegantes y en otros no tanto, bueno les quiero compartir con un ejemplo un par de técnicas que suelo emplear para realizar esta tarea ( sprites y selectores css3)  con el cual el resultado es el siguiente.

ejemplo de redes sociales

ejemplo de redes sociales

Bueno el sprite que vamos a usar se compone de 8 items cada uno con 2 sub-imagenes en la parte superior se encuentra el estado normal  y en la parte inferior el estado en que se levanta o estado activado(ver ejemplo) cada subimagen en el sprite tiene una dimensión de 62px de ancho por 58px de alto, la imagen del sprite se llama redesSociales.png y  la cual vemos a continuación:

sprite redesSociales

sprite redesSociales

Bien ahora el código HTML es muy simple y el el siguiente:

 <a href='#' class='boton_rs_alpe' title='alpe'></a>
 <a href='#' class='boton_rs_financiera' title='financiera'></a>
 <a href='#' class='boton_rs_banorte' title='bannorte'></a>
 <a href='#' class='boton_rs_banamex' title='banamex'></a>
 <a href='#' class='boton_rs_youtube' title='youtube'></a>
 <a href='#' class='boton_rs_twitter' title='twitter'></a>
 <a href='#' class='boton_rs_facebook' title='facebook'></a>
 <a href='#' class='boton_rs_rss' title='rss'></a>

Ahora como la intensión es usar el  sprite el cual sera la imagen de fondo para todos los enlaces, para agregarle esta características(y otras) a todos estos enlaces lo primero que debemos de observar es que cada enlace pertenece a una clase distinta pero todas ellas tienen la característica que el nombre de su respectiva clase empieza con  “boton_rs_” bueno para esta tarea resulta ideal el selector de casamiento css3 dejo el código:

a[class^="boton_rs_"]{
	width: 62px;
	height: 58px;
	background: URL(redesSociales.png);
	float: left;
	margin-bottom: 10px;
}

Finalmente agregamos la parte que indique la parte de la img que le corresponde a  cada boton en especifico esto lo hago con el siguiente código css:


a.boton_rs_alpe{background-position: 0px 0px}
a.boton_rs_financiera{background-position: -62px 0px}
a.boton_rs_banorte{background-position: -124px 0px}
a.boton_rs_banamex{background-position: -186px 0px}
a.boton_rs_youtube{background-position: -248px 0px}
a.boton_rs_twitter{background-position: -310px 0px}
a.boton_rs_facebook{background-position: -372px 0px}
a.boton_rs_rss{background-position: -434px 0px}

a.boton_rs_alpe:hover{background-position: 0px -58px}
a.boton_rs_financiera:hover{background-position: -62px -58px}
a.boton_rs_banorte:hover{background-position: -124px -58px}
a.boton_rs_banamex:hover{background-position: -186px -58px}
a.boton_rs_youtube:hover{background-position: -248px -58px}
a.boton_rs_twitter:hover{background-position: -310px -58px}
a.boton_rs_facebook:hover{background-position: -372px -58px}
a.boton_rs_rss:hover{background-position: -434px -58px}

ver ejemplo en funcionamiento y descargar código

Anuncios

2 thoughts on “Ejemplo simple de redes sociales – usando sprites y css3.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s