Las miniaturas son una de las piezas más puras de usabilidad que ha creado la era digital. En esencia, una miniatura es una vista previa, una promesa de lo que verá si hace clic en el enlace. Un pequeño vistazo con menos datos, más rápido de cargar y menos codicioso para la pantalla de bienes raíces que el activo de tamaño completo. Son ideales para imágenes, pero ¿qué pasa con el video?
Bueno, al extender una técnica que ya usamos para estados de botones, podemos crear miniaturas animadas increíbles con CSS básico y un poco de jQuery.
Hoy en día, las velocidades de descarga no son un problema para los desarrolladores web. Por supuesto, los tamaños de archivo pequeños todavía son deseables, pero el rendimiento real alcanzado en la mayoría de los sitios es el número de solicitudes HTTP. Cada vez que su sitio carga un activo, el navegador realiza una solicitud HTTP que se envía, procesa y luego devuelve. Verifique su consola, verá que gran parte de la demora en su sitio no tiene nada que ver con el tamaño de la imagen, sino que está agotado esperando una respuesta del servidor.
La solución es la técnica sprite de CSS; unir múltiples imágenes en un solo archivo de imagen y luego mostrar selectivamente diferentes partes de esa imagen usando CSS.
Tradicionalmente, para cualquier botón que no podemos crear con estilos CSS básicos, creamos tres estados; un apagado , un over y un down :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Esto llevaría a que se descarguen tres imágenes del servidor y generará tres solicitudes HTTP.
Construyendo esto como un sprite CSS, guardamos las tres imágenes juntas en un solo archivo (para que en lugar de tener tres imágenes de 200px de ancho tengamos una imagen de 600px de ancho) y cambiemos la posición de la imagen usando la propiedad de posición de fondo de CSS :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Piense en el elemento como una ventana a través del cual ve la imagen. Puede mover la imagen, pero la ventana permanece en la misma posición. Siempre que se asegure de que el elemento tenga el mismo tamaño que la parte de la imagen que desea mostrar, el efecto es uniforme: