Pietro Gaião

Um sprite é uma coleção de imagens colocadas em uma única imagem.

Uma página web com muitas imagens pode demorar muito tempo para carregar e gera várias solicitações de servidores.

Usando sprites irá reduzir o número de pedidos de servidor.

Em vez de usar três imagens separadas, nós usamos esta imagem única (“img_navsprites.gif”):

Com CSS, podemos mostrar apenas a parte da imagem que nós precisamos.

No exemplo a seguir a CSS especifica qual parte do “img_navsprites.gif” devemos demonstrar:

Exemplo CSS:

<style type="text/css">
    img.home{
      width:46px;
      height:44px;
      background:url(img_navsprites.gif) 0 0;
    }
</style>

HTML:

...
<img src="img_trans.gif" class="home" />
...

Explicação:

• <img class=”home” src=”img_trans.gif” /> – Nessa parte chamamos uma pequena imagem transparente, pois o atributo src não pode estar vazio.
• width: 46px; height: 44px; – Define a parte da imagem que queremos utilizar
• background: img_navsprites.gif (url) 0 0; – Define a posição da imagem (0px esquerda, 0px topo)

Esta é a maneira mais fácil de usar sprites, agora queremos expandi-lo por links usando e efeitos hover.

Como criar uma lista de navegação?

Queremos usar a imagem do sprite (“img_navsprites.gif”) para criar um sistema de navegação lista.

Nós vamos utilizar uma lista de HTML:

Exemplo CSS:

<style type="text/css">

	#navlist{
	position:relative;
	}

	#navlist li{
	margin:0;
	padding:0;
	list-style:none;
	position:absolute;
	top:0;
	height:44px;
	display:block;
	}

	#home{
	left:0px;
	width:46px;
	background:url('img_navsprites.gif') 0 0;
	}

	#prev{
	left:63px;
	width:43px;
	background:url('img_navsprites.gif') -47px 0;
	}

	#next{
	left:129px;
	width:43px;
	background:url('img_navsprites.gif') -91px 0;
	} 

</style>

Exemplo HTML:

...
<ul id="navlist">
	<li id="home"><img src="img_trans.gif" /></li>
	<li id="prev"><img src="img_trans.gif" /></li>
	<li id="next"><img src="img_trans.gif" /></li>
</ul>
...

Explicação:

• #navlist {position:relative;} – Posição é definida como relativo para permitir posicionamento absoluto dentro dele
• #navlist li {margin:0; padding:0; list-style:none; position:absolute; top:0;} – Margin e padding é definido como 0, o estilo de lista com aquelas bolinhas são removidas, e todos os itens da lista são posicionamento absoluto.
• #navlist li {height:44px; display:block;} – A altura de todos as imagens são 44px

Agora começa a posição e estilo de cada parte específica:

• #home {left:0px; width:46px;background:url(img_navsprites.gif) 0 0;} – Posicionado a primeira imagem com 0px de distância da base esquerda, a largura é 46px e define o fundo da imagem e sua posição (0px esquerda, 0px topo)

• #prev {left:63px; width:43px;background:url(img_navsprites.gif) -47px 0;} – Posicionado a segunda imagem com 63px de distância da base esquerda, a largura é de 43px e definimos o fundo -47px para pegar a próxima imagem da direita.

• #next{left:129px; width:43px;background:url(img_navsprites.gif) no-repeat -91px 0;} – Posicionado a terceira imagem com 129px de distância da base esquerda, a largura é 43px e definimos o fundo -91px para pegar a próxima imagem da direita.

Como usar Sprites – Efeito Hover

Agora queremos adicionar um efeito de hover em nossa lista de navegação.

Nossa nova imagem (“img_navsprites_hover.gif”) contém três imagens de navegação e três imagens a utilizar para efeitos: hover

Por esta ser uma única imagem, e não seis arquivos separados, não haverá atraso no carregamento quando um usuário parar o mouse sobre a imagem.

Vamos só adicionar o estilo abaixo no css anterior para adicionar o efeito :hover

...
	#home:hover{
	background: url('img_navsprites_hover.gif') 0 -45px;
	}

	#prev:hover{
	background: url('img_navsprites_hover.gif') -47px -45px;
	}

	#next:hover{
	background: url('img_navsprites_hover.gif') -91px -45px;
	}
...

Explicação:

• Podemos usar a pseudo-classe :hover.
• #home:hover{background: transparent url(img_navsprites_hover.gif) 0 -45px;} – Para todas as três imagens que o usuário para com o mouse em cima especificaremos a posição de fundo e 45px apenas mais abaixo.

Popularity: 23% [?]