Com a evolução dos navegadores podemos cada vez mais pensar em usar efeitos avançados usando somente CSS3 e HTML5, coisa que antes só era possível com o uso de javascript. Neste tutorial mostrarei como criar um menu com efeito cortina usando somente CSS3 (gradient e transition) e nenhuma imagem!
Suporte dos Navegadores
É importante adiantar que esse efeito só vai funcionar corretamente nos navegadores que suportam transition e gradient em CSS3. Até a data de criação desse tutorial são os navegadores Safari, Chrome e Firefox 4. O Internet Explorer 9 não dá qualquer suporte à transition ou gradient(o Internet Explorer dá suporte à gradient, mas somente através de filtros, o que não me interessa nesse momento). O Opera 11.0 dá suporte à transition, mas não à gradient, então esse navegador também não vai ser contemplado nesse tutorial.
No fim das contas todos os navegadores terão um efeito, mas somente os mais avançados conseguirão mostrar todo o poder do CSS3.
Criando o HTML
O HTML é a parte mais simples de todas. A ideia é criar um menu que contenha links, e para isso vou usar uma lista não ordenada, conforme visto a seguir.
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Efeito Cortina Usando CSS3</title> <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> </head> <body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contato</a></li> </ul> </body> </html>
Criando a Base do CSS
Antes de criar as animações e gradientes, é preciso estilizar o menu para que ele fique realmente com a cara de um menu. então os seguintes estilos são aplicados:
ul,li{
margin:0;
padding:0;
}
ul{
width:500px;
margin:auto;
height:55px;
background:#004008;
overflow:hidden;
}
li{
float:left;
list-style:none;
}
li a{
display:block;
width:125px;
line-height:3.44;
text-align:center;
color:#fff;
text-decoration:none;
font-size:16px;
}
li a:hover{
color:#004008
}
Estou sendo bem genérico na hora de aplicar os estilos, mas em um projeto real o ideal é identificar esse menu através de um id ou class.
Começo resetando a margin e padding da lista e seus itens, coisa que normalmente é feita através de um reset global nos sites ou aplicativos. Em seguida defino largura e cor de fundo do menu.
Fique atento para para a propriedade overflow na lista, que nesse caso tem o valor hidden. Como todo os itens foram flutuados, temos o conhecido problema da tag pai desaparecer, e essa é a maneira mais simples de corrigir esse problema.
Os links são transformados em elementos em bloco para que possam ter uma área clicável consideravelmente maior (isso é importante!). A propriedade line-height serve para centralizar o texto na vertical. Esse valor varia em cada caso, dependendo do tamanho da sua fonte, então é importante que você faça o teste quando for criar o seu.
Criando o Gradient
A criação do gradient é simples, e apesar do nome nós não criaremos um gradient de verdade, e sim uma imagem sólida a partir da propriedade gradient! Mais para frente isso vai ficar mais claro.
Voltando para o CSS, fazemos as seguintes modificações:
li a{
display:block;
width:125px;
line-height:3.44;
text-align:center;
color:#fff;
text-decoration:none;
font-size:16px;
background:-moz-linear-gradient(top,#D4ED6F,#D4ED6F);
background:-webkit-gradient(linear,left top, left bottom ,from(#D4ED6F),to(#D4ED6F));
background:linear-gradient(top,#D4ED6F,#D4ED6F);
}
Criei um gradiente que é idêntico a um background sólido, a diferença é que ele pode ser posicionado como se fosse uma imagem!
Gostaria de chamar a atenção para o uso da sintaxe oficial do gradient no final. Isso é importante porque nos assegura que futuramente todos os navegadores que suportarem essa propriedade serão contemplados com esse código, sem necessidade de alteração. Este código deve funcionar perfeitamente no futuro.
Criando o Efeito Cortina
Para criar o efeito cortina nós precisamos de duas coisas. A primeira é posicionar o gradiente em um local que não podemos ver. A segunda é animar esse gradient para um local que podemos ver.
Posição do background
Primeiro usamos a propriedade background-position, para posicionar o gradiente fora da parte visível, e quando o mouse estiver em cima do link (pseudo classe hover), posicionamos o gradiente na origem.
li a{
display:block;
width:125px;
line-height:3.44;
text-align:center;
color:#fff;
text-decoration:none;
font-size:16px;
background:-moz-linear-gradient(top,#D4ED6F,#D4ED6F);
background:-webkit-gradient(linear,left top, left bottom ,from(#D4ED6F),to(#D4ED6F));
background:linear-gradient(top,#D4ED6F,#D4ED6F);
background-repeat:no-repeat;
background-position:0 -55px;
}
li a:hover{
background-position:0 0;
color:#004008
}
A propriedade background-repeat é fundamental, porque ela assegura que o gradiente não vai se repetir e terá o tamanho exato do nosso link. Nesse momento o efeito está idêntico a uma simples mudança de cor de background. A animação vem a seguir.
Criando a Transição
A criação da transição é bem simples, como visto no código destacado abaixo:
li a{
display:block;
width:125px;
line-height:3.44;
text-align:center;
color:#fff;
text-decoration:none;
font-size:16px;
background:-moz-linear-gradient(top,#D4ED6F,#D4ED6F);
background:-webkit-gradient(linear,left top, left bottom ,from(#D4ED6F),to(#D4ED6F));
background:linear-gradient(top,#D4ED6F,#D4ED6F);
background-repeat:no-repeat;
background-position:0 -55px;
-moz-transition:background-position .2s;
-webkit-transition:background-position .2s;
transition:background-position .2s;
}
li a:hover{
background-position:0 0;
color:#004008
}
Para criar a transição é preciso somente uma linha de código (para compensar pros diferentes navegadores são necessárias duas linhas, a terceira é para assegurar que o código funcionará no futuro, quando os navegadores reconhecerem a sintaxe oficial). Nesse caso específico somente o background-position é modificado, mas nada nos impede impede de animar a cor do texto ou do background por exemplo.
Compensando Para Outros Navegadores
Se o resultado final for testado em navegadores que não suportam gradient ou transition, o background do link não mudará. É importante que tenhamos uma compensação para esses casos, não é legal simplesmente ignorar esses navegadores.
O primeiro passo é identificar se o navegador suporta ou não gradient. Caso não suporte, usaremos um background sólido quando passarmos o mouse por cima do link.
Usarei a biblioteca Modernizr para fazer esse tipo de detecção, porque não acho que seja necssário recriar a roda. No site do Maujor existe um pequeno tutorial mostrando como essa biblioteca é usada.
Primeiro devemos baixar a biblioteca, depois precisamos inclui-la no nosso HTML
<body> <ul> <li><a href="#">Home</a></li> <li><a href="#">Serviços</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contato</a></li> </ul> <script type="text/javascript" src="modernizr-1.6.min.js"></script> </body>
Nos navegadores que não suportam a propriedade gradient, a tag html receberá a classe no-cssgradients. Para esses navegadores usarei um simples background sólido.
.no-cssgradients li a:hover{
background: #D4ED6F;
}
O resultado é uma simples mudança de background nos navegadores que não suportam gradients, o que não é nada mal!
Conclusão
Com CSS3 o nosso horizonte fica bem mais amplo. É possível realizar coisas que antes só eram possíveis através de javascript ou flash. Usando CSS o efeito fica muito mais suave, além de ter uma performance muito melhor.
Se tiver alguma dúvida ou sugestão, fique a vontade para comentar. Abraços e até a próxima!
Errata
Usar um múltiplo como line-height parece não ser uma boa ideia, simplesmente pelo fato de depender do tamanho da fonte. Uma solução melhor é usar a dimensão em pixels. Para este tutorial, 55px é o valor exato de line-height necessário.
Vlw! ainda não li mais vai ser de grande ajuda!
Os tutoriais estão show, vai postar quantos por semana?
No máximo 1 por semana. Se tivesse alguém pra me ajudar, até poderia postar mais, mas infelizmente não é o caso.
Abraço
Muito bom o tutorial, Eduardo! Está de parabéns como sempre.
Ultimamente não tenho estudado muito HTML 5 e CSS3, devido ao curto tempo e tenho outras coisas que estão na “frente” desses dois, que é o PHP e Javascript(JQuery), mas é sempre bom estar atualizado e vendo uma coisa aqui e ali.
Gostaria de dar uma sugestão para um futuro Tutorial, rs. POO com PDO, que tal? rs Seria uma boa, já que você é o único que eu conheço que abordou PDO bem do começo.
Abraços!!
Ótimo tutorial Eduardo, como falo sempre, CSS3 irá salvar vidas, rs. Dando uma pesquisada, vi que você pode fazer algo parecido com IE só que utilizando filter. Como sempre vai ter um para falar : “Se não funciona para o IE, para q vou usar”, rs. Paciência. (claro que não é aconselhável usar filtro, mas pode ser uma alternativa, não recomendada, mas fica no critério de cada um).
Exemplo para Gradiente:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#D4ED6F’, EndColorStr=’#D4ED6F’);
Mais sobre esse assunto:
http://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx
abrs
Se fosse um simples gradient essa solução seria bem plausível, mas o problema é que não é possível posicionar esses gradients, fato necessário pra criar a animação desse tutorial.
Se eu tivesse que compensar pros outros navegadores, eu usaria uma simples imagem, animando com javascript.
Valeu pela sugestão!
Beleza. Mas só funciona no Firefox? Que pena.
Mas valeu…
Funciona no Firefox 4, Safari 5 e Chrome.
só uma duvida rodei no opera e não deu certo
e atualizei o navegador recentemente o que sera qui aconteceu
faz um text e me responde
parabens pelo tutorial ..
Eu não lembro ao certo o porquê não usei o prefixo do Opera pros gradients e animações (talvez por ele não dar esse suporte na época), mas você pode atualizar o código, incluindo o prefixo pro Opera (como o exemplo abaixo).
li a{ /* resto do código */ background:-o-linear-gradient(top,#D4ED6F,#D4ED6F); -o-transition:background-position .2s; }