Wtricks • Tutoriais e Dicas do Mundo Digital

CSS Gears: Crie gradientes em segundos com um código limpo e eficaz

Por Carlos Sabo Cantanzaro • 11/04 - 23:26 pm | Em CSS, Design, Web Design

O CSS Gears é uma ferramenta que vai te ajudar a criar degrades bonitos e muito eficientes em suas páginas Web, com o mínimo de complexidade possível

A evolução do CSS trouxe a possibilidade de aplicar recursos muito mais funcionais e elegantes para nossas aplicações web. Um desses recursos, é a possibilidade de usar gradientes para deixar nossas páginas mais vivas e estilosas.

O grande desafio de utilizar esse tipo de recurso no CSS era a compatibilidade dos navegadores e, principalmente, o nível técnico exigido para aplicar os efeitos, o que muitas vezes construir uma barreira para a utilização desses atributos.

O CSS Gears é um site que veio para eliminar essa barreira, tornando o uso de gradientes algo mais simples. 

O primeiro passo é acessar a ferramenta clicando aqui, feito isso, logo no inicio da ferramenta podemos ver um menu bem intuitivo, com apenas três opções: “Featured”, que são os degrades mais usados no memento; “Explore”, onde você pode ver todas as opções de degrades disponíveis na plataforma; e por fim, a opção “Collections”, onde você pode navegar por diversas categorias de degrades disponíveis.

Depois de achar o degrade que mais se encaixa com sua necessidade, você tem três opções de uso, sendo elas, copiar o cópia CSS do degrade (demostrado mais abaixo), ou exportar o mesmo como projeto para o Adobe XD e Sketch. Além disso, você pode clicar no ícone de editar para alterar a configuração de qualquer degrade.

CSS GEARS

Um ponto importante é que ao exporta o degrade para o Adobe XD ou Sketch ele é salvo como um novo projeto, então você precisa abrir esse projeto salvo e copiar o elemento para seu próprio projeto.

CSS GEARS

(ok, o resultado não ficou muito legal por que a escolha dos degrade para exemplo foi de péssimo gosto, mas vamos ignorar minha habilidade com design por hora.)

O custo da simplicidade

Como dito anteriormente a ferramenta visa simplificar o uso de degrades, porém essa simplicidade acaba tendo um custo, que é a falta de recursos mais avançados como, por exemplo, usar mais de duas cores para criar um degrade mais robusto.

Porém, nem de longe isso inviabiliza o uso da ferramentas. Pois, na maioria dos casos, usar mais que duas cores em um degrade em CSS pode acabar gerado um efeito visual bem negativo (na minha opinião, ok?).

Considerações finais

O CSS Gears se propõe a resolver um problema, que é simplificar o uso de degrades na web e faz isso de forma muito eficaz. Sendo assim, minha avaliação da ferramenta é muito positiva. Em apenas cinco minutos de uso eu já tinha domínio total das funcionalidades, então só me restou testar o código gerado pela ferramenta em uma página web.

O resultado do teste você pode ver logo abaixo:

See the Pen CSS Gears – Demonstração by Carlos Sabo Cantanzaro (@wtricks) on CodePen.

O que achou da ferramenta? Deixe sua opinião nos comentários!

PARTICIPE DA DISCUSSÃO