5.1 Gradientes Lineares
Gradientes são uma ferramenta poderosa no web design, permitindo criar transições suaves entre cores sem
usar imagens. CSS fornece dois tipos principais de gradientes: linear (linear-gradient)
e radial (radial-gradient). Esses gradientes são usados para fundos de elementos,
criação de botões e outros efeitos visuais.
Gradientes Lineares (linear-gradient)
Um gradiente linear cria uma transição suave entre duas ou mais cores ao longo de uma linha (eixo) específica. A linha pode ser horizontal, vertical ou em qualquer ângulo.
Sintaxe
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Valores
direction: direção do gradiente. Pode ser especificado em graus (por exemplo,90deg), usando palavras-chave (por exemplo,to right,to bottom left)color-stop: parada de cor, definindo a cor e sua posição no gradiente
Exemplos de Uso
Gradiente Horizontal:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Gradiente Horizontal</div>
</body>
Gradiente Vertical:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Gradiente Vertical</div>
</body>
Gradiente Diagonal:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Gradiente Diagonal</div>
</body>
Gradiente Multicolorido:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Gradiente Multicolorido</div>
</body>
Explicação do Código:
to right: o gradiente vai da esquerda para a direitato bottom: o gradiente vai de cima para baixo45deg: o gradiente vai em um ângulo de 45 grausred,yellow,green,blue: várias paradas de cor para criar um gradiente multicolorido
5.2 Gradientes Radiais
radial-gradient cria uma transição suave entre cores, partindo do centro e se espalhando para as bordas de um círculo
ou elipse. Gradientes radiais podem criar efeitos visuais interessantes, como a imitação de tridimensionalidade.
Sintaxe:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Valores:
shape: forma do gradiente, pode sercircle(círculo) ouellipse(elipse) (valor padrão)size: tamanho do gradiente, pode serclosest-side,closest-corner,farthest-side,farthest-cornerposition: posição do centro do gradiente, pode ser especificada em porcentagens, pixels ou usando palavras-chave (por exemplo,center,topleft)color-stop: parada de cor, definindo a cor e sua posição no gradiente
Exemplos de Uso
Gradiente Circular:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Gradiente Circular</div>
</body>
Gradiente Elíptico:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Gradiente Elíptico</div>
</body>
Gradiente do Centro:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Gradiente do Centro</div>
</body>
Gradiente do Canto:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Gradiente do Canto</div>
</body>
Explicação do Código:
circle: cria um gradiente circularellipse: cria um gradiente elípticoat center: o gradiente começa do centroat top left: o gradiente começa do canto superior esquerdored,blue,green: várias paradas de cor para criar um gradiente multicolorido
5.3 Configurações Adicionais de Gradientes
Gradientes Repetidos
1. Gradientes Lineares Repetidos (repeating-linear-gradient)
Gradientes lineares repetidos criam um padrão repetitivo com um gradiente linear.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Gradientes Radiais Repetidos (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Paradas de Cor Transparentes
Paradas de cor podem incluir transparência para criar efeitos visuais mais complexos.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Uso Conjunto de Vários Gradientes
É possível usar vários gradientes para criar fundos complexos.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION