Gradientes CSS são novos tipos de <image> adicionado
no CSS3 Modulo imagem. Usando gradientes CSS permite que você exiba transições
suaves entre duas ou mais cores especificadas, o que permite evitar o uso de
imagens para estes efeitos, reduzindo assim o tempo de download e uso de banda.
Além disso, porque o gradiente é gerado pelo navegador, você ainda pode ajustar
seu layout muito mais flexível.
Navegadores suportam dois tipos de gradientes: Lineares ,
definidos com o Linear de gradiente de função, e Radial definida com gradiente
radial .
Os gradientes lineares
Para criar um gradiente linear, você define um ponto de
partida e uma direção (especificada como um ângulo) ao longo do qual o efeito
de gradiente é aplicado. Você também defini limites de cor. Paradas de cores, são as cores que deseja, para renderizar transições suaves, e você
deve especificar pelo menos duas delas, mas pode especificar mais para criar
efeitos mais complexos de gradiente.
Gradientes lineares simples
Aqui está um gradiente linear que começa no centro
(horizontalmente) e superior (na vertical), começando azul, com transição para o
branco.
Syntax:
background: linear-gradient(to bottom, blue, white);
Alterar o mesmo gradiente, correndo a partir da esquerda para
a direita:
Syntax:
background: linear-gradient(to right, blue, white);
Você pode fazer o gradiente correr na diagonal,
especificando ambas as posições de partida horizontal e vertical. Por exemplo:
Syntax:
background: linear-gradient(to bottom right,
blue, white);
Usando ângulos
Se você não especificar um ângulo, um é determinado
automaticamente com base na orientação dada. Se você quiser mais controle sobre
a direção do gradiente, você pode definir o ângulo especificamente.
Por exemplo, aqui estão dois gradientes, o primeiro com um
sentido para a direita, e o segundo tem um ângulo de 70 graus.
Syntax:
background: linear-gradient(70deg, black, white);
O ângulo é
especificado como um ângulo entre uma linha horizontal e a linha de gradiente,
indo sentido anti-horário. Em outras palavras, 0deg cria um gradiente vertical
da base para o topo, enquanto 90 Graus gera um gradiente horizontal da esquerda
para a direita.
Syntax:
background: linear-gradient(<angle>, red, white);
Nota:
vários navegadores implementa, prefixado, um projecto antigo da especificação
onde 0deg estava apontando para a direita ao invés (de para o topo). Preste
atenção no valor do ângulo ao misturar prefixados e padrão linear com
gradiente. Uma fórmula fácil de lembrar é de 90 - x = y, onde x é o uso padrão,
e y é o, vendedor-prefixado uso não-padrão.
Paradas de Cores
Paradas de
cores são pontos ao longo da linha de gradiente que vai ter uma cor específica
naquele local. O local pode ser especificado como uma percentagem do
comprimento da linha, ou como um comprimento absoluto. Você pode especificar
quantas Paradas de cores você preferir, a fim de obter o efeito desejado.
Se você
especificar o local como uma porcentagem, 0% representa o ponto de partida,
enquanto que 100% representa o ponto final, no entanto, você pode usar valores
fora dessa faixa, se necessário, para obter o efeito desejado.
Exemplo:
Três paradas de cores
Este
exemplo especifica três pontos de cores:
Syntax:
background: linear-gradient(to bottom, blue, white 80%,
orange);
Transparência e gradientes
Gradientes
apoiando em transparência. Você pode usar isso, por exemplo, ao empilhar vários
fundos, para criar efeitos de desvanecimento em imagens de fundo.
Por
exemplo:
Syntax:
background: linear-gradient(to right, rgba(255,255,255,0),
rgba(255,255,255,1)), url(http://www.mixjb.webs.com/image.jpg);
Os fundos
são empilhados com o primeiro fundo especificado em cima, e cada fundo
sucessivo mais longe. Ao empilhar fundos Desta forma, você pode criar efeitos
muito criativos, como visto acima.
Nenhum comentário:
Postar um comentário