Você já notou como às vezes, quando você passa o mouse sobre uma imagem, ela fica em branco por um segundo e depois carrega a imagem de hover? No entanto, quando você volta o mouse, tudo é perfeito.
Aqui está um exemplo do que quero dizer usando minha imagem da escada subterrânea (dividida em duas partes).
Isso ocorre porque existem duas imagens separadas que precisam ser carregadas, e a segunda (ao passar o mouse) leva tempo extra para carregar quando o efeito de hover é acionado.
Neste post, vou mostrar como eliminar esse atraso usando uma técnica de CSS que carrega a imagem inteira de uma vez e exibe uma parte dela.
Combine a Imagem
O primeiro passo para fazer isso funcionar é combinar as duas metades da imagem em uma só. Você pode usar o editor de imagens de sua preferência para fazer isso, basta copiar as duas imagens, dobrar a altura e colar a inativa acima da ativa.
A imagem no meio deve ser o que você está buscando. Agora vamos para o CSS.
O Código
O primeiro passo no CSS é limitar a altura da imagem pela metade (basicamente para que apenas a escada superior apareça).
Para fins deste tutorial, usaremos uma classe chamada .rollover-tut. Como a imagem original da escada é 153×149, usaremos este código CSS:
.rollover-tut {
height: 149px;
width: 153px;
display: block;
}Como estamos criando um link, usaremos o seguinte código HTML:
<a class="rollover-tut" href="#"></a>Neste ponto, seu link deve parecer com a imagem original da escada, sem efeito de hover (ainda).
Para fazer o efeito de hover funcionar, usaremos uma propriedade CSS chamada background-position na pseudoclasse :hover.
.rollover-tut:hover {
background-position: 0 -149px;
}
Com o código CSS acima, você está basicamente movendo a imagem de fundo para cima em 149 pixels (lembre-se, a altura de uma imagem de escada, ou metade das duas combinadas).
Uma maneira mais fácil de lembrar é usar o seguinte código de hover em vez disso, que terá o mesmo efeito do acima, e você não precisa se lembrar de nenhum número (chapéu: Art Webb via comentários):
.rollover-tut:hover {
background-position: bottom left;
}E aqui está o que você obtém:
Observe que não há atraso entre o efeito de hover agora, já que a imagem inteira é carregada de uma vez.
Conclusão
Essa mesma técnica pode ser usada para praticamente qualquer efeito de rollover de imagem de fundo. Não tenho certeza se algum de vocês deu uma olhada no design do meu blog pessoal ultimamente, mas eu a uso extensivamente em praticamente todos os links que usam uma imagem de fundo (e no botão de envio do meu formulário de comentários).
Espero que todos tenham gostado desta dica de CSS. Se tiverem alguma ideia para futuras postagens de dicas de CSS, me avisem nos comentários.
UAU! Bom tutorial! Eu gostei!
Vou sugerir que você examine a navegação do site oficial da Apple. É um uso incrível de sprites CSS. Outro uso muito eficaz de sprites CSS pode ser visto aqui.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
Veja esta imagem e depois veja como Martin a dividiu em diferentes lugares em seu blog.:}
Definitivamente existem maneiras mais avançadas de usar essa técnica. A que eu fiz foi provavelmente a mais simples do grupo.
Também notei algo semelhante em CSS Tricks, o que achei interessante.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Olá Leland,
Este é um post muito, muito bom para iniciantes que ainda usam 2 imagens diferentes para criar rollovers de imagem – muito bem escrito, curto e direto! Botões lindos também!
Comecei a usar sprites recentemente nos projetos dos meus clientes (achei bem complicado da última vez, rs).
Eu tenho uma imagem enorme que contém todos os ícones e botões que eu precisava para o site. Aí eu usei background-position para exibir cada elemento. Pode ficar realmente muito tedioso se houver muitos elementos, mas vale muito a pena
A propósito, é a minha primeira vez aqui no seu site. Eu amo muito, muitos detalhes bonitos e sutis
Obrigado Iwana, fico feliz que tenha gostado do tutorial. Agradeço também as palavras gentis sobre o meu site. 😀
Essa técnica é chamada de CSS Sprites.
Você poderia adicionar mais um estado... Exemplo: normal, hover, selecionado... E então para esses três estados você apenas muda a posição do background para superior esquerda, centro esquerda e inferior esquerda. Nota: Este método requer um pouco de código php :)
Obrigado pelo esclarecimento, Milos. Talvez eu faça um post de acompanhamento sobre como fazer um com estado selecionado/ativo também, ainda usando uma imagem.
Você quer dizer código CSS (e não PHP), certo?
Eu quero dizer CSS e um pouco de PHP. Neste caso, precisamos desse php para declarar quando o link está no estado selecionado. Aqui está um exemplo resumido para um site com duas páginas (Página1 e Página2):
Código da Página1:
<?php $thisPage="Bem-vindo à Página1!"; ?><head>
<title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title>
...
</head>
<body>
<ul id="menu">
<li><a class="page1" <?php if ($thisPage=="Bem-vindo à Página1!") echo "id="selected""; ?> href="page1.php">Página1</a></li>
<li><a class="page2" <?php if ($thisPage=="Bem-vindo à Página2!") echo "id="selected""; ?> href="page2.php">Página2</a></li>
</ul>
...conteúdo...
</body>
Para a página2, basta definir a variável $thisPage como “Bem-vindo à Página2!”
CSS para links:
#menu a { background-position: left top; } #menu a:hover { background-position: left center; } #menu a#selected, #menu a#selected:hover{ background-position: left bottom; }É isso aí 🙂 Valeu
Incrível, eu sei que no WordPress às vezes ele gera classes padrão para itens de página ativos se você usar as funções dele.
Como .current-page-item (para páginas ativas) ou .current-cat para arquivo de categoria ativo.
Obrigado pelas dicas.
De nada 😉 Valeu
Eu adoro usar uma imagem para os estados normal e de hover. A única mudança que eu faria seria na posição do background para o estado de hover. Mude para:
.rollover-tut:hover { background-position: bottom left; }
Dessa forma, se você mudar o tamanho da imagem, não precisará ajustar o tamanho.
Ah… uau, eu nunca pensei nisso, mas faz todo o sentido. Obrigado pela dica.
Mas se você mudasse o tamanho da imagem, não teria que mudar a altura e a largura na primeira declaração?
Ainda assim ajuda, pois é apenas uma coisa a menos para mudar.
Legal e simples. Talvez isso impeça as pessoas de usarem 2 imagens para rollovers.. bem, para imagens únicas =). Bom tutorial, cara, será útil para algumas pessoas no futuro =)
Fico feliz que tenha gostado do tutorial, Anto.