Usar plantilla de Imagenes

[g3kdigital]

Uff la respuesta es más o menos larga, en este link lo explican muy bien: Libros Web |
Sprite CSS y Rollover.

En resumen, es una técnica que han llamado SPRITE CSS y funciona como en los videojuegos. Se combinan varias imágenes en una sola con fondo transparente, se juntan en una grilla/cuadricula con un tamaño por cuadro que tu mismo defines, por ejemplo de 50x50 pixeles.

Entonces se forma un bloque de imágenes, por ejemplo de 4 así:


-----------
img1 | img2
-----------
img3 | img4
-----------



Cada una en un espacio delimitado de 50 pixeles, si deseas seleccionar alguna debes hacerlo por sus coordenadas, por ejemplo:

img1:
x = 0
y = 0

img2:
x = 50px
y = 0

img3:
x = 0px
y = 50px

img4:
x = 50px
y = 50px

Ahora, ¿Como se usa en html y css?:

Al FIGURE, SPAN, DIV o cualquiera que sea el elemento donde colocaremos la imagen de fondo, le asignamos una clase que ya tiene asignada como fondo el sprite y una clase que ya tiene asignada la coordenada de la imagen, así:

Código HTML:

<figure class="sprite img1"></figure>
<figure class="sprite img2"></figure>
<figure class="sprite img3"></figure>
<figure class="sprite img4"></figure>
 

Código CSS:

.sprite{ 
   background: url('sprite.png'); 
   background-size: 200px 200px; /*tamaño real de la imagen*/
}
 
.sprite[class*="img"]{  width: 50px;  height: 50px; } /*tamaño de la cuadrícula*/
 
.sprite.img1{  background-position: 0 0; }
.sprite.img2{  background-position: 50px 0; }
.sprite.img3{  background-position: 0 50px; }
.sprite.img4{  background-position: 50px 50px; }
 

Ese es el principio, ahora no siempre las imágenes tendrán el mismo tamaño así que hay muchas cuadriculas complicadas, si vas a empezar lo mejor es usar cuadrículas cuadradas e ir practicando, pero si ya entendiste el concepto, en realidad puedes posicionar las imágenes como quieras en el tamaño que quieras, siempre que a cada clase sprite le asignes el tamaño correspondiente y las medidas que correspondan a la imagen de fondo.

Esta técnica tiene como todo sus limitaciones y sus variantes, por ejemplo usar svg, para no preocuparte por que se pixele en distintas resoluciones o igual puedes reemplazarla o usarla en conjunto con icon-fonts o para reproducir animación frame by frame.

Te dejo un ejemplo de su uso en código Aquí (Animación) y Aquí(ej: SVG)

pd: Sí te quedo claro, regalame un +1, cualquier duda animate a seguir preguntando. Éxitos!.