Funkcija linear-gradient
Funkcija linear-gradient določa linearni
gradient. Uporablja se za lastnosti, ki
določajo sliko ozadja: background,
background-image
ali sliko obrobe: border-image,
background-image-source.
Sintaksa
selektor {
background: linear-gradient([kot ali smer], barva1 velikost1, barva2 velikost2...);
}
Vrednosti
| Vrednost | Opis |
|---|---|
| smer |
Določa določeno smer gradienta v poljubnih enotah za kote
ali s ključnimi besedami top, left, right, bottom
ali njihovo kombinacijo: top left, top right in tako naprej.
Vrstni red besed ni pomemben: lahko pišete top left in left top,
razlike ni. Parameter ni obvezen: če ga ne napišete, bo gradient
potekal od zgoraj navzdol (kot pri to top). Pred smerjo postavimo besedo to.
|
| kot | Kot v poljubnih enotah za kote. Lahko je pozitiven ali negativen. Parameter ni obvezen. Hkrati lahko je določen ali kot, ali smer (ali sploh nič). |
| barva1 | Začetna barva gradienta v poljubnih enotah za barvo. |
| barva2 | Končna barva gradienta v poljubnih enotah za barvo. |
| velikost | Določa razsežnost določene barve gradienta v poljubnih enotah za velikost. |
Primer . Najenostavnejša različica
Sintaksa:
selektor {
background: linear-gradient(začetna barva, končna barva);
}
Poglejmo si primer:
<div id="elem"></div>
#elem {
background: linear-gradient(black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodamo kot
Sintaksa:
selektor {
background: linear-gradient(kot, začetna barva, končna barva);
}
Poglejmo si primer:
<div id="elem"></div>
#elem {
background: linear-gradient(45deg, black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodamo smer
Namesto kota lahko dodamo smer
top, left, right, bottom
ali njihovo kombinacijo: top left, top right
Pred smerjo postavimo besedo to.
Sintaksa:
selektor {
background: linear-gradient(smer, začetna barva, končna barva);
}
Poglejmo si primer:
<div id="elem"></div>
#elem {
background: linear-gradient(to left, black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodamo smer
Določimo drugo smer:
<div id="elem"></div>
#elem {
background: linear-gradient(to top left, black, red);
width: 200px;
height: 200px;
}
:
Primer . Dodamo velikost
Sintaksa:
selektor {
background: linear-gradient(barva1 velikost1, barva2 velikost2);
}
V naslednjem primeru bo obnašanje naslednje:
čista rdeča barva bo od 0px do
30px, od 30px do 50px
bo gradient od rdeče do modre,
od 50px pa do konca - čista modra:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px);
width: 200px;
height: 200px;
}
:
Primer . Dodamo več kot 2 barve
Sintaksa:
selektor {
background: linear-gradient(barva1 velikost1, barva2 velikost2, barva3 velikost3...);
}
V naslednjem primeru bo obnašanje naslednje:
čista rdeča barva bo od 0px do
30px, od 30px do 50px
bo gradient od rdeče do modre,
od 50px do 70px - gradient od modre
do zelene, po 70px pa - čista zelena:
<div id="elem"></div>
#elem {
background: linear-gradient(red 30px, blue 50px, green 70px);
width: 200px;
height: 200px;
}
:
Primer . Ostri prehodi
V naslednjem primeru bo obnašanje naslednje:
čista rdeča barva bo od 0px do
30px, čista modra - od 30px
do 60px, čista zelena - po 60px
(red 0px lahko tudi ne pišemo):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
width: 200px;
height: 200px;
}
:
Primer . Velikosti lahko določamo tudi v odstotkih
V naslednjem primeru bo obnašanje naslednje:
čista rdeča barva bo od 0% do
30%, čista modra - od 30%
do 60%, čista zelena - po 60%
(red 0% lahko tudi ne pišemo):
<div id="elem"></div>
#elem {
background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
width: 200px;
height: 200px;
}
:
Primer . Kombinacija z background-size
V naslednjem primeru bo obnašanje naslednje:
čista rdeča barva bo od 0px do
30px, čista modra - od 30px
do 60px, pri tem pa se bo vse to ponavljalo
koščki po 60px (zaradi 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;
}
:
Glejte tudi
-
funkcijo
radial-gradient,
ki ustvari radialni gradient -
funkcijo
repeating-linear-gradient,
ki ustvari ponavljajoči se linearni gradient -
funkcijo
repeating-radial-gradient,
ki ustvari ponavljajoči se radialni gradient
