⌘K

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

cssselektor {
  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: 

cssselektor {
  background: linear-gradient(začetna barva, končna barva);
}

Poglejmo si primer: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(black, red);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodamo kot

Sintaksa: 

cssselektor {
  background: linear-gradient(kot, začetna barva, končna barva);
}

Poglejmo si primer: 

html<div id="elem"></div>
css#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: 

cssselektor {
  background: linear-gradient(smer, začetna barva, končna barva);
}

Poglejmo si primer: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodamo smer

Določimo drugo smer: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodamo velikost

Sintaksa: 

cssselektor {
  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: 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(red 30px, blue 50px);
  width: 200px;
  height: 200px;
}

Результат:

Primer . Dodamo več kot 2 barve

Sintaksa: 

cssselektor {
  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: 

html<div id="elem"></div>
css#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): 

html<div id="elem"></div>
css#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): 

html<div id="elem"></div>
css#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;): 

html<div id="elem"></div>
css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Glejte tudi

BackLastnost visibilityNextFunkcija radial-gradient