gradientes CSS3 permitem exibir transições suaves entre duas ou mais cores especificadas.
Anteriormente, você tinha que usar as imagens para estes efeitos. No entanto, usando gradientes CSS3, você pode reduzir o tempo de download e uso de banda. Além disso, elementos com gradientes olhar melhor quando ampliada, porque o gradiente é gerado pelo navegador.
CSS3 define dois tipos de gradientes:
- Os gradientes lineares (vai para cima / baixo / esquerda / direita / diagonal)
- Os gradientes radiais (definido pelo seu centro)
Suporte a navegadores
Os números na tabela especificar a primeira versão do browser que suporta totalmente a propriedade.
Números seguido por -webkit-, -moz- , ou -o- especificar a primeira versão que trabalhou com um prefixo.
| Propriedade | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 gradientes lineares
Para criar um gradiente linear você deve definir pelo menos duas paradas de cor. paradas de cores são as cores que deseja para tornar transições suaves entre. Você também pode definir um ponto de partida e uma direção (ou um ângulo), juntamente com o efeito de gradiente.
Sintaxe
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Gradiente Linear - De cima para baixo (este é o padrão)
O exemplo a seguir mostra um gradiente linear que começa no topo. Ela começa vermelho, a transição para o amarelo:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Tente você mesmo " Gradiente Linear - esquerda para a direita
O exemplo a seguir mostra um gradiente linear que começa a partir da esquerda. Ela começa vermelho, a transição para o amarelo:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Tente você mesmo " Gradiente Linear - Diagonal
Você pode fazer um gradiente em diagonal, especificando ambas as posições de partida horizontais e verticais.
O exemplo a seguir mostra um gradiente linear que começa no canto superior esquerdo (e vai para o canto inferior direito). Ela começa vermelho, a transição para o amarelo:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Tente você mesmo " usando Angles
Se você quiser mais controle sobre a direção do gradiente, você pode definir um ângulo, em vez das instruções pré-definidos (para baixo, para cima, para a direita, para a esquerda, para a direita inferior, etc.).
Sintaxe
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
O ângulo é especificado como um ângulo entre uma linha horizontal e pela linha de gradiente.
O exemplo a seguir mostra como usar ângulos em gradientes lineares:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Tente você mesmo " Usando vários limites de cor
O exemplo a seguir mostra um gradiente linear (de cima para baixo) com múltiplas paragens de cores:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Tente você mesmo " O exemplo seguinte mostra como criar um gradiente linear (da esquerda para a direita) com a cor do arco-íris e um texto:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Tente você mesmo " usando Transparência
gradientes CSS3 também suportam a transparência, o que pode ser usado para criar efeitos de desvanecimento.
Para adicionar transparência, usamos o rgba() função para definir os limites de cor. O último parâmetro na rgba() função pode ser um valor de 0 a 1, e define a transparência da cor: 0 indica uma transparência total, 1 indica cor completa (sem transparência).
O exemplo a seguir mostra um gradiente linear que começa a partir da esquerda. Ela começa totalmente transparente, a transição para a plena cor vermelha:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Tente você mesmo " A repetição de um gradiente linear
A repeating-linear-gradient() função é usada para repetir gradientes lineares:
Exemplo
Um gradiente linear repetindo:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Tente você mesmo " CSS3 Radial Gradients
Um gradiente radial é definida por seu centro.
Para criar um gradiente radial você também deve definir pelo menos duas paradas de cor.
Sintaxe
background: radial-gradient( shape size at position, start-color, ..., last-color );Por padrão, a forma é elipse, tamanho é mais distante canto, ea posição é o centro.
Radial Gradient - uniformemente espaçados paradas de cor (padrão)
O exemplo a seguir mostra um gradiente radial com limites de cor uniformemente espaçados:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Tente você mesmo " Radial Gradiente - de modo diferentemente afastado paradas de cor
O exemplo a seguir mostra um gradiente radial com limites de cor diferente espaçados:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Tente você mesmo " Forma conjunto
O parâmetro de forma define a forma. Pode levar o círculo valor ou elipse. O valor padrão é elipse.
O exemplo a seguir mostra um gradiente radial com a forma de um círculo:
Exemplo
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Tente você mesmo " Uso de tamanho diferente Palavras-chave
O parâmetro de tamanho define o tamanho do gradiente. Pode levar quatro valores:
- do lado mais próximo
- mais distante do lado
- mais próximo canto
- mais distante-corner
Exemplo
Um gradiente radial com diferentes palavras-chave de tamanho:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Tente você mesmo " Repetindo um radial gradiente
A repeating-radial-gradient() função é usada para repetir gradientes radiais:
Exemplo
Um gradiente radial repetir:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 » Exercício 6» Exercício 7 »