HTML e CSS 13: Apresentação do CSS3
1. CSS3
O uso do CSS3 traz ao designer uma grande gama de possibilidades. Se quer uma idéia do que o CSS3 é capaz de fazer, acesse este site e acesse o menu tools, e faça testes usando uma de suas ferramentas (procure fazer o acesso usando o navegador Chrome). Se não tiver este navegador instalado, a recomendação é que você o instale agora.
A implementação do CSS3 tem sido mais tranquila do que a do HTML5 no que diz respeito à compatibilidade dos navegadores, embora nem todos os navegadores entendam todas as suas tags hoje (fevereiro de 2011). O que acontece no caso de um navegador não suportar uma tag CSS3 é que seu valor é desprezado e, geralmente, a compreensão do conteúdo do site não é prejudicada. Mesmo assim, sugiro que você teste o resultado do uso de uma tag nova em pelo menos cinco navegadores: IE, Firefox, Chrome, Opera e Safari.
Mesmo que algum destes navegadores não tenham incorporado uma tag CSS3 definitivamente, é comum que haja um código alternativa que a faça funcionar em sua engine.
Assim, mesmo que o seu navegador, digamos, o Chrome, não aceite a tag border-radius (que arredonda bordas de um bloco gráfico) você pode fazer a tag funcionar se usar a sintaxe -webkit-border-radius.
Aqui vai uma tabela que relaciona os engines dos diferentes navegadores e os prefixos a serem usados para cada um.
| Engine | Navegador | Prefixo |
|---|---|---|
| WebKit | Chrome e Safari | -webkit- |
| Gecko | Firefox | -moz- |
| Presto | Opera | -o- |
| Trident | Internet Explorer | -ms- |
Assim, para implementar um box com bordas arredondadas em uma div chamada topo, podemos usar o seguinte código:
#topo {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
Assim, repare na seguinte página e consulte seu código:
<html>
<head>
<title>
Teste de CSS3
</title>
<style type="text/css">
#topo {
width: 300px;
height: 300px;
background-color:#F90;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="topo"></div>
</body>
</html>
Abra esta página em vários navegadores e veja o que acontece.
Assim como a propriedade border-radius, várias outras tags estão disponíveis. Você pode, por exemplo, aplicar opacidade para os boxes de sua página, ou sombra. A aplicação segue os princípios acima: se o navegador der suporte à tag, a regra border-radius: 10px é suficiente, caso contrário, é bom pesquisar se existe uma alternativa, como o uso dos prefixos mencionados na tabela acima. Mas atenção: o simples uso do prefixo não garante que a tag funcione. Por exemplo, mesmo com o prefixo -ms- a tag para border-radius não funciona no IE8.
2. CSS transitions
Como o nome já diz, as transitions implementam efeitos animados em elementos html. As regras de uso seguem o padrão estabelecido acima, com o uso dos prefixos onde se fizer necessário. Para um suporte às normas estabelecidas pelo W3C, consulte esta página.
Com as transições, podemos fazer com que as mudanças proporcionadas pelo CSS, normalmente instantâneas, ocorram ao longo de uma transição em um tempo determinado.
Veja este código:
Repare nas linhas 28 a 31. As linhas de CSS transition: background 1s ease; e suas variantes com prefixo indicam que haverá uma transição no elemento background que durará 1 segundo. O background do link mudará de #eee para #999, isto é, de um cinza claro para um mais escuro. O resultado é este arquivo. Vários outros elementos podem receber transições equivalentes. Para variações de diferentes transições e outras propriedades, consulte também esta página.
Vários efeitos que antes só poderiam ser atingidos através de programação javascript, podem hoje ser gerados só por CSS3.
Veja este exemplo. A foto recebe uma rotação e uma sombra. Ao disparar o estado:hover (quando o mouse paira sobre o elemento), a imagem vai para rotação zero, a sombra se altera, tudo em uma única animação. Para ver como a transição foi feita, consulte esta outra página.