CSS Sprite – criando um menu animado

Ao contrário do que se poderia imaginar que com velocidades cada vez maiores  das conexões de internet, o peso de uma página seria menos importante, afinal que diferença faria no tempo de carregamento de duas páginas, uma com 200 KB e outra com 210 KB para um usuário com conexão de 10Mb ? teoricamente abririam ao mesmo tempo, seria imperceptível a diferença.

Mas não é assim que o Google pensa e apesar de conexões cada vez mais velozes os Webmasters, Web Designers e Blogueiros tem que se preocupar em economizar cada KB  quanto seja possível prar que a  sua página abra um pouco mais rápido, nem que sejam décimos de segundos.

Os menus são um dos elementos de um site ou blog que muitas vezes se usa mais imagens do que necessário aumentando o seu peso, pois é óbvio ser mais atraente um menu animado que ao passar o mouse em uma imagem ela muda de cor e isso se consegue permutando as imagens.

Então imagina que você tenha um menu com quatro links, cada um com uma imagem diferente em tons de cinza e ao passar o mouse ficarão coloridas.

Pois então faça as contas: quatro imagens em tons de cinza e quatro coloridas formando um total de oito imagens. Se elas fossem carregadas separadamente seriam oito requisições, uma para cada imagem, aumentando o tempo de carregamento.

E se nos criássemos o mesmo menu apenas com uma imagem e com o mesmo efeito?

Parece não ser possível não é? mas é sim com uma técnica chamada CSS Sprites que resume-se em criar uma única imagem de fundo com o menu completo e apenas deslocando o background através da propriedade CSS para deslocamento de background como veremos à seguir, mas antes vamos entender o processo visualmente.

Vamos supor que eu tenha um menu com quatro ícones que inicialmente estarão em tons de cinza e ao passa o mouse em cada item ele ficará colorido. Então veja abaixo a única imagem que iremos usar:

A primeira coisa que será necessário entender é que essa imagem ficará como background e não como imagem quando se usa a tag img do html.

A segunda coisa é que só a linha de cima estará visível, será definida uma altura para os elementos que coincidirá apenas com a altura da primeira linha, fazendo com que a linha inferior, com os ícones coloridos fique escondida, observe  uma camada semitransparente em cima da parte que ficará oculta, isso é só para efeito ilustrativo aqui nesse tutorial.

Então o tempo todo só a linha de cima será visível e o que acontecerá é que ao passar o mouse sobre um item o fundo se deslocará para cima, ficando as imagens da primeira linha oculta e as da segunda linha substituirá.

É como se acontecesse como está na imagem:

A primeira linha que antes estava visível agora ficou acima dessa parte visível e a linha com o ícones coloridos que estava inicialmente oculto, subirá para a porção visível do nosso menu. Então não se esqueça que a unica parte que fica visível na tela é a que não tem uma camada transparente em cima. Lembrando que essas camadas são apenas demonstrativas para que você possa compreender melhor, pois não existirão de verdade no menu.

Mas ainda temos um problema. Dessa forma, quando colocássemos o mouse sobre um ícone ele e todos os outros ficariam coloridos, pois toda a linha seria deslocada.

Mas na verdade o mesmo background é aplicado para cada item separado e definindo a altura e largura de cada item mais o deslocamento, então teriamos item por item. Veja a imagem relativa ao primeiro item:

Observe que o background foi aplicado totalmente para o primeiro item só que ficou totalmente escondido menos o primeiro item inicial. E assim acontecerá com o 2º, 3º e 4º item.

Porém quando você aplica um background em um elemento ele fica zero para a esquerda e para o topo. Portanto se aplicarmos o background ao segundo item sem deslocamento a imagem que irá aparecer é novamente a do primeiro item, então no caso do segundo item, temos que deslocar o background para a direita até que coincida com o segundo ícone. O deslocamento então será negativo, pois partiremos do zero. Observe a imagem abaixo para melhor entendimento.

Veja uma simulação do segundo item. A primeira linha é o primeiro item mesmo,  a segunda e terceira linha é o segundo item, sem o deslocamento do background e então ficaria igual ao primeiro item pois pegaria o primeiro ícone da mesma forma que o primeiro item e depois o correto na terceira linha com o background deslocando-se para direita até que apareça o segundo ícone.

Importante dizer, para que não fique confuso, é que nesse exemplo eu coloquei o item 2 abaixo do item 1 apenas para economizar espaço na tela, porque na verdade estarão lado à lado.

Também foram  suprimidos os ícones coloridos, pois a intenção nesse momento é apenas demonstrar  o deslocamento horizontal.

Repito, é preciso entender que todas as partes demonstradas com a camada transparente, não estarão visíveis e nem ocuparão lugar na tela depois do menu pronto.

Inicialmente faça o download da imagem do menu:  menu Fazer o meu Site demo  é só clicar com o botão da direita do mouse em cima da imagem e “salvar como” para o seu computador, crie uma pasta e coloque a imagem.

Vamos agora ao código css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

<style type="text/css">

#FS_menu {
margin: 20px;
clear: both;
}
#FS_menu li {
float: left;
list-style: none;
}
#FS_menu li a {
display: block;
width: 32px;
height:32px;
background: url(menu-fazer-o-meu-site.png) no-repeat;
}
#FS_menu li a span{
display: none;
}

