Você já notou que, às vezes, quando você passa o mouse sobre uma imagem, ela fica em branco por um segundo e, em seguida, carrega a imagem do mouse? No entanto, quando você passa o mouse novamente, tudo fica perfeito.
Aqui está um exemplo do que quero dizer usando minha imagem da escada do Underground (dividida em duas partes).
Isso ocorre porque há duas imagens separadas que precisam ser carregadas, e a segunda (no hover) leva mais tempo para ser carregada quando o efeito hover é acionado.
Nesta postagem, mostrarei como eliminar esse atraso usando uma técnica de CSS que carrega a imagem inteira de uma vez e exibe uma parte dela.
Combinar a imagem
A primeira etapa para que isso funcione é 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 a que você deseja. Agora vamos passar para o CSS.
O código
A primeira etapa do CSS é limitar a altura da imagem à 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 tem 153×149, usaremos este código CSS:
.rollover-tut {
height: 149px;
largura: 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 se parecer com a imagem original da escada, sem efeito de foco (ainda).
Para que o efeito hover funcione, 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á praticamente movendo a imagem de fundo 149 pixels para cima (lembre-se, a altura de uma imagem de escada ou metade de ambas combinadas).
Uma maneira mais fácil de lembrar é usar o seguinte código hover, que terá o mesmo efeito que o anterior e você não precisará se lembrar de nenhum número (dica: Art Webb nos comentários):
.rollover-tut:hover {
background-position: bottom left;
}E aqui está o que você obtém:
Observe que agora não há atraso entre o efeito hover, pois a imagem inteira é carregada de uma só vez.
Conclusão
Essa mesma técnica pode ser usada para praticamente qualquer efeito de rolagem de imagem de fundo. Não tenho certeza se algum de vocês conferiu o design do meu blog pessoal recentemente, mas faço uso extensivo dessa técnica em praticamente todos os links que usam uma imagem de plano de fundo (e no botão Enviar do meu formulário de comentários).
Espero que vocês tenham gostado dessa dica de CSS. Se você tiver alguma ideia para futuras postagens de dicas de CSS, informe-me nos comentários.
WOW! Nice tutorial! I like it!
I will suggest you to examine the navigation of Apple’s official website navigation. Its an awesome use of CSS sprites. Another very effective use of css sprites can be seen here.
http://www.problogdesign.com/wp-content/themes/pro-blog-design3/images/pbd-png-sprite.png
See this image and then see how Martin broken that up on different places in his blog.:}
There are definitely some more advanced ways of using this technique. The one I did was probably the simplest of the bunch.
I also noticed something similar on CSS Tricks which I found interesting.
http://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-6/images/css-tricks.png
Hey Leland,
This is a very very good post for beginners who are still using 2 different images to create image rollovers – very well-written, short and sweet! Beautiful buttons too!
I’ve just started using sprites recently on my clients’ projects (found it rather troublesome last time lol).
I have a huge image which have all the icons, buttons that I needed for the website. Then I used background-position to display each elements. It can get really really tedious though if there are just too many elements but it’s really worth it
Btw, it’s my first time here on your website. I love it so much, a lot of beautiful & subtle details
Thanks Iwana, glad you liked the tutorial. Appreciate the kind words about my site as well. 😀
This technique is called CSS Sprites.
You could add one more state… Example: normal, hover, selected… And then for these three states you just change background position to top left, center left, and bottom left. Note: This method requires a little php code 🙂
Thanks for the clarification, Milos. Maybe I’ll do a follow up post on how to do one with a selected/active state too, while still using one image.
You mean CSS code (and not PHP) right?
I mean CSS and a little bit of PHP. In this case we need that php to declare when link is in selected state. Here is example in short for web site with two pages (Page1 and Page2):
Page1 code:
<?php $thisPage="Welcome to Page1!"; ?><head>
<title><?php if ($thisPage!="") echo "$thisPage ::"; ?> mysite.com</title>
...
</head>
<body>
<ul id="menu">
<li><a class="page1" <?php if ($thisPage=="Welcome to Page1!") echo "id="selected""; ?> href="page1.php">Page1</a></li>
<li><a class="page2" <?php if ($thisPage=="Welcome to Page2!") echo "id="selected""; ?> href="page2.php">Page2</a></li>
</ul>
...content...
</body>
For page2 just $thisPage variable set to “Welcome to Page2!”
CSS for 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;
}
That’s it 🙂 Cheers
Awesome, I know in WordPress it sometimes spits out default classes for active page items if you use their functions.
Like .current-page-item (for active pages) or .current-cat for active category archive.
Thanks for the tips.
No problem 😉 Cheers
I love using one image for the normal and hover states. The only change I would make is for the background position of the hover state. Change it to:
.rollover-tut:hover {
background-position: bottom left;
}
That way if you change the size of the image, you don’t have to adjust the size.
Ah…wow, I never thought of that but it makes perfect sense. Thanks for the tip.
But if you changed the size of the image, wouldn’t you have to change the height and width in the first declaration?
It still helps as it’s just one less thing to change.
Nice and simple. Maybe this will stop people from using 2 images for rollovers.. well to single images =). Nice tut man, will come in handy for some people in the future =)
Glad you liked the tut, Anto.