CSS Sprites

Postado em 05/03/2008 na(s) categoria(s) Padrões Web

CSS Sprites nada mais é do que unirmos imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu XHTML. O principal objetivo da utilização desta técnica é a economia de requisições HTTP, fazendo com que seu site ganhe performance e economize banda.

Imagem:

Para começar, unimos todas as imagens utilizadas em apenas uma:

CSS Sprites

XHTML:

Montamos uma lista inserindo uma classe para cada “a”, desta forma conseguiremos manipular cada imagem separadamente:

<ul>
	<li><a href="#" title="Aspira Soldier" class="aspira_soldier">Aspira Soldier</a></li>
	<li><a href="#" title="Elite Soldier" class="elite_soldier">Elite Soldier</a></li>
	<li><a href="#" title="Sniper Soldier" class="sniper_soldier">Sniper Soldier</a></li>
	<li><a href="#" title="Gas Soldier" class="gas_soldier">Gas Soldier</a></li>
</ul>

CSS:

Definimos no “a” o background com a imagem e nas classes criadas manipulamos onde serão buscados os trechos desejados da imagem através da propriedade “background-position”. Seguindo esta mesma linha, definimos o “a:hover” de cada classe:

ul li{float:left}
ul li a{float:left;display:inline;margin-right:5px;border:1px solid #EEE;width:100px;height:100px;text-indent:-15000px;background-image:url(css-sprites-01.gif)}
ul li a:hover{border-color:#999}

/* Aspira Soldier */
ul li a.aspira_soldier{background-position:0 0}
ul li a.aspira_soldier:hover{background-position:0 -100px}

/* Elite Soldier */
ul li a.elite_soldier{background-position:-100px 0}
ul li a.elite_soldier:hover{background-position:-100px -100px}

/* Sniper Soldier */
ul li a.sniper_soldier{background-position:-200px 0}
ul li a.sniper_soldier:hover{background-position:-200px -100px}

/* Gas Soldier */
ul li a.gas_soldier{background-position:-300px 0}
ul li a.gas_soldier:hover{background-position:-300px -100px}

Resultado:

O resultado é o famoso efeito rollover, onde passando o mouse sobre cada imagem ela é trocada por outra:

CSS Sprites

4 comentários para "CSS Sprites":

  1. Comentado em 10/03/2008 por Robson:

    Eu faço sprites desde a AgênciaClick e não sabia que tinham esse nome, valeu pela dica.

    Gostei do seu auto-retrato lá encima.

  2. Comentado em 10/03/2008 por Leonardo DNA:

    Outra coisa interessante de se reparar na questão dos sprites é o fato de que a imagem carregando de uma só vez evita que o link suma durante o rollover, pela imagem seguinte ainda não ter sido carregada. Os Sprites também ficam melhores com ícones e arquivos .gif, justamente por aproveitar ao máximo a paleta de 256 cores.

  3. Comentado em 03/04/2008 por Rafael Barros:

    Adoro esse truque aí, bem bom!

  4. Comentado em 28/11/2008 por Cícero da Silva Feijó:

    Super interessante este artigo, também trabalho há tempos com essa metodologia, mas não sabia o nome correto. Descobri inicialmente através do conteúdo disponibilizado no evento O’Reilly Velocity (http://en.oreilly.com/velocity2008/).

    Abraços!

Deixe um comentário:






»