Exemplu
Exemplul următor prezintă un gradient liniar, care pornește de la partea de sus. Acesta începe roșu, galben la trecerea, apoi la albastru:
#grad {
background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */
background: -o-linear-gradient(red,yellow,blue); /*
Opera 11.1-12.0 */
background: -moz-linear-gradient(red,yellow,blue); /*
Firefox 3.6-15 */
background: linear-gradient(red,yellow,blue); /* Standard
syntax */
}
Încearcă - l singur » Definiție și utilizare
linear- gradient() funcția creează o "image" , care reprezintă un gradient liniar de culori.
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.
Exemplu de Gradient liniar:
| Versiune: | CSS3 |
|---|
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin funcția.
Numerele urmat de -webkit-, -moz- sau -o- specificați prima versiune care a lucrat cu un prefix.
| Funcţie | |||||
|---|---|---|---|---|---|
| linear- gradient() | 26.0 10.0 -webkit- | 10.0 | 16.0 3.6 -moz- | 6.1 5.1 -webkit- | 12.1 11.1 -o- |
CSS Sintaxa
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );
| Valoare | Descriere |
|---|---|
| direction | Definește un punct de pornire și o direcție (or an angle) , împreună cu efectul de gradient. |
| color-stop1, color-stop2,... | stații de culoare sunt culorile pe care doriți să facă o tranziție lină între. Această valoare constă într - o valoare de culoare, urmată de o poziție de oprire opțională (a percentage between 0% and 100% or a length along the gradient axis) de-a (a percentage between 0% and 100% or a length along the gradient axis) . |
Mai multe exemple
Exemplu
Un gradient linear care pornește de la stânga. Acesta începe roșu, trecerea la albastru:
#grad {
background: -webkit-linear-gradient(left,
red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, blue); /* Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , blue); /* Standard syntax */
} Încearcă - l singur » Exemplu
Un gradient liniar , care pornește de la stânga sus (and goes to bottom right) :
#grad {
background: -webkit-linear-gradient(left
top, red , blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red , blue); /* Standard syntax */
} Încearcă - l singur » Exemplu
Un gradient linear cu un unghi specificat:
#grad {
background: -webkit-linear-gradient(180deg,
red, blue); /* Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red,
blue); /* Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg,
red, blue); /* Firefox 3.6 to 15 */
background:
linear-gradient(180deg, red, blue); /* Standard syntax */
} Încearcă - l singur » Exemplu
Un gradient linear cu opriri multiple culori:
#grad {
/* 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 » Exemplu
Un gradient linear cu transparență:
#grad {
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 » Pagini similare
Tutorial CSS: CSS3 Pante
Funcții de referință CSS