As miniaturas são uma das partes mais puras de usabilidade que a era digital criou. Em essência, uma miniatura é uma prévia, uma promessa do que você verá se clicar no link. Um pequeno vislumbre com menos dados, mais rápido para carregar e menos ganancioso para o setor imobiliário de tela do que o ativo de tamanho normal. Eles são ideais para imagens, mas e o vídeo?
Bem, ao estender uma técnica que já usamos para estados de botão, podemos criar incríveis miniaturas animadas com CSS básico e um pouco de jQuery.
Hoje em dia, as velocidades de download não são um problema para os desenvolvedores da web. Naturalmente, tamanhos pequenos de arquivos ainda são desejáveis, mas o impacto real do desempenho na maioria dos sites é o número de solicitações HTTP. Cada vez que seu site carrega um ativo, o navegador faz uma solicitação HTTP que é enviada, processada e depois retornada. Verifique o seu console, você verá que muito do atraso no seu site não tem nada a ver com o tamanho da imagem, é gasto esperando por uma resposta do servidor.
A solução é a técnica do sprite CSS; costurando várias imagens em um único arquivo de imagem e, em seguida, exibindo seletivamente diferentes partes dessa imagem usando CSS.
Tradicionalmente, para qualquer botão que não podemos criar com estilos CSS básicos, criamos três estados; um off , um over e um down :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Isso levaria três imagens sendo baixadas do servidor e gerariam três solicitações HTTP.
Criando isso como um sprite CSS, salvamos as três imagens próximas em um único arquivo (para que, em vez de ter três imagens de 200px de largura, tenhamos uma imagem de 600px) e altere a posição da imagem usando a propriedade background-position do CSS :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Pense no elemento como uma janela, através da qual você visualiza a imagem. Você pode mover a imagem, mas a janela permanece na mesma posição. Desde que você garanta que o elemento tenha o mesmo tamanho da parte da imagem que deseja exibir, o efeito será perfeito: