14 Steps - CSS sprites

Ahora mostraremos como hacer sprites en CSS. La técnica consiste en coger una imagen y localizar una zona que la usaremos para mostrar un trozo de la imagen. Lo que conseguimos con los sprites es reducir las peticiones http de imágenes.

Lo que queremos es crear diferentes botones, con la imagen que mostramos a la izquierda. Lo que tendremos que hacer es ir al CSS y modificar el CSS e introducirle los backgrounds indicando que zona de la imagen debe poner en cada botón:







a.ejemplo {display:block; font-weigh:bold; padding:10px 10px 10px 10px; text-decoration:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF04zIki3Bcab-YWaA2vdMKl39a0f7aHp7ie3OMtg8Wb8HbtR2Yj6Zp57RBywuzsIBZ_vVoScV1-bcJfnHMV_Lz0zMuMcmLYHOs8IoZYfId9xajeW_AKG_n1dBdYeUWUNvBeWFyt7oCqo6/s400/botones.gif) 0px 0px;text-align:center;color:#fff}
a:hover .ejemplo {text-decoration:underline;}

Aquí vemos el ejemplo:

Botón