English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Funzione CSS linear-gradient()
La funzione CSS linear-gradient() crea un'immagine che rappresenta la progressione lineare dei colori. Il risultato è un oggetto CSS di tipo <gradient>, che è una forma speciale di <image>.
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
Esempio seguente dimostra una progressione lineare che parte dalla testa e termina nella coda, iniziando con il rosso, passando al giallo e finendo col blu:
}
</style>
</head>
<body>
background-image: linear-gradient(red, yellow, blue);
<h3>Progressione lineare - testa a coda</h3>
<div id="grad1"></div>
<p>Una progressione lineare che parte dalla testa e termina nella coda, iniziando con il rosso, passando al giallo e finendo col blu:</p>
</body>
</html>Prova a vedere ‹/›Definizione e uso
La funzione linear-gradient() viene utilizzata per creare un "immagine" di progressione lineare.
Esempio di progressione lineare
Compatibilità del browser
I numeri specificati nella tabella rappresentano la versione del browser che supporta la funzione per la prima volta, con prefisso "webkit" o "moz" o "o".
| Funzione | |||||
|---|---|---|---|---|---|
| linear-gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
background-image: linear-gradient(direction, color-stop1, color-stop2, ...)
| Valore | Descrizione |
|---|---|
| direction | Specificare la direzione della progressione (o angolo) utilizzando un valore angolare. |
| color-stop1, color-stop2,... | Usato per specificare i colori di inizio e fine della gradiente. |
Esempio seguente dimostra il gradiente lineare da sinistra, che parte da rosso e si trasforma in giallo:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Non supportato quando non sono disponibili gradienti */
background-image: linear-gradient(to right, red, yellow);
}
</style>
</head>
<body>
<h3>Gradiente lineare - Da sinistra a destra</h3>
<p>Gradiente lineare che parte da sinistra. Il punto di partenza è rosso, che gradualmente si trasforma in giallo:</p>
<div id="grad1"></div>
<p><strong>Attenzione：</strong> Internet Explorer 8 e versioni precedenti non supportano i gradienti.</p>
</body>
</html>Prova a vedere ‹/›Esempio seguente dimostra il gradiente lineare da alto a basso a sinistra:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-color: red; /* Non supportato quando non sono disponibili gradienti */
background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>
<h3>Gradiente lineare - Diagnale</h3>
<p>Gradiente lineare che parte dall'angolo in alto a sinistra (fino a destra in basso). Il punto di partenza è rosso, che gradualmente si trasforma in giallo:</p>
<div id="grad1"></div>
<p><strong>Attenzione：</strong> Internet Explorer 8 e versioni precedenti non supportano i gradienti.</p>
</body>
</html>Prova a vedere ‹/›Esempio seguente dimostra come specificare un angolo per la gradiente lineare:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 100px;
background-color: red; /* Mostrato quando il browser non supporta */
background-image: linear-gradient(0deg, red, yellow);
}
#grad2 {
height: 100px;
background-color: red; /* Mostrato quando il browser non supporta */
background-image: linear-gradient(90deg, red, yellow);
}
#grad3 {
height: 100px;
background-color: red; /* Mostrato quando il browser non supporta */
background-image: linear-gradient(180deg, red, yellow);
}
#grad4 {
height: 100px;
background-color: red; /* Mostrato quando il browser non supporta */
background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>
<h3>Gradiente lineare - Utilizzo di angoli diversi</h3>
<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>
<p><strong>Attenzione:</strong> Internet Explorer 9 e versioni precedenti non supportano le gradienti.</p>
</body>
</html>Prova a vedere ‹/›I seguenti esempi mostrano più colori di terminazione:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 55px;
background-color: red; /* Mostrato quando il browser non supporta */
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* Sintassi standard (deve essere messa all'ultimo) */
}
</style>
</head>
<body>
<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Sfondo di gradiente
</div>
<p><strong>Attenzione：</strong> Internet Explorer 8 e versioni precedenti non supportano i gradienti.</p>
</body>
</html>Prova a vedere ‹/›I seguenti esempi utilizzano la trasparenza:
!DOCTYPE html
<html>
<head>
<meta charset="utf-8">
<title>Tutorial di base (oldtoolbag.com)</title>
<style>
#grad1 {
height: 200px;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>
<h3>Gradiente lineare - Trasparenza</h3>
<p>Per aggiungere trasparenza, utilizziamo la funzione rgba() per definire i nodi di colore. L'ultimo parametro della funzione rgba() può essere un valore da 0 a 1, che definisce la trasparenza del colore: 0 significa completamente trasparente, 1 significa completamente opaco.</p>
<div id="grad1"></div>
<p><strong>Attenzione：</strong> Internet Explorer 8 e versioni precedenti non supportano i gradienti.</p>
</body>
</html>Prova a vedere ‹/›Tutorial CSS: Gradiente CSS3