Css gradient. Gradiente lineare e radiale nei CSS3

Nel CSS3 gradiente è un passaggio da un colore all'altro. I gradient sono creati da linear gradient() e radial gradient().

Il gradiente di sfondo può essere impostato nelle proprietà dello sfondo, background-image, border-immagine e list-style-image.

Supporto del browser

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini:
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

Sfondo a gradiente

1. Gradiente lineare linear-gradient()

linear gradient axis

Un gradiente lineare viene creato utilizzando due o più colori, che stabiliscono la direzione, o linea di sfumatura.

Se la direzione non è specificata, il valore di default - dall'alto verso il basso.

Sfumatura di colore da default è distribuita uniformemente nella direzione perpendicolare al gradiente della linea.

Sintassi

{background: linear-gradient(angolo /lato o angolo d'inclinazione con  parola chiave   ( o copia di parole chiave  ), primo colore ,secondo colore  e cosi via .);}

Vediamo subito un esempio cosa puo fare gradient con delle figure!

Direzione del gradiente può essere impostato in due modi:
utilizzando l'angolo di inclinazione in gradi deg, il cui valore determina l'angolo di inclinazione  della linea al interno dell'elemento .

div {
height: 200px;
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
}

con delle parole chiave to top, to right, to bottom, to left,  che corrispondono al respettivo angolo d'inclinazione, che è uguale a  0deg, 90deg, 180deg e 270deg rispettivamente.

 

background-image: linear-gradient(to right, yellow, green);

to right
to left
to bottom
to top

div {
height: 200px;
background: linear-gradient(to right, #F6EFD2, #CEAD78);
}

Se la direzione è impostata con  una coppia di parole chiave, ad esempio, to top left,  quindi il gradiente inizia da un punto, in questo caso in basso a destra e proseguira verso alto a sinistra

Ecco un esempio di un gradiente diagonale con colori giallo e verde yellow, green:

to right top
to right bottom
to left bottom
to left top

 

div {
height: 200px;
background: linear-gradient(to top left, powderblue, pink);
}

Per una distribuzione non uniforme dei colori s'indica la posizione iniziale di ciascun colore attraverso il punto di arresto del gradiente, le cosiddette interruzioni di colore. I punti di interruzione sono impostati in%, dove 0% - il punto di partenza, 100% - il punto finale, per esempio:

div {
height: 200px;
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
}


Per capire gestire bene  la distribuzione di bande di colore ogni successivo colore deve iniziare dal punto di arresto del colore precedente :

div {
height: 200px;
background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%, #DBDBDB 80%);
}

2. Il gradiente radiale radial-gradient ()

 Gradiente radiale è diverso dal gradiente lineare nel fatto che colori nel primo escono dal un punto solo  (il centro del gradiente) ed uniformemente vengono distribuiti verso l'esterno, disegnando la forma di cerchio o dell'ellisse.

Sintassi

{background: radial-gradient(forma del gradiente / grandezza / posizione del centro, primo colore secondo colore e cosi via.);}

La forma del gradiente è determinata dalle parole circle ed ellipse. Se la forma non è specificata, allora  gradiente radiale dal valore predefinito prende la forma di un'ellisse.

div {
height: 200px;
background: radial-gradient(white, #FFA9A1);
}

Posizione  del centro vene definito dalle parole chiave utilizzate nella proprietà background-position, con l'aggiunta del  prefisso at. Se la posizione del centro  non è specificata, il valore predefinito è at centr.

div {
height: 200px;
background: radial-gradient(at top, #FEFFFF, #A7CECC);
}

Utilizzando la coppia di valori,  indicati  in unità di lungezza %, em o px, si può controllare la dimensione di gradiente in forma  ellittica. Il primo valore specifica la larghezza dell'ellisse, la seconda – l'altezza

div {
height: 200px;
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
}

La dimensione del gradiente viene impostata con utilizzo di  parole chiave. Valore di default farthest-corner (fino al angolo piu lontano).

Valore Descrizione esempio
closest-side La dimensione del gradiente viene calcolato dalla distanza da qualsiasi lato vicino al blocco per circle o dai lati piu vicini per asseX e per У per valore ellipse.

farthest-side La dimensione viene calcolata in base di distanza dai lati piu lontani.

closest-corner La dimensione viene calcolata in base di distanza da angoli piu vicini

farthest-corner La dimensione viene calcolata in base di distanza da angoli più lontani.

div {
height: 200px;
background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB, #352A3B);
}

Con un gradiente radiale, è possibile creare figure realistiche  tridimensionali come palle, pulsanti.

Pallone

div {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
background: radial-gradient(circle at 65% 15%, aqua, darkblue);
}

 

Bottone

/*codice html */
<div class="wrap"><div class="button"></div></div>
/*codice CSS*/
.wrap {
height: 200px;
padding: 50px 0;
background: #cccccc;
}
.button {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto; 
background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);
box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5);
}

Francobollo

Utilizzando gradiente di colore trasparente, è possibile creare diversi effetti.

 

/*codice html */
<div class="container">
<div class="wrap">
  <img src="http://ioeweb.it/images/css/prova.jpg">
</div>
</div>
/*codice CSS*/
.container {
background: #B7D1D8;
padding: 25px;
}
.wrap {
background: radial-gradient(transparent, transparent 4px, white 4px,white);
padding: 10px;
width: 300px;
height: 220px;
background-size: 20px 20px;
background-position: -10px -10px; /*ritaliamo disegno sul bordo*/
margin: 0 auto;
}
img {
width: 100%;
}

 
Letto 1068 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso