Erick Scudero
Com a importância que a internet ganhou nos últimos anos, o design se tornou uma parte essencial do desenvolvimento de websites e aplicações web. E, acompanhando tudo isso, vem o CSS que evoluiu bastante com o passar dos anos e hoje se encontra em sua versão CSS3, cheio de possibilidades diferentes estilizações, efeitos e novos recursos que possibilitam otimizar ainda mais os códigos de estilo.
E…
Para demonstrar o poder dessa linguagem de folha de estilo incrível, elaboramos uma lista com sites incríveis que possuem um CSS complexo que, junto com outras tecnologias como Javascript, transformam simples arquivos HTML em belíssimas peças de design. Todos os exemplos apresentados a seguir foram premiados pelo CSS Design Awards, portanto, merecem o destaque!
Contudo, antes de começar a ler este post, reserve alguns minutos a mais, pois você corre sérios riscos de ficar hipnotizado pela interface da cada um destes websites principalmente se você é um aficionado assumido por web design e desenvolvimento front-end. Prepare-se e depois não diga que eu não avisei!
IMPORTANTE: Todos os websites a serem apresentados abaixo foram avaliados pelo conjunto de sua obra, ou seja, CSS + JavaScript. Contudo, utilizamos como critério diferenciador o CSS, por isso, o título desse post.
1. Agência RESN
Website: RESN
Provavelmente o site mais inovador dessa lista. O site que usa CSS combinado com tecnologias 3D aplicado com canvas e Javascript. Apesar das diversas tecnologias envolvidas e das possibilidades de interação, o site é leve. Isso é resultado de um processo intenso de otimização de código.
DICA: veja este website com o som ligado, a experiência é muito mais impactante. Além disso, não se esqueça de segurar o diamante por mais de alguns segundos por diversas vezes! Explore ao máximo, este site tem uma resposta até para o clique de “inspecionar elemento”.
2. Who We Are Is What We Leave Behind
Website: Subaru
Ligeiramente mais pesado do que o exemplo anterior, mas com muita interação. A melhor feature deste website com certeza é a possibilidade de arrastar e aplicar zoom no mapa (não, não é do google maps que estamos falando).
OBS: este website foi criado pela RESN (agência do site acima), os caras são bons mesmo!
3. Save the Rainforest
Website: Rainforest
Excelente aplicação de canvas, ambientação 3D e fotos em 360° graus. A interação profunda com o usuário é resultado de um amplo estudo de User Interface (UI) e de uma aplicabilidade complexa de Javascript.
4. Locus Solus
Website: Locus-solus
CSS e Javascript aplicados a um design minimalista que prioriza o usuário e a informação, invés de websites pesados e cheios de detalhes sem importância. Neste caso, o CSS foi otimizado e está muito bem estruturado.
5. Agência Aerolab
Website: Aerolab
Assim como o website anterior, esse exemplo também utiliza técnicas de design minimalista para priorizar a informação. No entanto, trata-se de um site com mais animações e uma aplicação complexa de Javascript e CSS3, para assim, tornar a navegação mais interativa.
DIFERENTE:
- Efeitos de hover, principalmente, onde há os caracteres “[“ ou“]”, em laranja;
- Efeitos de scroll do mouse principalmente na homepage.
6. Parallax.js
Website: Parallax
Este é um pouco diferente, pois na verdade, trata-se de uma demonstração do plugin Javascript para o uso da técnica de parallax, bastante usada na rotina de desenvolvimento de websites. Este trabalho consiste no uso de muitas camadas CSS e uma aplicação sublime do parallax em Javascript.
Importante: se possível, acesse via mobile e tablet também!
7. Estúdio digital Akafu
Website: Akaru
A simplicidade, por incrível que pareça, é o diferencial desse site. Além disso, o uso pensado de animações dão um tom de naturalidade para o website. Também houve um intenso trabalho de otimização, para assim, torná-lo leve em todas as plataformas.
8. Grosse Lanterne
Website: Grosse Lanterne
O mérito deste site está na suavidade como as animações acontecem e as variaões de telas conforme o usuário navega, tornando o site bastante dinâmico em termos visuais.
9. Confluence
Website: Confluence
Cores fortes combinadas com leveza. A UI deste website foi pensada para chegar em qualquer tela com poucos cliques. Tudo se dá através de uma boa aplicação de CSS e Javascript.
10. Overpx
Website: Overpx
Uso de parallax e simplicidade de navegação definem este website.
11. Waaark
Website: Waaark
Cores flat, animações incríveis e transições mais incríveis ainda. Este é o conceito do Waaark.
Aproveitando, irei contar uma história sobre este site…
Uma vez eu estava me sentindo “engraçadinho” no meu papel de web designer e resolvi “trollar” o desenvolvedor front-end da Becode. Aí, eu resolvi chamar ele e falar o seguinte:
(Detalhe: recém havíamos entregado o primeiro modelo de layout da plataforma Beta da Becode)
Eu: “Cara, gostei deste site.” (mostrei o site pra ele)
Ele: “Muito legal mesmo, gostei também!” (respondeu ele, muito empolgado)
Eu: “Então, o site da Becode que construímos não foi aprovado e agora precisamos que você reformule todo o design da Becode para algo similar a isso, com estes efeitos, transições, animações, etc. Tens como fazer isso em um mês?” (olhei seriamente para ele)
Ele: (ele me olhou assim)
Concluindo…
Repetindo… muitas das funcionalidades presentes em websites e apresentadas aqui são criadas através de códigos Javascript (funções de arrastar, zoom e algumas animações). Porém, neste post, avaliamos o conjunto da obra e o CSS como um diferencial, responsável por dar estilo a página de acordo com o design proposto pelo web designer. Aliás, é muito importante ressaltar a importância e o papel de tanto web designers, quanto front-end developers, sem profissionais competentes nessas duas áreas, nenhuma dessas aplicações inspiradoras apresentadas aqui seriam possíveis!
CSS e o seu poder de transforamação
Outra boa dica é o site CSS Zen Garden, que mostra o quão poderoso pode ser um arquivo CSS. O site mantém uma lista de diversos estilos desenvolvidos pela comunidade, que são aplicados para o mesmo arquivo HTML. Essa é a melhor forma de mostrar todo poder do CSS. Além disso, para entender um pouco mais, é possível analisar detalhadamente cada um dos exemplos citados através do código fonte.
A cada design que acessamos, podemos ver um site totalmente diferente do outro, apenas mudando o arquivo CSS. A lista completa de estilos para o mesmo arquivo HTML você pode acessar aqui.
Espero que esse post tenha lhe ajudado a conhecer um pouco mais sobre o poder do CSS que, por muitas vezes, é uma tecnologia menosprezada injustamente, como você mesmo pode ver! Caso você tenha gostado do post e queira nos ajudar a descobrir outros sites incríveis que exploram o poder do CSS ao máximo, comente aqui com a sua sugestão de site e o porquê de ele merecer fazer parte dessa lista! Teremos prazer em adicionar a sua sugestão!
