Olá pessoal! Como primeiro artigo produtivo falarei sobre uma técnica muito interessante, principalmente para quem usa bastante imagens em seus sites, como menus, backgrounds, bordas e etc..
Antes de mais nada explicarei como funciona o sistema de posicionamento das imagens na maioria dos editorews de images. Toda imagem possui uma posição no documento, no 
exemplo ao lado eu criei um documento no tamanho de 150px de largura por 150px de altura, dentro desse documento eu desenhei um círculo vermelho com contorno preto, o tamanho desse círculo é de 100px de largura por 100px de altura e o deixei exatamente no centro do documento, vejam ao lado.
Para fazer esse documento eu utilizei o Fireworks, vejam abaixo onde que está parte que mostra as coordenadas, tamanho do desenho e ect.
PS: em outros programas a parte em que mostra as coordenadas da imagem é algo parecido com essa, por tanto familiarize-se.
Lengenda:
W = Width, ou seja, largura;
H = Height, ou seja, altura;
X = Posição Horizontal;
y = Posição Vertical;
Tudo bem até agora? Bom, sabendo como identificar a posição de um objeto em um documento, vamos à parte que nos interessa, CSS!
A Técnica “CSS Sprites” pega essas informações para localizar exatamente a imagem que você deseja, seja para colocar em uma galeria, menu ou até mesmo uma simples imagem mesmo. No nosso exemplo utilizarei essa técnica em um menu com imagens, nosso menu terá apenas 2 estados, logo, serão utilizadas 2 imagens:
1 - Menu em seu estado normal;
2 - Menu quando passamos o mouse sobre ele;
Caso queiram pegar nossas imagens para nos acompanhar, copie-as aqui:
menu.jpg
menuhover.jpg
O nosso código html para o menu nesse caso é esse:
<div id="geral">
<ul>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Imagens</a></li>
<li><a href=”#”>Contato</a></li>
</ul>
</div>
Nada de mais até aqui né?
Normalmente, utilizando as técnicas normais o código css seria assim:
#geral ul {
list-style:none;
}
#geral ul li{
margin:5px;
}
#geral ul li a{
text-decoration:none;
font:12px/25px “Trebuchet MS”, Verdana, Tahoma, sans-serif;
color:#fff;
text-align:center;
background: #000 url(imagens/menu.jpg) no-repeat;
width:120px;
display:block;
}
#geral ul li a:hover {
background: #000 url(imagens/menuhover.jpg) no-repeat;
}
Ficou funcional? Sim, mas imagine um cliente seu pedindo para que cada link tenha uma cor diferente? reparem que nesse exemplo de menu a imagem é complexa, ou seja, precisa ser exibida por completa, e não um linear.. dei o exemplo apenas no menu, mas imagine uma galeria de imagens, cada uma com um thumb e etc. Utilizando Css Sprites esse problema é resolvido, pois, apenas uma imagem será carregada no começo do site, ou melhor, um documento com todas as imagens agrupadas. Para fazer isso, crie um documento com 120px de largura por 55px de altura, logo em cima do documento (0×0) coloque a imagem do menu em seu estado normal, pule 5px para baixo e cole a segunda imagem, uma cópia dessa imagem está aqui:
menusprite.png
menusprite.jpg
Ps: Disponibilizei também a imagem fonte (.png)
Então, observando a imagem, vemos que a imagem do menu em seu estado normal, no documento está nas coordenas 0x e 0y, e a imagem do menuhover está em 0x e 30px Y.
Bom, sabendo disse vamos ao código CSS:
#geral ul {
list-style:none;
}
#geral ul li{
margin:5px;
}
#geral ul li a{
text-decoration:none;
font:12px/25px “Trebuchet MS”, Verdana, Tahoma, sans-serif;
color:#fff;
text-align:center;
background: #000 url(imagens/menusprite.jpg) no-repeat;
background-position:0 0; /* Percebam que a unica linha que eu adicionei ao codigo foi essa */
width:120px;
display:block;
}
#geral ul li a:hover {
background-position:0 -30px; /* E alterei essa */
}
Como comentado no código acima, percebemos que apenas alteramos 2 linhas no código. Nesse caso foi preciso fazer apenas isso, podemos também, ao invez de colocar as posições em coordenadas, em específico nesse caso, podemos colocar “background-position:top” no ” #geral ul li a” e “background-position:bottom” no “#geral menu ul li a:hover” pois como existem apenas duas imagens ( uma em cima e outra embaixo), mas no caso do cliente exigente que quer cada link de uma cor, teríamos que definir uma id para cada link, ficando no html algo mais ou menos assim:
<div>
<ul>
<li><a “href=”#” id=”azul”</li>
<li><a href=”#” id=”verde”</li>
<li><a href=”#” id=”amarelo”</li>
</ul>
</div>
E no css:
#geral ul li a{
background:#fff url(imagens/menusprite.jpg) no-repeat;
background-position:top;
outras propriedades..
}
#geral ul li a:hover#azul {background-position:coord-x coord-y;}
#geral ul li a:hover#verde {background-position:coord-x coord-y;}
etc..
E assim por diante. Bom pessoal, por hoje é isso, espero que tenham gostado do meu artigo. qualquer dúvida estou aqui, como disse à você, estou aprendendo, caso não consiga responder a dúvida de vocês, procurarei a solução e responderei o mais breve possível.
Um grande abraço e até a próxima!
