CHR Designer - WordPress Freelancer – HTML5 – CSS3 – Mobile – jQuery – Web Developer Freelancer – Freelancer Campinas – São Paulo – Brasil

Category: Web Designer

21/03
2011
2

Como fazer menu em CSS Sprite

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>.

<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>

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.

<style type="text/css">
	ul{list-style-type:none; width:427px; height:40px;}
	li, a{float:left;}
</style>

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.

<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>

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.

<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>

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.

<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>

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

Written by

Meu nome é Cesar H. Ribeiro sou Brasileiro e resido no interior de São Paulo, tenho 7 anos de experiência na parte de desenvolvimento web. Atualmente estou trabalho como webmaster freelancer a 3 anos, minha especialidade é implantação de CMS usando a plataforma Wordpress, transformando layouts personalizados em temas para Wordpress.

  • Facebook.
  • Google Plus.
  • Twitter.
  • Delicious.
  • LinkedIn.
  • Email.
TAGs:

2 Comentários

  1. Nielson disse:

    Não entendi muito bem os valores do background-position.
    Tipo, por que -40, -77… e não 40, 70…?
    por que 00 no primeiro?
    Poderia me mostrar como o navegador ler para que o código tenha resultado desejado?
    parabéns pelo site!

  2. Matheus Ailton disse:

    Muito bom!

Deixe o seu comentário!

*
*



Post's AnteriosPost's Anterios
Tabela Semântica
Post's RecentesPost's Recentes
Como criar @font-face?
CHR Designer
contact me
contato
css3
fale conosco
Freelancer
Freelancer Campinas
html5
wordpress
xhtml

Did you like my Jobs??? Contact me

captcha