MangaCode - Desenvolvimento & Cursos Web

CSS3

Como utilizar gradientes em seus layouts apenas com CSS

  • Autor: Bernardo Corrêa
  • Publicado em: 03/10/2018 16:07h
  • Visualizado por: 556 pessoas

Para quem já trabalha com Design, entende como é interessante saber trabalhar com gradientes em seus projetos, mas isso nem sempre foi assim. Há não muito tempo atrás, com a chegada da tendência do Flat Design, gradientes e sombras foram esquecidos tanto por profissionais de design quanto por desenvolvedores front-end.

Para quem não sabe, o Flat Design é um estilo de interface que abre mão de elementos que geram ilusão a três dimensões (3D) – como gradientes, sombras e texturas – para dar ênfase em elementos mais minimalistas, como cores solidas e “chapadas”. Até mesmo imagens com o estilo Flat Design utilizam o mínimo de informação possível.

Porém, atualmente o gradiente e alguns outros elementos ganharam força novamente, é só você ver o exemplo do Redesign da marca do Instagram:

Fazendo uma análise, o gradiente voltou e agora está muito mais elegante, podendo ser usado mesmo em um ambiente minimalista. Por conta disso então, desenvolvedores front-end passaram a utilizar essa nova tendência em seus layouts e o resultado tem agrado muito o público da web. Vejam alguns exemplos de layouts de websites que utilizam gradientes modernos e muito elegantes:

Massa, né? Então vamos aprender de uma vez a utilizar essa propriedade em nossos layouts utilizando somente CSS e a sua imaginação, veja um exemplo simulando um botão com gradiente abaixo:

Utilizamos o código background-image: linear-gradient(to right, red, blue) para gerar o nosso gradiente, mas entenda como funciona a sintaxe desse código: o primeiro elemento dentro do parêntese é a DIREÇÃO, que definimos como to right, ou seja, o nosso gradiente irá começar a partir da esquerda e vai finalizar na direita. O segundo elemento é a COR INICIAL, que definimos como red e vai ser a cor que irá iniciar o nosso efeito de gradiente. O terceiro elemento é a COR FINAL, que vai finalizar o nosso gradiente e a definimos como blue.

Mas o gradiente no CSS não se limita em apenas duas cores, você poderá adicionar quantas cores quiser, apenas separando-as por vírgulas, veja:

Você também poderá mudar a direção do gradiente alterando o primeiro elemento do parêntese, no exemplo abaixo criamos alguns botões utilizando o to right, to left, to bottom e to top.

GRADIENTE COM TRANSPARÊNCIA

Existe também a possibilidade de criar gradientes utilizando apenas elementos de transparência através do padrão RGBA. Você pode utilizar uma cor primária e aplicar gradiente transparente em cima dela, ou aplicar o gradiente transparente em cima de uma imagem, por exemplo. Veja abaixo como ficaria a aplicação dessa técnica:

Existem muitas outras aplicações de gradientes presentes nos mais variados projetos disponíveis na internet, cabe a você e a sua imaginação buscarem sempre a melhor forma de transformar essa aplicação na melhor experiência do usuário possível.

Agora você já sabe como utilizar a propriedade de gradiente no CSS e poderá desenvolver projetos muito mais elegantes e profissionais! Se você gostou de mais essa dica, não esquece de comentar e compartilhar abaixo para ajudar a dar aquela divulgada no nosso blog, beleza?! Te deixo aquele forte abraço, e nos vemos na próxima dica!