Gaiuss oBlog

Hoje vou ensinar uma técnica muito boa para sites com o layout cheio de imagens. É chato quando você entra num site, passa o mouse em cima de um menu (por exemplo) e demora alguns séculos para a imagem do hover ser carregada. Isso acontece porque há uma requisição para cada imagem que você chama, tornando o processo mais lento. Ao utilizar a técnica CSS Sprite você fará menos requisições, podendo até apostar em uma só imagem, fazendo com que o layout de seu site seja carregado mais rapidamente.

De início o método parece confuso, mas conforme você pega o jeito, nunca mais vai querer largar! Admito que, antes de saber como se montava isso, eu tinha preguiça de aprender. Parecia bem chato e moroso, mas acabou que depois que comecei a fazer, achei super divertido! Sério ¬¬’

Vou tentar explicar aqui como montei parte do CSS Sprite daqui do Gaiuss oBlog. Usei uma imagem só para montar o logotipo, redes sociais, menus, nuvens, campo de busca e por aí vai. Mas pra não ficar muito extenso, mostrarei como foi a construção do menu.

1º Passo – Montando o html

Montei uma UL onde cada LI contem uma class replace e um id para indicar quem é aquele menu. Dentro da LI vem o link pra tal página e, ao invés de escrever o nome do menu (ex: Home), eu coloquei uma tag EM. Essa tag será substituída pela imagem do menu, que já vem com sua descrição. Na primeira LI adicionei também ao link a class on, ela vai ser a indicadora de qual página o usuário está visualizando agora.

<ul id="navigation">
  <li class="replace" id="nav-home"><a class="on" href="#"><em></em></a></li>
  <li class="replace" id="nav-musica"><a href="#"><em></em></a></li>
  <li class="replace" id="nav-filmes"><a href="#"><em></em></a></li>
</ul>

2º Passo – Criando o CSS básico

Agora vem o CSS que cria a base para começar o sprite. A parte do .replace é o que faz seu sprite começar a funcionar. A parte do #navigation é só pra deixar tudo mais arrumado e mais bonito.

.replace {
	position: relative;
	/* hide from IE5Mac \*/
	overflow: hidden;
	/* end hide */
}

.replace em {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-repeat: no-repeat;
}

#navigation  {
	height: 30px;
	width: 472px;
	z-index: 100;
	position: absolute;
	top: 50px;
	left: 390px;
}

#navigation li {
	float: left;
	height: 30px;
	position: absolute;
}

#navigation li a {
	display: block;
	height: 30px;
	cursor: pointer;
	padding: 2px 0 0 5px;
}

3º Passo – Tá na hora de aprender as coordenadas!

Agora vem a parte mais divertida da história toda. Pegue sua imagem, monte de um jeito fácil e vamos encaixar cada parte no CSS.
Como eu fiz um HTML de 3 menus, é esta imagem que vou usar:

Vamos começar pelo “HOME”. Primeiro eu defino o posicionamento desse menu e a largura da imagem que usarei pro menu home:

li#nav-home {
	position: absolute;
	left: 72px;
	top: 25px;
}

li#nav-home a {
	width: 64px;
}

Logo após vamos definir o posicionamento da imagem do menu, ou seja, daquelas 3 imagens HOME (vermelho, amarelo e preto) nós vamos posicionar cada uma para um comportamento – Normal, Hover, On. Para fazer isso é só chamar a imagem e definir um número de pixels para X e Y.

li#nav-home a em {
	background: url("menu.png") no-repeat 0px 0px;
}

li#nav-home a:hover em {
	background: url("menu.png") no-repeat 0px -59px;
}

li#nav-home a.on em {
	background: url("menu.png") no-repeat 0px -117px;
}

Pra quem não lembra das aulas de matemática, X é o eixo horizontal e Y o vertical. Portanto na primeira parte do CSS acima nós definimos 0px 0px. Porque o ponto 0px de X e Y começam no canto da imagem e a largura e altura que já definimos para o HOME fazem o CSS enxergar só aquela parte da imagem.

A mesma coisa vai se seguir para o restante do menu:

li#nav-musica {
	left: 141px;
	top: 25px;
}

li#nav-musica a {
	width: 85px;
}

li#nav-musica a em {
	background: url("menu.png") no-repeat -70px 0px;
}

li#nav-musica a:hover em {
	background: url("menu.png") no-repeat -70px -59px;
}

li#nav-musica a.on em {
	background: url("menu.png") no-repeat -70px -117px;
}

li#nav-filmes {
	left: 235px;
	top: 25px;
}

li#nav-filmes a {
	width: 85px;
}

li#nav-filmes a em {
	background: url("menu.png") no-repeat -160px 0px;
}

li#nav-filmes a:hover em {
	background: url("menu.png") no-repeat -160px -59px;
}

li#nav-filmes a.on em {
	background: url("menu.png") no-repeat -160px -117px;
}

Depois que definimos o posicionamento do primeiro menu, é fácil conseguir acertar os outros. Como você pode reparar todos os pontos Y são iguais nos 3 menus. Isso acontece porque nosso menu é feito na horizontal e a imagem Sprite de cada comportamento foi colocada na vertical. Cada comportamento em cada menu, seja normal, hover ou on, vai começar pela mesma altura. A única coisa que mudamos é chegar mais pra esquerda ou direita, definindo assim um ponto X fixo para cada menu.

E acabou! Quem quiser baixar esse exemplo pronto, pode clicar aqui.
E quem tiver alguma dúvida, é só comentar que eu respondo logo!

Até mais!