Tableless

Busca Menu

Elementos de interface utilizando apenas CSS3

Seja o primeiro a comentar por

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

gallery-css

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

lightbox-css

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

dropdown-css

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

tabs-css

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

tooltip-css

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

buttons-css

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=1041

Esse ú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!

Publicado no dia