Usando sprites, é possível carregar eficientemente múltiplas imagens num único ficheiro de imagem. Imaginem, numa página com centenas de icons diferentes, teriam que ser feitos centenas de pedidos, um para cada imagem, e cada um deles sujeito aos atrasos de comunicação da rede, etc. etc. Usando uma única imagem, com todos os icons desenhados e agrupados numa grelha com as dimensões conhecidas... poupa-se tudo isso.
Mas, o problema hoje é colocar um desses sprites com dimensões bem conhecidas dentro de um elemento com dimensões desconhecidas, e isso é algo que pode ser elegantemente resolvido com as pseudo-classes CSS.
.star:before {
/* Empty content, but required for pseudo element to display */
content: "";
/* Size of star within sprite */
width: 24px;
height: 24px;
/* Sprite */
background: url(sprite.png) -24px 0 no-repeat;
/* Position/Spacing */
float: left;
margin: 0 10px 2px 0;
}
E que assim permite a utilização de um parágrafo com uma imagem especificando apenas
<p class="star">
Lorem ipsum...
</p>
O before e o after realmente dão algum jeito e estão limitados apenas pela imaginação (a não ser quando tentei ter 1 imagem "antes" por baixo, 1 imagem que alterava para outra aquando do over, e... uma imagem "depois" por cima, o que fazia com que o over não surtisse o efeito desejado, lol, o Nelson que te conte a dor de cabeça que isso me deu visto que não posso entrar em grandes detalhes aqui)... e o uso de sprites é de longe o modo mais eficiente de lidar com imagens, uso-o e recomendo-o em absoluto (mas com o cuidado de evitar desperdícios na organização dos mesmos, tal como tentar criar os mesmos na horizontal de modo a aproveitar melhor as taxas de compressão). ;0)
ResponderEliminar