Foros del Web » Creando para Internet » HTML »

Usar plantilla de Imagenes

Estas en el tema de Usar plantilla de Imagenes en el foro de HTML en Foros del Web. Hola Como se usan las plantillas de iconos? o sea veo que en una sola imagen hay varios íconos, pero como hago para seleccionar cada ...
  #1 (permalink)  
Antiguo 05/01/2018, 11:33
 
Fecha de Ingreso: enero-2010
Mensajes: 128
Antigüedad: 14 años, 2 meses
Puntos: 2
Usar plantilla de Imagenes

Hola

Como se usan las plantillas de iconos?
o sea veo que en una sola imagen hay varios íconos, pero como hago para seleccionar cada uno de ellos ?
__________________
Por favor evitar comentarios del estilo "leer el manual...", ya lo hice pero aun tengo dudas, por eso pregunto acá
  #2 (permalink)  
Antiguo 05/01/2018, 16:52
Avatar de g3kdigital  
Fecha de Ingreso: noviembre-2013
Ubicación: En mi apartamento en bogotá
Mensajes: 208
Antigüedad: 10 años, 4 meses
Puntos: 39
Respuesta: Usar plantilla de Imagenes

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:
Ver original
  1. <figure class="sprite img1"></figure>
  2. <figure class="sprite img2"></figure>
  3. <figure class="sprite img3"></figure>
  4. <figure class="sprite img4"></figure>

Código CSS:
Ver original
  1. .sprite{
  2.    background: url('sprite.png');
  3.    background-size: 200px 200px; /*tamaño real de la imagen*/
  4. }
  5.  
  6. .sprite[class*="img"]{  width: 50px;  height: 50px; } /*tamaño de la cuadrícula*/
  7.  
  8. .sprite.img1{  background-position: 0 0; }
  9. .sprite.img2{  background-position: 50px 0; }
  10. .sprite.img3{  background-position: 0 50px; }
  11. .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!.
__________________
Puedes ser el tipo de persona que se amarga por lo inevitable o aceptar el reto de superarse siempre e ir a la par con el progreso.

WEB: G3K.co | codepen.io/g3kdigital

Última edición por g3kdigital; 05/01/2018 a las 17:09

Etiquetas: imagenes, plantilla, usar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 10:16.