CSS Sprites

CSS Sprites nada mais é do que unirmos diversas imagens em apenas um arquivo, utilizando CSS para posicioná-las e mostrá-las em seu HTML. 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. Vamos à prática:

Imagem

Unimos as imagens utilizadas em apenas um arquivo:

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 nossa 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(soldiers.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

Temos o famoso efeito rollover, onde passando o mouse sobre cada imagem ela é trocada por outra, confira.