Site Overlay

Linear-gradient

Talvez uma das partes do CSS 3 mais aguardadas por desenvolvedores, o linear-gradient é uma função capaz de criar imagens com gradientes a partir de uma lista de cores e posições. Extremamente útil para substituir imagens de fundo, os gradientes criados via CSS conseguem se adequar ao tamanho dos seus elementos e podem ser compostos de diversas cores em diversas posições, o que facilita traduzir um gradiente criado em um editor, como o Adobe Photoshop, para um código CSS.

A sintaxe da função é bastante direta. Primeiro se informa a direção em que o gradiente será projetado, aceitando palavras chave como top ou left (para gradientes na vertical ou horizontal) ou combinações de sentidos vertical e horizontal, como top right, para criar gradientes na diagonal. Caso você precise de mais controle sobre a direção dos seus gradientes, você pode informar um valor em graus (deg) também.

Além da direção, é necessário informar pelo menos duas cores, ou os chamados color-stops, um par de cor e posição (em px ou porcentagem), indicando em qual posição a cor deverá terminar ou começar. Toda a transição de uma cor para outra fica a cargo do navegador.

Apesar da flexibilidade da função, você não precisa utilizar muitas opções ou cores para chegar a gradientes tradicionais, como os utilizados em botões ou barras de ações ou títulos.

div {

font-weight: bold;

height: 50px;

line-height: 25px;

margin-bottom: 10px;

padding: 5px;

text-align: center;

width: 220px;

}

.blue {

background-image: linear-gradient(top, #4377FA, #0537B7);

}

.reverse-blue {

background-image: linear-gradient(top, #0537B7, #4377FA);

}

.omg-pink {

background-image: linear-gradient(top right, #FC0050, #FF79A3);

}

<div class=’blue’>

Um gradiente azul clássico, utilizando 2 tons similares.

</div>

<div class=’reverse-blue’>

Uma versão inversa do gradiente azul.

</div>

<div class=’omg-pink’>

Combinando “top” e “right” para a direção.

</div>

O caso clássico da função são os gradientes verticais (geralmente utilizando top como direção), partindo de um tom mais claro de uma cor para um tom mais escuro.

Uma regra simples para não se dar mal com gradientes é manter os tons de cores bastante similares, criando uma leve ilusão de uma superfície arredondada e sob o efeito de alguma fonte de luz. Para isto, tenha em mãos alguma ferramenta de manipulação de cores para montar as combinações necessárias. Como no exemplo anterior, o primeiro gradiente é composto de um tom específico de azul e uma versão mais escura dele mesmo.

Uma alternativa para garantir que os elementos com gradiente não fiquem sem fundo algum em navegadores que não possuam suporte à função é fixar a cor de fundo do elemento para a cor predominante, desta forma o elemento terá um fundo sólido caso o gradiente não seja exibido.

.blue {

background-color: #4377FA; /* A cor superior do gradiente como fundo */

background-image: linear-gradient(top, #4377FA, #0537B7);

}

Outra solução seria definir um background-image antes da declaração do gradiente, contendo o caminho para uma imagem a ser utilizada caso a função não seja executada.

8

Source: scriptcase / Linear-gradient

Comments

comments

Leave a Reply

Your email address will not be published.