Olá galera, todos bem?

Hoje vou falar de algo que gosto muito, CSS. O css é uma mão na roda certo, ajuda na padronização de estilo, elimina repetições, enxuga o HTML, entre outras vantagens. Mas enquanto a velocidade de carregamento de uma página, é possível o css fazer uma grande (notável) diferença? a resposta é: SIM!

O que é CSS Sprites?

Nada mais é que uma única imagem que contém várias outras imagens de um site… hã? Ficou meio estranho isso, mas é a definição exata da técnica.

  • Pense em uma página que tenha 20 imagens, imagine cada imagem sendo carragada de cada vez… são 20 requisições diferentes.
    Entre essas imagens podem estar logomarcas que exigem uma boa resolução, enfim, vai ficar um pouco mais lento o carregamento.
  • Agora pense nessa mesma página usando uma única imagem que contém TODAS as outras 20, agora é possível ver o resultado?

Exemplo:

O sprites mais famoso do mundo!

Sprites usado no site do Google

Usei um exemplo bem famoso para todos identificarem rapidamente. A idéia é essa, criar uma imagem que contenha todas as outras usadas no site, com isso é necessário uma única requisição e todas as suas imagens estarão carregadas. Fácil de entender!

Como eu faço
Eu uso muitos sprites nos trabalhos que faço, mas costumo organizar tudo pelo tamanho das imagens. O slice do photoshop ajuda muito:

1) Crie um novo documento no photoshop com o tamanho 300x300px, com a ferramenta slice selecione todo documento e clique em “Divide Slice”


2) Nos campos “Divide Horizontally Into” e “Divide Vertically Into” insira o valor 10. Com isso você irá partir o documento em 100 partes iguais de 30px cada.

3) Depois você pode posicionar as imagens dentro dos quadros criados pelo slice.

OBS: Obviamente esse exemplo que usei funciona para imagens do mesmo tamanho, é bom para você agrupar todos os mini-ícones de um site no mesmo sprites, por exmplo: min-icons-sprites.jpg ou big-icons-sprites.jpg

No CSS

Para aplicar o sprite através do css usamos o “background-position”, exemplo:

Marcação HTML

<ul id="exemplo-sprite">
	<li><a href="#" class="logo-nero"></a></li>
	<li><a href="#" class="futebol"></a></li>
	<li><a href="#" class="castelo"></a></li>
	<li><a href="#" class="trofeu"></a></li>
	<li><a href="#" class="lampada"></a></li>
</ul>

CSS

#exemplo-sprite li { list-style:none; }
#exemplo-sprite a{
	background:url(img-big-icons-sprites.jpg) no-repeat;
	width:35px;
	height:35px;
	display:block;
}
#exemplo-sprite .logo-nero { background-position:0px 0px; }
#exemplo-sprite .futebol { background-position:-35px 0px; }
#exemplo-sprite .castelo { background-position:-35px -70px; }
#exemplo-sprite .trofeu { background-position: -105px -70px;}
#exemplo-sprite .lampada { background-position: -70px -105px;}

Exemplo de menu

Marcação HTML

<ul id="nav" class="grid_2">
	<li><a id="navBtn01" href="/Inicio">Página Inicial</a></li>
	<li><a id="navBtn02" href="/Sobre-Nos">Sobre nós</a></li>
	<li><a id="navBtn03" href="/Imoveis-Comprar">Quero comprar</a></li>
	<li><a id="navBtn04" href="/Imoveis-Alugar">Quero alugar</a></li>
	<li><a id="navBtn05" href="/Imoveis-Vender">Quero vender</a></li>
	<li><a id="navBtn06" href="/Noticias-e-Eventos">Notícias e Eventos</a></li>
	<li><a id="navBtn07" href="/Fale-Conosco">Fale Conosco</a></li>
</ul>

CSS

#nav li { list-style:none; }
#nav a {
	background-image:url(img-btns-menu.jpg);
	width:131px;
	height:15px;
	display:block;
	text-indent:-9999px;
	outline: none;
}
#nav li #navBtn01 {	background-position: 0 0; }
#nav li #navBtn01:hover { background-position: -131px 0; }
#nav li #navBtn02 {	background-position: 0 -15px; }
#nav li #navBtn02:hover { background-position: -131px -15px; }
#nav li #navBtn03 {	background-position: 0 -30px; }
#nav li #navBtn03:hover { background-position: -131px -30px; }
#nav li #navBtn04 {	background-position: 0 -45px; }
#nav li #navBtn04:hover { background-position: -131px -45px; }
#nav li #navBtn05 {	background-position: 0 -60px; }
#nav li #navBtn05:hover { background-position: -131px -60px; }
#nav li #navBtn06 {	background-position: 0 -75px; }
#nav li #navBtn06:hover { background-position: -131px -75px; }
#nav li #navBtn07 {	background-position: 0 -90px; }
#nav li #navBtn07:hover { background-position: -131px -90px; }

Veja o exemplo
Faça o download

Dica de cálculo de posicionamento

Os valores do “background-poisition” estão na seguinte ordem eixo X e eixo Y.
Eixo X: valores positivos -> direita | valores negativos -> esquerda
Eixo Y: valores positivos -> para baixo | valores negativos -> para cima

É isso pessoal, espero que tenha ficado claro.
Dúvidas e sugestões são bem vindas!

Até a próxima.