Funcția linear-gradient
Funcția linear-gradient definește un gradient
liniar. Se aplică la proprietățile care
definește imaginea de fundal: background,
background-image
sau imaginea bordurii: border-image,
background-image-source.
Sintaxă
selector {
background: linear-gradient([unghi sau direcție], culoare1 dimensiune1, culoare2 dimensiune2...);
}
Valori
| Valoare | Descriere |
|---|---|
| direcție |
Definește o direcție specifică a gradientului în orice unitate pentru unghiuri
sau prin cuvinte cheie top, left, right, bottom
sau combinația lor: top left, top right și așa mai departe.
Ordinea cuvintelor nu este importantă: se poate scrie top left și left top,
nu există diferență. Parametrul este opțional: dacă nu este scris, gradientul va
merge de sus în jos (ca la to top). Înaintea direcției se pune cuvântul to.
|
| unghi | Unghi în orice unitate pentru unghiuri. Poate fi pozitiv sau negativ. Parametrul este opțional. Simultane poate fi setat fie unghiul, fie direcția (sau nimic). |
| culoare1 | Culoarea de început a gradientului în orice unitate pentru culoare. |
| culoare2 | Culoarea de sfârșit a gradientului în orice unitate pentru culoare. |
| dimensiune | Definește întinderea unei anumite culori a gradientului în orice unitate pentru dimensiune. |
Exemplu . Cea mai simplă variantă
Sintaxa:
selector {
background: linear-gradient(culoare inițială, culoare finală);
}
Să vedem un exemplu:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Exemplu . Adăugăm un unghi
Sintaxa:
selector {
background: linear-gradient(unghi, culoare inițială, culoare finală);
}
Să vedem un exemplu:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Exemplu . Adăugăm o direcție
În loc de unghi se poate adăuga o direcție
top, left, right, bottom
sau combinația lor: top left, top right
Înaintea direcției se pune cuvântul to.
Sintaxa:
selector {
background: linear-gradient(direcție, culoare inițială, culoare finală);
}
Să vedem un exemplu:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Exemplu . Adăugăm o direcție
Să specificăm o altă direcție:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Exemplu . Adăugăm dimensiune
Sintaxa:
selector {
background: linear-gradient(culoare1 dimensiune1, culoare2 dimensiune2);
}
În următorul exemplu comportamentul va fi următorul:
culoarea roșie pură va fi de la 0px până la
30px, de la 30px până la 50px
va fi gradient de la roșu la albastru, iar
de la 50px și până la sfârșit - albastru pur:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Exemplu . Adăugăm mai mult de 2 culori
Sintaxa:
selector {
background: linear-gradient(culoare1 dimensiune1, culoare2 dimensiune2, culoare3 dimensiune3...);
}
În următorul exemplu comportamentul va fi următorul:
culoarea roșie pură va fi de la 0px până la
30px, de la 30px până la 50px
va fi gradient de la roșu la albastru, iar
de la 50px până la 70px - gradient de la albastru
la verde, iar după 70px - verde pur:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Exemplu . Tranziții bruște
În următorul exemplu comportamentul va fi următorul:
culoarea roșie pură va fi de la 0px până la
30px, albastru pur - de la 30px
până la 60px, verde pur - după 60px
(red 0px se poate să nu fie scris):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Exemplu . Dimensiunile se pot seta și în procente
În următorul exemplu comportamentul va fi următorul:
culoarea roșie pură va fi de la 0% până la
30%, albastru pur - de la 30%
până la 60%, verde pur - după 60%
(red 0% se poate să nu fie scris):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Exemplu . Combinație cu background-size
În următorul exemplu comportamentul va fi următorul:
culoarea roșie pură va fi de la 0px până la
30px, albastru pur - de la 30px
până la 60px, iar toate acestea se vor repeta
în bucățele de 60px (datorită background-size:
60px;):
<div id="elem"></div>
#elem {
background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
background-size: 60px 60px;
width: 200px;
height: 200px;
}
:
Vezi și
-
funcția
radial-gradient,
care creează un gradient radial -
funcția
repeating-linear-gradient,
care creează un gradient liniar repetat -
funcția
repeating-radial-gradient,
care creează un gradient radial repetat
