Veja Como usar o linear-gradient no CSS para efeitos degrade e deixar seu projeto ainda mais profissional.

Muitos colegas iniciantes na programação web front-end sempre me perguntam: como você faz este efeito degrade para deixar o sistema mais atraente?

Para ajudar a solucionar esta dúvida simples, quero te mostrar como é muito fácil fazer este efeito magnifico que deixa qualquer aplicação web mais atraente e admirável pelos usuários.

Hoje em dia não é mais necessário utilizar aqueles famosos “geradores de efeitos css”. Com a nova versão do CSS3, você mesmo pode fazer com apenas uma linha de código CSS.

Mas antes, saiba o que é o linear-gradient.

Linear-Gradient

O linear-gradient é um comando do CSS3 que auxilia na construção de efeitos degrade, e pode ser utilizado em divs ou qualquer tag que você cria. Com apenas duas ou mais cores, o efeito degrade é formado facilmente.

Para criar o efeito, basta seguir a ordem dentro do parêntese (): primeiro defina o ângulo do efeito degrade, após em virgulas os canais de cores.

Veja o exemplo a seguir:

 background-image: linear-gradient(to right, blue, red);

Você pode alterar o ângulo do efeito degrade da esquerda para a direita ou o inverso, de baixo para cima ou de cima para baixo. Basta ir testando e aplicando conforme sua necessidade. Se preferir, pode acrescentar mais cores para criar o efeito desejado.

background-image: linear-gradient(to bottom,  blue, red, green);

Tem pessoas que tenta, tenta, tenta e não acerta nos melhores efeitos de cores para o projeto. Uma dica é utilizar cores parecidas, como por exemplo, se preferir usar o vermelho, então utilize um vermelho mais claro e um vermelho mais escuro. Não coloque cores muito coloridas para não quebrar o layout do seu projeto.

Vou deixar um exemplo simples aqui utilizando o azul (use a imaginação):

background-image: linear-gradient(to right, #4c6c81, #083263);

Agora é só ir brincando com o CSS e criando o layout que vai atender seu projeto online. Deixei outro exemplo do efeito degrade utilizando em uma DIV.

width: 100%;
text-align: center;
color: white;
padding: 20px;
background-image: linear-gradient(to right, #4c6c81, #083263);

É Só isso!

Então é isso! Agora você já sabe como utilizar o efeito degrade, utilize em seu projeto e obtenha o melhor layout. Isso vai ajudar muito quando o cliente ver este resultado na aplicação dele e consequentemente um bom retorno financeiro pelo seu trabalho será sua recompensa.

Se você não é desenvolvedor e quer começar a ganhar dinheiro com desenvolvimento de sistemas, indico o curso PHP DO ZERO AO PROFISSIONAL, um curso que te ensina do absoluto ZERO tudo sobre HTML, CSS, JAVASCRIPT no front-end e a linguagem de programação PHP no back-end. Vale muito apena!

caso você já é um desenvolvedor web e quer aprender a criar aplicativos com REACT NATIVE, então recomendo o curso REACT NATIVE DO ZERO AO PROFISSIONAL.

Um grande abraço.

Tags: aprender html e css | como criar efeito degrade no css | Como usar o linear-gradient | css | curso de css | curso de php | efeito degrade css | efeitos com css | html | linear-gradient | linear-gradient no CSS