5.1 Gradiente lineare
I gradienti sono uno strumento potente nel web design, permettendo di creare transizioni morbide tra colori senza usare immagini. CSS offre due tipi principali di gradienti: lineari (linear-gradient) e radiali (radial-gradient). Questi gradienti vengono utilizzati per sfondi di elementi, creazione di pulsanti e altri effetti visivi.
Gradienti lineari (linear-gradient)
Un gradiente lineare crea una transizione morbida tra due o più colori lungo una linea (asse) specifica. La linea può essere orizzontale, verticale o con qualsiasi angolo.
Sintassi
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Valori
direction: direzione del gradiente. Può essere specificato in gradi (ad esempio,90deg), usando parole chiave (ad esempio,to right,to bottom left)color-stop: fermata del colore che determina il colore e la sua posizione nel gradiente
Esempi d'uso
Gradiente orizzontale:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Gradiente orizzontale</div>
</body>
Gradiente verticale:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Gradiente verticale</div>
</body>
Gradiente diagonale:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Gradiente diagonale</div>
</body>
Gradiente multicolore:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Gradiente multicolore</div>
</body>
Spiegazione del codice:
to right: il gradiente va da sinistra a destrato bottom: il gradiente va dall'alto verso il basso45deg: il gradiente va con un angolo di 45 gradired,yellow,green,blue: varie fermate del colore per creare un gradiente multicolore
5.2 Gradienti radiali
radial-gradient crea una transizione morbida tra colori che parte dal centro e si espande verso i bordi di un cerchio o ellisse. I gradienti radiali possono creare effetti visivi interessanti, come l'imitazione della tridimensionalità.
Sintassi:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Valori:
shape: forma del gradiente, può esserecircle(cerchio) oellipse(ellisse) (valore predefinito)size: dimensione del gradiente, può essereclosest-side,closest-corner,farthest-side,farthest-cornerposition: posizione del centro del gradiente, può essere specificato in percentuali, pixel o usando parole chiave (ad esempio,center,topleft)color-stop: fermata del colore che determina il colore e la sua posizione nel gradiente
Esempi d'uso
Gradiente circolare:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Gradiente circolare</div>
</body>
Gradiente ellittico:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Gradiente ellittico</div>
</body>
Gradiente dal 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 dal centro</div>
</body>
Gradiente dall'angolo:
.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 dall'angolo</div>
</body>
Spiegazione del codice:
circle: crea un gradiente circolareellipse: crea un gradiente ellitticoat center: il gradiente parte dal centroat top left: il gradiente parte dall'angolo in alto a sinistrared,blue,green: varie fermate del colore per creare un gradiente multicolore
5.3 Impostazioni aggiuntive dei gradienti
Gradienti ripetuti
1. Gradienti lineari ripetuti (repeating-linear-gradient)
I gradienti lineari ripetuti creano un pattern ripetuto con un gradiente lineare.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Gradienti radiali ripetuti (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Fermate del colore trasparenti
Le fermate del colore possono includere trasparenza per creare effetti visivi più complessi.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Uso congiunto di più gradienti
È possibile utilizzare più gradienti per creare sfondi complessi.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION