Elementos de interface utilizando apenas CSS3:
Se por um lado está na hora de você parar de usar jQuery para tudo e investir mais em códigos JavaScript, por outro já é possível criar elementos animados e interativos utilizando apenas CSS3.
É claro que você vai precisar abrir mão de efeitos em navegadores antigos (ou, na maioria dos casos, da implementação inteira). É claro também que as implementações são até certo ponto limitadas em comparação a plugins e bibliotecas JavaScript, mas dão um show em performance e otimização.
Botões, galerias/slides, tabs e até mesmo o famoso efeito de lightbox já podem ser implementados sem nenhuma linha de JavaScript. Confira alguns exemplos.
Galeria
http://benschwarz.github.io/gallery-css/
Ben Schwarz caprichou e lançou recentemente uma galeria utilizando apenas CSS3. A galeria permite controles personalizados e vem com uma animação para autoplay.
Os slides podem conter qualquer conteúdo em HTML e o grande segredo por trás dessa galeria é o uso de âncoras (#) aliado a elementos com position:absolute e o pseudo-atributo :target.
O pseudo atributo target é aplicado em elementos referenciados por uma âncora. Por exemplo, sua página tem um elemento section com o id “section-1″ e um link para a âncora #section-1. Quando o usuário clicar nesse link, o CSS definido na regra section:target será aplicado no elemento #section-1.
Lightbox
http://tympanus.net/codrops/2011/12/26/css3-lightbox/
O efeito Lightbox é um dos grandes responsáveis pela popularização do JavaScript e suas bibliotecas. Hoje já existem centenas de clones do original, com diferentes configurações e a versão CSS supera muitas dessas implementações em JavaScript.
Menu Dropdown
http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
Outro elemento bastante popular em JavaScript é o menu dropdown. Sua versão CSS usa apenas o atributo :hover dos links para exibir e esconder os múltiplos níveis de submenus.
Ainda dá para usar algum tipo de transition ou animation para deixar o menu mais atraente. Quem se habilita?
Abas
http://www.sitepoint.com/css3-tabs-using-target-selector/
E que tal uma interface separada por abas sem usar JavaScript? É isso que este tutorial do Sitepoint oferece, mais uma vez fazendo uso do atributo target.
Tooltip
http://kushagragour.in/lab/hint/
Tooltips possuem dezenas de implementações utilizando JavaScript. Sua versão CSS3 usa e abusa dos pseudo atributos :after e :before.
Uma nota importante: as transições nos atributos after e before só foram implementadas recentemente no Chrome (versão 26). Nada que impeça a tooltip de funcionar – ela apenas será renderizada sem animações.
Botões
http://hellohappy.org/css3-buttons/
Não é só JavaScript que pode ser cortado – também podemos parar de utilizar sprites para botões. Hoje em dia já é possível criar botões consistentes e interativos utilizando apenas CSS3.
O designer Chad Mazzola mantém um repositório de botões “que utilizam o markup mais simples possível”. Este é um bom ponto de partida, mas os exemplos de botões utilizando apenas CSS são os mais fáceis de encontrar.
Evento de clique
http://www.ryancollins.me/?p=1041Esse último exemplo não é bem um elemento, mas sim uma aplicação do evento de clique utilizando o atributo active de um elemento. Com poucas linhas de código é possível exibir/esconder um menu ao clicar em um botão.
E você, já deixou de fazer alguma coisa em JavaScript para implementar utilizando apenas CSS? Diz aí nos comentários!
O post Elementos de interface utilizando apenas CSS3 foi originalmente publicado em Tableless.
Fonte: http://tableless.com.br/elementos-de-interface-utilizando-apenas-css3/
