Funkcija linear-gradient
Funkcija linear-gradient zadaje linearni
gradient. Primjenjuje se na svojstva koja
zadaju sliku pozadine: background,
background-image
ili sliku granice: border-image,
background-image-source.
Sintaksa
selektor {
background: linear-gradient([ugao ili smer], boja1 veličina1, boja2 veličina2...);
}
Vrednosti
| Vrednost | Opis |
|---|---|
| smer |
Zadaje određeni smer gradienta u bilo kojim jedinicama za uglove
ili ključnim rečima top, left, right, bottom
ili njihovom kombinacijom: top left, top right i tako dalje.
Red reči nije važan: može se pisati top left i left top,
razlike nema. Parametar nije obavezan: ako se ne napiše, gradient će ići
odozgo nadole (kao kod to top). Ispred smera stavlja se reč to.
|
| ugao | Ugao u bilo kojim jedinicama za uglove. Može biti pozitivan ili negativan. Parametar nije obavezan. Istovremeno može biti zadat ili ugao, ili smer (ili ništa). |
| boja1 | Početna boja gradienta u bilo kojim jedinicama za boju. |
| boja2 | Krajnja boja gradienta u bilo kojim jedinicama za boju. |
| veličina | Zadaje protezanje određene boje gradienta u bilo kojim jedinicama za veličinu. |
Primer . Najjednostavnija varijanta
Sintaksa:
selektor {
background: linear-gradient(početna boja, krajnja boja);
}
Pogledajmo na primeru:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodajemo ugao
Sintaksa:
selektor {
background: linear-gradient(ugao, početna boja, krajnja boja);
}
Pogledajmo na primeru:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodajemo smer
Umesto ugla možemo dodati smer
top, left, right, bottom
ili njihovu kombinaciju: top left, top right
Ispred smera stavlja se reč to.
Sintaksa:
selektor {
background: linear-gradient(smer, početna boja, krajnja boja);
}
Pogledajmo na primeru:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodajemo smer
Navedimo drugi smer:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodajemo veličinu
Sintaksa:
selektor {
background: linear-gradient(boja1 veličina1, boja2 veličina2);
}
U sledećem primeru ponašanje će biti sledeće:
čista crvena boja će biti od 0px do
30px, od 30px do 50px
biće gradient od crvene do plave, a
od 50px i do kraja - čista plava boja:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Primer . Dodajemo više od 2 boje
Sintaksa:
selektor {
background: linear-gradient(boja1 veličina1, boja2 veličina2, boja3 veličina3...);
}
U sledećem primeru ponašanje će biti sledeće:
čista crvena boja će biti od 0px do
30px, od 30px do 50px
biće gradient od crvene do plave, a
od 50px i do 70px - gradient od plave
do zelene, a posle 70px - čista zelena boja:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Primer . Oštri prelazi
U sledećem primeru ponašanje će biti sledeće:
čista crvena boja će biti od 0px do
30px, čista plava - od 30px
do 60px, čista zelena - posle 60px
(red 0px se takođe može ne napisati):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Primer . Veličine se mogu zadavati i u procentima
U sledećem primeru ponašanje će biti sledeće:
čista crvena boja će biti od 0% do
30%, čista plava - od 30%
do 60%, čista zelena - posle 60%
(red 0% se takođe može ne napisati):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Primer . Kombinacija sa background-size
U sledećem primeru ponašanje će biti sledeće:
čista crvena boja će biti od 0px do
30px, čista plava - od 30px
do 60px, pri čemu će se sve ovo ponavljati
komadićima po 60px (zbog 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;
}
:
Pogledajte takođe
-
funkciju
radial-gradient,
koja kreira radijalni gradient -
funkciju
repeating-linear-gradient,
koja kreira ponavljajući linearni gradient -
funkciju
repeating-radial-gradient,
koja kreira ponavljajući radijalni gradient
