Como fazer background gradiente com css
Aquilo que se faz por amor está sempre além do bem e do mal. Friedrich Nietzsche.
OBS: agora tenho um blog que estou publicando meus artigos, se quiser conhecer basta clicar nesse link.
O nosso tão querido (e muitas vezes odiado) css está em uma evolução bem bacana, hoje em dia conseguimos fazer coisas bem legais com, se você quiser acompanhar algumas dessas novas features só clicar aqui. Mas eu vim falar um pouco sobre background antigamente por falta de recursos mais avançado no css, para fazer um background de uma landpage, site mais descolado e afins, alguns desenvolvedores usavam imagens e manipulavam essas imagens e conseguiam (por um milagre 😃) efeitos bem legais.
Pensando nisso eu vim mostrar como fazer um background diferente, eu acho bem legal usar gradientes, mas a minha esposa acha cafona (não a culpo) pois tem algumas coisas um pouco exageradas, tem uma galera que quer fazer gradiente em tudo e isso pode levar um resultado não tão legal, mas bora parar de falar e por a mão na massa.
Para fazermos um gradient simples, usamos o atributo background junto com a função linear-gradient() que cria uma imagem que consiste em uma transição progressiva entre duas ou mais cores.
Com a linear-gradient() você pode escolher de qual lado começa e termina sua cor linear-gradient(to left, #cor) ou se ela começa de cima para baixo e vice-versa linear-gradient(to top, #cor).
O gradient linear é definido por um eixo então também podemos trabalhar com graus dentro da função, para ficar mais explicito e claro o eixo da função é calculado dessa forma:
Então também podemos declarar nosso background desse jeito background: linear-gradient(0deg, #cor) eles funcionam da seguinte forma equivalente as posições, top, right, bottom e left, isso em graus 0, 90, 180 e 270 respectivamente, lembrando que se for usar alguma posição, você precisa do prefixo to dessa forma to left. Lembrando que é baseado em um circulo então você pode considerar qualquer ângulo de até 360 graus então declarando com graus você tem mais liberdade para fazer coisas legais com o gradiente.
Só uma observação que o linear-gradient por default ele começa na posição top ou 0 graus.
Agora vamos alguns exemplos, que eu vou deixar aqui nesse link que eu fiz direto no codesandbox para facilitar e não encher de código aqui no artigo e poluir muito a leitura de vocês.
https://codesandbox.io/embed/sad-mclean-3knyv7?fontsize=14&hidenavigation=1&theme=dark
Bem é isso, espero que tenham gostado, lembrem que qualquer informação que deixei passar, ou se quiserem adicionar qualquer coisa postem nos comentários. Se esse artigo foi útil e puder me pagar um café ficarei feliz. Abraços quentinhos para vocês !!