#FS_menu li .home {
background-position: 0px 0px;
}
#FS_menu li .home:hover{
background-position: 0px -33px;
}

#FS_menu li .Monetizar {
background-position: -55px 0px;
}
#FS_menu li .Monetizar:hover {
background-position: -55px -33px;
}

#FS_menu li .Seo {
background-position: -110px 0px;
}
#FS_menu li .Seo:hover {
background-position: -110px -33px;
}

#FS_menu li .Cursos {
background-position: -170px 0px;
}
#FS_menu li .Cursos:hover{
background-position: -170px -33px;
}

</style>

Criaremos nosso menu em uma lista. Então veja a primeira classe* apenas configura uma distância do menu com relação à margem esquerda. Esse valor você pode mudar a vontade.

* Na verdade  nem todas são classes pois estão passando pelo elemento de ID “menu” que é a própria tag UL  como veremos adiante e referenciando diretamente os elementos dentro dela. Apenas os links possuem classes declaradas, mas chamaremos  todas de classes apenas para facilitar o entendimento.

Agora veja que a segunda classe coloca todos os itens da lista, que são nossos links, horizontalmente através de “float:left”, se retirar esse trecho o menu ficará vertical, mas funcionará da mesma forma. O segundo atributo retira os marcadores da lista.

Perceba que agora na classe seguinte é atribuído o background para todas as tags “a” e com largura e altura de 32 px, isso porque no caso desse menu, as imagens separadas possuem essas dimensões cada uma. Claro que dependendo do tamanho das imagens usadas para outro menu, esse valores teriam que mudar para coincidir com as suas dimensões.

A classe seguinte manipula a visibilidade das tags “span” dentro dos links e que cercam os textos âncora. Isso é necessário para que os links possam existir, porém os textos não apareçam, pois foi aplicado o valor “none” para a propriedade “display” que define como o elemento será visto, ou não.

As classes seguintes manipularão o posicionamento link por link do background, tanto horizontalmente quanto verticalmente.

Observe que são aos pares, a classe com o link normal e depois “hover” ou seja com o mouse sobre ele.

Veja que na classe que manipula o primeiro link, inicialmente os valores são 0 px, pois o posicionamento do primeiro ícone no background está 0 px à esquerda e 0 px do topo então coincide perfeitamente.

Quando o mouse passa em cima desse primeiro link, a parte oculta com os links coloridos (lembra?) precisa se deslocar para cima e ocupar o lugar do link em cinza. Como o seu valor horizontal não precisa mudar porque é o primeiro link e continuará como zero, iremos apenas deslocar o background com o menu para cima.

Veja então que o valor será -33 px, lembre que as imagens separadas tem 32 px então para a imagem abaixo ocupar o lugar você teria que subir 32 px seria negativo, portanto -32 px, porém o valor ficou em -33 px por conta de um pixel a mais de distância vertical entre as duas linhas do menu. Isso é meio difícil de controlar, mas achando o primeiro valor coincidente os outros serão iguais.

Veja que no segundo item eu já preciso deslocar o background para cima e o valor será novamente -33 px e assim para todos pois a distância da primeira para segunda linha é igual para todos. Porém agora precisamos deslocar também para a direita para que apareca o segundo ícone e não o primeiro como já foi explicado antes.

O valor encontrado foi -55, mas você pode estar se perguntando: se a largura de cada ícone separado é de 32 px então por que o valor não é -32 px?

E eu respondo com uma pergunta: e os espaços entre eles não contam?

Uma coisa extremamente importante é que as distâncias de um ícone para o outro assim como o alinhamento esteja prefeito, não poda dar diferença nenhuma, para que os valores coincidam completamente .

E uma outra coisa que ainda não citei, é que esse processo melhora a performance de carregamento de uma página não apenas pela redução do número de requisições feitas para as imagens, mas também quando você junta todas as imagens em uma só, proporcionalmente ela fica mais leve do que somando o peso das imagens separadas.

Analisando esse menu, as quatro imagens separadas teriam uma media de 2,28 Kb o que totalizaria 9,12 Kb, porém depois de colocadas como uma imagem única o seu peso ficou em apenas 4,29 Kb. Uma economia e tanto não é?

Agora vamos ao código HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13

<ul id="FS_menu">

<li><a href="#" class="home"><span>Home</span></a></li>
<li><a href="#" class="Monetizar"><span>Monetizar</span></a></li>
<li><a href="#" class="Seo"><span>Seo</span></a></li>
<li><a href="#" class="Cursos"><span>Cursos</span></a></li>

</ul>

Bom, esse aí não tem muito o que explicar não é mesmo? então crie um documento html, coloque o código css entra as tags <head> e </head> e depois o código html entre as tags <body> e </body> salve dentro da pasta onde está a imagem do menu e pronto é só testar.

Considere também ler o tutorial onde ensino com o uso de css3 a criar um menu que usa apenas links mas que no entanto o efeito são de botões animados, tornando-o muito leve: Menu css3 com efeito de botões em links.

Até a próxima.