Hoje vou mostrar uma maneira muito simples e profissional de se animar background com css, usando sprites com efeito hover, especialmente para botões.

Ao invés de se usar javascript para fazer o pre-loader da imagem, e mesmo para gerar o efeito de animação, vamos usar apenas a técnica css de sprites e background.

Bom, primeiro vamos à imagem, que será nosso sprite:

CSS Sprite

Quero deixar os créditos para a Smashing Magazine, de  onde encontrei o sprite através do link http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

A vantagem do sprite é que todas as imagens serão carregadas somente uma vez, assim não é necessário um preloader. Esta imagem contém uma série de botões que serão utilizados.

A idéia que quando o usuário passar o mouse sobre um botão, ou item de menu, o background seja animado.

Criando o HTML e os estilos CSS

Vamos criar os elementos HTML para nosso exemplo, no caso, um menu:

<ul>
	<li class="item_menu" id="button1"></li>
	<li class="item_menu" id="button2"></li>
	<li class="item_menu" id="button3"></li>
</ul>

E agora vamos criar o estilo CSS para os itens do menu:

<style type="text/css">
/* Abaixo é definido a largura e a posição inicial do background para cada item do menu */
#button1{
	width:102px;
	background-position:0px 0px;
}
#button2{
	width:115px;
	background-position:-102px 0px;

}
#button3{
	width:115px;
	background-position:-217px 0px;
}
/* E abaixo é definido a posição do background para cada item do menu, ao passar o mouse sobre eles */
#button1:hover{
	background-position:0px -280px;
}
#button2:hover{
	background-position:-103px -280px;
}
#button3:hover{
	background-position:-219px -280px;
}
/* E abaixo são os estilos comuns dos itens do menu, inclusive a imagem de background */
ul{
	margin:0px;
	padding:0px;
}
.item_menu{
	margin:0px;
	padding:0px;
	list-style:none;
	cursor:pointer;
	float:left;
	height:70px;
	background-image:url('sprite.jpg');
}
</style>

O resultado

Esta simples técnica gera o resultado abaixo:

Outras variações

Usando ainda a mesma imagem, podemos apenas alterar os valores de background-position para cada item do menu, e podemos fazer variações como os exemplos abaixo:

Variação 1

Variação 2

Usando javascript você poderá adicionar efeitos de fade in e slider, o que ocasionará um efeito menos seco do que com css. Mas isso fica para um outro post.

Deixe seu comentário!

Posts Relacionados:

• 10 Tutoriais e demos de menus em JQuery