Background css animado
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!
