gradienți CSS3 vă permit să afișați tranziții line între două sau mai multe culori specificate.
Anterior, trebuia să utilizați imagini pentru aceste efecte. Cu toate acestea, prin utilizarea gradienți CSS3 puteți reduce timpul de descărcare și utilizarea lățimii de bandă. În plus, elementele cu gradienți arata mai bine atunci când mărită, pentru că gradientul este generat de către browser.
CSS3 definește două tipuri de gradienți:
- Gradienții liniare (goes down/up/left/right/diagonally) în (goes down/up/left/right/diagonally)
- Gradienții radiali (defined by their center)
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3 gradienții liniari
Pentru a crea un gradient liniar trebuie să definiți cel puțin două stații de culoare. stații de culoare sunt culorile pe care doriți să facă o tranziție lină între. De asemenea , puteți seta un punct de pornire și o direcție (or an angle) , împreună cu efectul de gradient.
Sintaxă
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );Gradient liniar - De sus în jos (this is default)
Exemplul următor prezintă un gradient liniar, care pornește de la partea de sus. Acesta începe roșu, galben, trecerea la:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} Încearcă - l singur » Gradient liniar - stânga la dreapta
Exemplul următor prezintă un gradient liniar, care pornește de la stânga. Acesta începe roșu, galben, trecerea la:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} Încearcă - l singur » Gradient liniar - Diagonal
Puteți face un gradient în diagonală prin specificarea atât pozițiile de plecare orizontale și verticale.
Exemplul următor prezintă un gradient liniar, care pornește de la partea de sus stânga (și merge la dreapta jos). Acesta începe roșu, galben, trecerea la:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} Încearcă - l singur » Utilizarea Unghiuri
Dacă doriți mai mult control asupra direcției gradientului, puteți defini un unghi, în loc de direcțiile predefinite (în jos, în sus, la dreapta, la stânga, la dreapta jos, etc.).
Sintaxă
background: linear- gradient( angle , color-stop1 ,
color-stop2 ) ;
Unghiul este specificat ca un unghi între o linie orizontală și linia de gradient.
Următorul exemplu arată cum se utilizează unghiuri pe gradienți liniare:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} Încearcă - l singur » Utilizarea Opriri mai multe culori
Exemplul următor prezintă un gradient linear (from top to bottom) , cu opriri multiple culori:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} Încearcă - l singur » Următorul exemplu arată cum se creează un gradient liniar (de la stânga la dreapta), cu culoarea curcubeului și un text:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} Încearcă - l singur » Utilizarea de transparență
gradienți CSS3 sprijină, de asemenea, transparența, care pot fi utilizate pentru a crea efecte fading.
Pentru a adăuga transparență, vom folosi rgba() funcția de a defini opritoarele de culoare. Ultimul parametru din rgba() funcție poate fi o valoare de 0 - 1, și definește transparența culorii: 0 indică transparență totală, 1 indică full color (no transparency) .
Exemplul următor prezintă un gradient liniar, care pornește de la stânga. Acesta începe pe deplin transparentă, trecerea la roșu plin de culoare:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari
5.1-6*/
background:
-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} Încearcă - l singur » Repetând un gradient liniar
repeating-linear- gradient() funcție este utilizată pentru a repeta gradienților liniari:
Exemplu
Un gradient linear repetă:
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} Încearcă - l singur » CSS3 Radial Gradienții
Un gradient radial este definit de centrul său.
Pentru a crea un gradient radial trebuie să definească, de asemenea, cel puțin două stații de culoare.
Sintaxă
background: radial-gradient( shape size at position, start-color, ..., last-color );În mod implicit, forma este elipsă, marimea este cel mai îndepărtat colț, și poziția este centru.
Radial Gradient - Uniform distanțați Opriri de culoare (this is default)
Exemplul următor prezintă un gradient radial cu opriri de culoare la distanțe egale:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} Încearcă - l singur » Radial Gradient - Opriri de culoare Differently distanțați
Exemplul următor prezintă un gradient radial cu opriri de culoare diferit distanțați:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} Încearcă - l singur » set Forma
Parametrul de formă definește forma. Se poate lua cercul de valoare sau elipsei. Valoarea implicită este elipsă.
Exemplul următor prezintă un gradient radial cu forma unui cerc:
Exemplu
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} Încearcă - l singur » Utilizarea de diferite dimensiuni Cuvinte cheie
Parametrul dimensiune definește dimensiunea gradientului. Se poate lua patru valori:
- cel mai apropiat-side
- cel mai îndepărtat-side
- cel mai apropiat colț
- cel mai îndepărtat colț
Exemplu
Un gradient radial cu cuvinte cheie diferite dimensiuni:
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} Încearcă - l singur » Repetând un radial gradient
repeating-radial- gradient() funcție este utilizată pentru a repeta gradiente radiale:
Exemplu
Un gradient radial repetă:
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} Încearcă - l singur » Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 » Exercițiul 6» Exercitarea 7 »