Como fazer degrade com css?
Degrade css
Usar gradiente linear e radial.
background-image: linear-gradient( direção , cor1 , cor2, ... );
Degrade linear - de cima para baixo (esse é o padrão)
O exemplo a seguir mostra um degrade linear que começa na parte superior. Começa em vermelho, passando para turquesa para mostrar o contraste:
#exemplo {
background-image: linear-gradient(red, #00fffff);
}
Degrade linear - da esquerda para a direita
O exemplo a seguir mostra um degrade linear que começa da esquerda. Começa em vermelho, passando para turquesa, mostrando dois modos de escrever as cores:
#exemplo {
background-image: linear-gradient(to right, red , #00ffff);
}
Degrade Linear - Diagonal
Você pode fazer um degrade na diagonal especificando as posições inicial horizontal e vertical.
O exemplo a seguir mostra um degrade linear que começa no canto superior esquerdo (e vai para o canto inferior direito). Começa em vermelho, passando para turquesa, mostrando outro modo de escrever o hexadecimal:
#exemplo {
background-image: linear-gradient(to bottom right, red, #0ff);
}
Usando ângulos
Se você deseja ter mais controle sobre a direção do degrade, pode
definir um ângulo, em vez das direções predefinidas (para baixo, para
cima, para direita, para a esquerda, para a direita, etc.).
Sintaxe
background-image: linear-gradient( angulo , cor1 ,
cor2 );
O ângulo é especificado como um ângulo entre uma linha horizontal e a linha de degrade.
O exemplo a seguir mostra como usar ângulos em degrades lineares:
#exemplo {
background-image: linear-gradient(-90deg, purple, #7fff7f);
}
Usando várias camadas de cores
O exemplo a seguir mostra um degrade linear (de cima para baixo) com várias camadas de cores:
#exemplo {
background-image: linear-gradient(purple, blue, green);
}
O exemplo a seguir mostra como criar um degrade linear (da esquerda para a direita) com a cor do arco-íris:
#exemplo {
background-image: linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
}
Usando transparência
Os degrades de CSS também suportam transparência, que pode ser usada para criar efeitos de desbotamento.
Para adicionar transparência, usamos a função rgba () para definir as camadas de cores.
O último parâmetro na função rgba () pode ser um valor de 0 a 1 e
define a transparência da cor: 0 indica transparência total, 1 indica
cor completa (sem transparência).
O exemplo a seguir mostra um degrade linear que começa da esquerda. Começa totalmente transparente, passando para o vermelho colorido:
#exemplo {
background-image: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1));
}
Repetindo um degrade linear
A função repeat-linear-gradient () é usada para repetir degrades lineares:
Um degrade linear repetitivo:
#exemplo {
background-image:
repeating-linear-gradient(red, yellow 10%, green 20%);
}
Degrades radiais CSS
Um degrade radial é definido por seu centro.
Para criar um degrade radial, você também deve definir pelo menos duas camadas de cores.
Sintaxe
background-image: radial-gradient( tamanho da forma na posição, cor-inicial, ..., cor-final );
Por padrão, a forma é elipse, o tamanho é o canto mais distante e a posição é o centro.
Degrade radial - cores uniformemente espaçadas (esse é o padrão)
O exemplo a seguir mostra um degrade radial com camadas de cores uniformemente espaçadas:
#exemplo {
background-image: radial-gradient(red, yellow, green);
}
Degrade radial - cores com espaçamento diferente
O exemplo a seguir mostra um degrade radial com camadas de cores com espaçamento diferente:
#exemplo {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Definir forma
O parâmetro shape define a forma. Pode levar o círculo de valor ou elipse. O valor padrão é elipse.
O exemplo a seguir mostra um degrade radial com a forma de um círculo:
#exemplo {
background-image: radial-gradient(circle, red, yellow, green);
}
Uso de palavras-chave de tamanhos diferentes
O parâmetro size define o tamanho do degrade. Pode levar quatro valores:
- closest-side
- farthest-side
- closest-corner
- farthest-corner
Um degrade radial com palavras-chave de tamanho diferente:
#exemplo1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#exemplo2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);}
Repetindo um degrade radial
A função repeating-radial-gradient() é usada para repetir degrades radiais:
Um degrade radial repetitivo:
#exemplo {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}
Quer acompanhar as novidade do site?
Leia mais em: ww.w3schools.com/css/css3_gra...
