English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS3Tutorial Básico

CSS3 Gradiente (Gradients)

CSS3A função de gradiente permite que você crie gradientes de uma cor para outra sem usar nenhuma imagem.

Usando CSS3Gradiente

CSS3A função de gradiente oferece uma solução flexível para gerar transições suaves entre duas ou mais cores. Para alcançar esse efeito, teríamos que usar imagens. Usando CSS3Os gradientes podem reduzir o tempo de download e economizar uso de largura de banda. Os elementos de gradiente podem ser ampliado ou reduzido proporcionalmente até qualquer ponto, sem perder qualidade, e a renderização será mais rápida, pois é gerada pelo navegador.

Existem dois estilos de gradientes:Linear (linear) eRadial(radial).

Criar CSS3 Gradiente linear (linear)

Para criar um gradiente linear, você deve definir pelo menos duas cores. Mas, para criar efeitos de gradiente mais complexos, você pode definir mais cores. Os marcadores de cor são as cores que você deseja apresentar transições suaves. Você também pode definir o ponto de início e a direção (ou ângulo) da aplicação do gradiente. A sintaxe básica para criar gradientes lineares usando palavras-chave pode ser dada da seguinte forma:

linear-gradient(ângulo, cor-stop1, cor-stop2, ...)

Gradiente linear-De cima para baixo

O exemplo a seguir criará um gradiente linear de cima para baixo. Isso é o valor padrão.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(vermelho, amarelo);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(vermelho, amarelo);
　　　　
　　　　background: linear-gradient(vermelho, amarelo);
}
Teste e Veja‹/›

Gradiente linear-Da esquerda para a direita

O exemplo a seguir criará um gradiente linear da esquerda para a direita.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(left, vermelho, amarelo);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(left, vermelho, amarelo);
　　　　
　　　　background: linear-gradient(to right, vermelho, amarelo);
}
Teste e Veja‹/›

Gradiente linear-Diagonal

Você também pode criar gradientes em direção diagonal. O exemplo a seguir criará um gradiente linear da esquerda inferior para a direita superior do retângulo do elemento.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(bottom left, vermelho, amarelo);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(bottom left, vermelho, amarelo);
　　　　
　　　　background: linear-gradient(to top right, vermelho, amarelo);
}
Teste e Veja‹/›

Defina a direção do gradiente linear usando o ângulo

Se você quiser especificar mais a direção do gradiente, pode definir o ângulo em vez de usar palavras-chave pré-definidas. O ângulo 0deg cria um gradiente de baixo para cima, ângulos positivos representam rotação no sentido horário, o que significa que o ângulo90deg cria um gradiente de esquerda para direita. A sintaxe básica para criar gradientes lineares usando ângulos pode ser dada:

linear-gradient(ângulo, cor-stop1, cor-stop2, ...)

O exemplo a seguir usará um ângulo de esquerda para direita para criar gradientes lineares.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(0deg, vermelho, amarelo);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(0deg, vermelho, amarelo);
　　　　
　　　　background: linear-gradient(90deg, vermelho, amarelo);
}
Teste e Veja‹/›

Crie gradientes lineares usando vários marcadores de cor

Você ainda pode criar gradientes para duas cores ou mais. O exemplo a seguir mostrará como usar vários marcadores de cor para criar gradientes lineares. Todas as cores estão distribuídas uniformemente.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(vermelho, amarelo, lima);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(vermelho, amarelo, lima);
　　　　
　　　　background: linear-gradient(vermelho, amarelo, lima);
}
Teste e Veja‹/›

Definir marcador de posição

Os marcadores de cor são pontos ao longo da linha da gradiente, onde terão cor específica. A posição do marcador de cor pode ser especificada em porcentagem ou comprimento absoluto. Você pode especificar quantos marcadores de cor precisar para alcançar o efeito desejado.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(vermelho, amarelo　30%, lima　60%);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(vermelho, amarelo　30%, lima　60%);
　　　　
　　　　background: linear-gradient(vermelho, amarelo　30%, lima　60%);
}
Teste e Veja‹/›

Atenção:Quando a posição da cor é definida em porcentagem, 0% representa o ponto de partida, enquanto100% representa o final. No entanto, você pode usar valores além dessa faixa, ou seja, antes de 0% ou após100% para obter o efeito desejado.

gradiente linear repetido

Você pode usar repeating-linear-A função gradient() repete a gradiente linear.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: white;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-linear-gradient(black, white　10, lime　20%);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-repeating-linear-gradient(black, white　10, lime　20%);
　　　　
　　　　background: repeating-linear-gradient(black, white　10, lime　20%);
}
Teste e Veja‹/›

Criar CSS3gradiente radial(radial)

Na gradiente radial, a cor surge a partir de um único ponto e se espalha de forma suave em forma circular ou elíptica, ao contrário da gradiente linear, que muda de uma cor para outra em uma única direção. A sintaxe básica para criar uma gradiente radial pode ser dada da seguinte forma:

radial-gradient(forma tamanho em posição, cor-stop1, cor-stop2, ...);

radial-Os parâmetros da função gradient() têm os seguintes significados:

  • posição — Especifica o ponto de partida da gradiente, que pode ser especificado por unidade (px, em ou porcentagem) ou palavras-chave (esquerda, inferior, etc.).

  • forma — Especifica a forma final da gradiente. Pode ser circular ou elíptica.

  • tamanho — Especifica o tamanho final da forma da gradiente. O valor padrão é mais distante-lado。

Os seguintes exemplos mostrarão a criação de uma gradiente radial com escalões uniformes.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(vermelho, amarelo, lima);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(vermelho, amarelo, lima);
　　　　
　　　　background: radial-gradient(vermelho, amarelo, lima);
}
Teste e Veja‹/›

Definir a forma da gradiente radial

radial-O parâmetro shape da função gradient() é usado para definir a forma final da gradiente radial. Ele pode ter os valores circle ou ellipse. Este é um exemplo:

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(círculo, vermelho, amarelo, lima);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(círculo, vermelho, amarelo, lima);
　　　　
　　　　background: radial-gradient(círculo, vermelho, amarelo, lima);
}
Teste e Veja‹/›

Atenção:Se o parâmetro shape for omitido ou não especificado, se o tamanho for uma única medida, a forma final termina, o padrão é circular, caso contrário, é elíptica.

Definir o tamanho da gradiente radial

radial-O parâmetro size da função gradient() é usado para definir o tamanho final da gradiente. O tamanho pode ser definido por unidade ou palavras-chave: mais próximo-lado, mais distante-lado, mais próximo-canto, mais distante-canto。

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: vermelho;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-radial-gradient(esquerda inferior, círculo mais distante)-side, red, yellow, lime);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-radial-gradient(esquerda inferior, círculo mais distante)-side, red, yellow, lime);
　　　　
　　　　background: radial-gradient(circle farthest-side at left bottom, red, yellow, lime);
}
Teste e Veja‹/›

Repetição de Gradiente Radial

Você também pode usar a função repeating-radial-função gradient() para repetir gradientes radiais.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: white;
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-repeating-radial-gradient(black, white　10, lime　20%);
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-repeating-radial-gradient(black, white　10, lime　20%);
　　　　
　　　　background: repeating-radial-gradient(black, white　10, lime　20%);
}
Teste e Veja‹/›

CSS3Transparência e Gradientes

CSS3Gradientes também suportamTransparênciaEmpilhadosMúltiplos FundosQuando, você pode usá-lo para criar efeitos de desfoque em imagens de fundo.

.gradient {
　　　　/*　Alternativa para navegadores que não39;t support gradients　*/
　　　　background: url("images/sky.jpg");
　　　　/*　Para Safari　5.1　to　6.0　*/
　　　　background:　-webkit-linear-gradient(left, rgba(255,255,255,0)，rgba(255,255,255,1))，url("images/sky.jpg");
　　　　/*　Para Internet Explorer　10　*/
　　　　background:　-ms-linear-gradient(left, rgba(255,255,255,0)，rgba(255,255,255,1))，url("images/sky.jpg");
　　　　
　　　　background: linear-gradient(to right, rgba(255,255,255,0)，rgba(255,255,255,1))，url("images/sky.jpg");
}
Teste e Veja‹/›
CSS3 Sobrepeso de Texto (Text Overflow)CSS3 Fundo (Background)