CSS Sprites
Quarta-feira, 5 de Março de 2008CSS 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.
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.
Robson10 de Março de 2008 às 13:31h