Archivo de la categoría ‘CSS’

Técnica CSS sprite sin background

Jueves, 6 de Agosto de 2009

Sprite es una técnica que nos permite agrupar muchas imágenes bajo una misma, y luego separarlas mediante CSS. Con dicha técnica conseguimos aligerar el peso de la página web y las peticiones que realizamos.

Hasta ahora utilizábamos las propiedades background-image y bakground-position colocando la imagen como fondo de un contenedor. Con este método se consiguen efectos muy logrados de substitución de imágenes sin precarga javascript, para hovers en los links de un menú, por ejemplo.

Nosotros hemos querido ir mas allá y tener una imagen con todos los elementos gráficos de la página web (hover, cabeceras, logos, bordes redondeados de tablas, etc... ) y 'recortar' parcialmente dicha imagen para mostrar sólo una parte dentro de la página. El tiempo de carga utilizando esta técnica se reduce drásticamente. La suma de las imágenes por separado daría un tamaño mayor que el de la imagen agrupándolas todas y, sobretodo, el realizar una sola petición para descargar todo el contenido gráfico de la web reduce muchísimo dicho tiempo.

Vamos a utilizar esta imagen:

Programación web

Control+Z Web technology

Para mostrar el efecto, vamos a suponer que necesitamos utilizar por separado el logo por un lado y el teléfono y el mail por otro. Aquí está el código:

CSS:
  1. body{font-family: verdana,arial,helvetica,sans-serif;font-size:.8em;color:#5f5f5f;margin:50px;}
  2. p{margin-top:50px;}
  3. /*Estilos genericos del sprite*/
  4. .sprite{ display:block;overflow:hidden;position: relative; }
  5. .spriteImg{ position: absoluteborder:none; }
  6.  
  7. /*Medidas y coordenadas especificas del elemento 1*/
  8. .logoContenedor { width: 305px; height: 95px; }
  9. .logoImg { top:-5px;left:-50px;}
  10.  
  11. /*Rollhover*/
  12. /*a.logoContenedor:hover .logoImg{top:-10px;left:-50px;}*/
  13.  
  14. /*Medidas y coordenadas especificas del elemento 2*/
  15. .infoContenedor { width: 200px; height: 50px; }
  16. .infoImg { top:-95px;left:-100px;}

HTML:
  1. Aquí necesito un enlace con el logo:
  2.  
  3. <a class="sprite logoContenedor" href="http://www.controlzeta.net">
  4. <img class="spriteImg logoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  5. </a>
  6.  
  7. Aquí usaremos el teléfono y el email:
  8.  
  9. <a class="sprite infoContenedor" href="http://www.controlzeta.net">
  10. <img class="spriteImg infoImg" title="Control+Z Software" src="http://controlzeta.net/ControlZeta.png" alt="Control+Z Software" width="408" height="205" />
  11. </a>

El ejemplo (y por tanto el código) lo tenéis aquí: http://controlzeta.net/Tutoriales/Sprite/sin-background.php

La explicación técnica es simple.

Necesitamos un contenedor para cada imagen (en este caso un <a> con display:block, podría ser un div u otra elemento) que nos delimite las medidas que tendrá el recorte de la imagen mostrada. Este contenedor debe tener la propiedad "overflow:hidden;" para que no se nos muestre el trozo de imagen que no queremos ver.

Dentro del contendor, insertamos el tag <img> con el src la imagen en cuestión y, importante, las medidas completas de la imagen original. Si no las introducimos, se nos escalará la imagen para adaptarse al contenedor. Además, debemos posicionar la imagen con los atributos css top y left, para "empezar" a mostrar la imagen desde la coordenada que nos interese.

Llevamos tiempo utilizando esta técnica pero en la variante background-image. En algunas ocasiones la hemos usado para reducir el tiempo de carga, pero implicaba problemas semánticos (un logo nunca puede ser una imagen de fondo) y de posicionamiento (una imagen de fondo no puede tener alt o title). Esta nueva técnica solventa los problemas mencionados, por lo que podremos extender el concepto a toda la web, consiguiendo agrupar tantas imágenes como queramos.

Fuente: google.com No porque lo hayamos buscado, que también, sino porque, si os fijáis, google utiliza esta imagen:

google.com

google.com

Curioso, ¿no?