Hace tiempo que conocía la utilización de esta técnica, aunque no sabía muy bien como y tampoco que la conicía con el nombre SPRITES.
En que consiste la tecnica SPRITES.
Es utilizar una imagen para generar varias imagenes en nuestra web, una imagen que puede contener varias imagenes, varios colores ... , así de esta manera, conseguimos que la web pesé menos y sea más rápida a la hora de cargar.
Ya que hace que el navegador del usuario (cliente) no tenga que cargar varias imagenes a la hora de ver una web, simplemente con una imagen y con instrucciones de css muestra la parte de la imagen que nos interesa.
Como utilizar una imagen dentro de otra.
Si en nuestra hoja de estilos (css) creamos una clase o contenedor (ID) , indicando ancho y alto de la imagen que queremos visualizar, indicando la situacion en la imagen con la coordenadas x y
Buscando información encuentro un lugar (Ref2) que si tenemos varias imagenes y queremos utilizar la técnica SPRITERS , se la subimos y este nos da:
Una imagen con la tres que subimos.
Nos indica la posicion de las tres imagenes.
Puede ser una herramienta util y interesante para ahorrarnos tiempo. Yo hice la prueba con tres iconos separados que tenía de redes y email.
Y el resultado fue la imagen anterior y el siguiente código.
Para ver imagen de email: background-position: 0px 0px; siendo el primero 0px la coordenada X
Para ver imagen de facebook:background-position: 0px -60px;
Para ver imagen de gmail:background-position: 0px -120px;
Ejemplo (Ref1):
#name
{
width: 60px ; /*ancho de la imagen (contenedor)
height: 60px ;/*alto de la imagen (contenedor)
background:url('url de imagen') 0px -60px no-repeat
}
En la ultima instrucción lo que indicamos con -0px -60px son la coordenadas (X) y (Y) indicando donde se encuentra la parte de la imagen queremos mostrar, en este caso el icono de facebook.