2011/08/18

Sprites com Pseudo Classes CSS

Hoje venho partilhar convosco uma excelente dica para quem trabalhar com HTML e CSS e quer colocar um símbolo a ornamentar um parágrafo de tamanho desconhecido (por exemplo).

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>

1 comentário:

  1. 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