Fala galera depois de muito tempo voltei a postar, hoje eu vou falar um pouco de CSS Sprite. É muito simples usar ele mas muitas pessoas tem dúvida de como usar, então vamos começar.
Primeiro de tudo vamos criar uma imagem, por exemplo eu vou fazer um menu bem simples no photoshop com os itens “Home – Quem Somos – Localização -Contato”.
Um toque para vocês sempre crie os itens com a mesma altura para facilitar depois o desenvolvimento, bem depois de criada a imagem vamos para a parte de html, vamos criar a base do que será o menu com <ul> e <li>.
[sourcecode language=”plain”]
<ul>
<li><a title="Home" href="#">Home</a></li>
<li><a title="Quem Somos" href="#">Quem Somos</a></li>
<li><a title="Localização" href="#">Localização</a></li>
<li><a title="Contato" href="#">Contato</a></li>
</ul>
[/sourcecode]
Vamos para a parte de css o nosso menu vai começar aparecer, primeiro vamos sumir com os marcadores padrão do <ul> e depois vamos colocar os estilos na <li> e no <a> você vão ver que o estilo li e a estão juntos mas tem uma virgula separando os dois porque da virgula para quem não sabe ela quer dizer que a tag <li> e a tag <a> vão ter o mesmo estilo.
[sourcecode language=”plain”]
<style type="text/css">
ul{list-style-type:none; width:427px; height:40px;}
li, a{float:left;}
</style>
[/sourcecode]
Agora já está quase chegando a parte mais divertida do CSS Sprite vamos colocar a imagem de background do <a> e colocar as posições da imagem de cada link, primeiro de tudo vou colocar o background para todos os <a> vocês vão ver que ele vai aparecer para todos os links mas é assim mesmo fica tranquilo que vai funcionar.
[sourcecode language=”plain”]
<style type="text/css">
ul{list-style-type:none; width:427px; height:40px;}
li, a{float:left;}
a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}
</style>
[/sourcecode]
Vamos voltar para a parte de html e colocar classes diferentes para cada <a> para nos colocarmos a largura e a posição de background de cada link.
[sourcecode language=”plain”]
<ul>
<li><a class="home" href="#" title="Home">Home</a></li>
<li><a class="quem-somos" href="#" title="Quem Somos">Quem Somos</a></li>
<li><a class="localizacao" href="#" title="Localização">Localização</a></li>
<li><a class="contato" href="#" title="Contato">Contato</a></li>
</ul>
[/sourcecode]
Para finalizar este tutorial vou explicar como funciona o background-position vocês vão ver que ele tem dois zeros “0 0” o primeiro zero é para a posição horizontal da imagem e o segundo zero é para a posição vertical da imagem vocês vão ver que o segundo zero sempre será 0 ou -40px é porque na posição normal do link “off” ele será 0 e na posição hover ele será -40px porque a minha imagem tem 80px de altura e a metade é 40px assim quando a posição for hover ele vai dar -40px do background atual assim mostrando a imagem hover, deixa eu mostra na prática para vocês entenderem melhor.
[sourcecode language=”plain”]
<style type="text/css">
ul{list-style-type:none; width:427px; height:40px;}
li, a{float:left;}
a{background:url(menu.png) top left no-repeat; height:40px; text-indent:-99999px; font-size:0.01em; text-decortation:none;}
a.home{width:77px; background-position:0 0;}
a.home:hover{background-position:0 -40px;}
a.quem-somos{width:138px; background-position:-77px 0;}
a.quem-somos:hover{background-position:-77px -40px;}
a.localizacao{width:122px; background-position: -215px 0;}
a.localizacao:hover{background-position: -215px -40px;}
a.contato{width:90px; background-position:-337px 0;}
a.contato:hover{width:90px; background-position:-337px -40px;}
</style>
[/sourcecode]
Agora vou explicar o que fiz, eu coloquei a largura em todos os links vocês descobrem o tamanho usando o photoshop dando ctrl+t na imagem de cada botão irá mostrar o tamanho no box “informação – info” mas eu dei mais 1px na imagem para deixar uma linha branca para separá-los, agora para o background-position você descobre com a ferramenta “Marquee Tool” ou “tecla M” ai vocês pegam a distância da inicio da imagem até o inicio do botão.
Pronto agora nosso menu está finalizado, pode aparecer um pouco complicado no inicio mas depois vocês vão ver que é muito facil é só praticar, vou deixar o psd dos botões junto com o html para para download para vocês terem como referência, por favor deixem dúvidas ou sugestões, obrigado pessoal até o proxímo post.
Exemplo: Visualizar
Arquivos: Download
