Barvni prehodi v CSS

Barvni prehodi v CSS omogočajo gladek prehod med dvema ali več barvami brez uporabe slik. Tako lahko ustvarimo sodobna ozadja, poudarke, pasice in druge vizualne učinke neposredno v slogovni datoteki.

Barvni prehodi so uporabni zato, ker so prilagodljivi, ostri pri povečavi in ne zahtevajo dodatnih slikovnih datotek. Pri tem pa moramo paziti, da prehodi ne otežijo branja besedila ali ne zmanjšajo preglednosti vmesnika.

Pomni: Barvni prehod ni slika, ampak vrednost lastnosti ozadja. Zato ga lahko preprosto spreminjamo neposredno v CSS kodi.

Pred uvedbo barvnih prehodov v CSS so oblikovalci podobne učinke pogosto ustvarjali s slikami. Danes so barvni prehodi v CSS bolj prilagodljivi, hitrejši za nalaganje in lepše delujejo pri povečavi strani.

Osnovna pravila

Barvni prehod določimo kot ozadje elementa.
Linearni prehod poteka v določeni smeri ali pod določenim kotom.
Radialni prehod se širi iz središča navzven.
Barvni mejniki omogočajo natančnejši nadzor nad položajem barv.
Ponavljajoči se prehodi so uporabni za vzorce in dekorativna ozadja.

Pozor: Barvni prehod je lahko vizualno zelo izrazit. Če ga uporabimo za ozadje besedila, moramo preveriti, ali je besedilo še vedno dovolj berljivo in kontrastno.

Linearni barvni prehod

Za linearni barvni prehod določimo smer in vsaj dve barvi. Sintaksa je:

background: linear-gradient(smer, barva1, barva2, ...)

Če smeri ne določimo, je privzeta smer od zgoraj navzdol.

Primer linearnega barvnega prehoda od vrha proti dnu:

<div id="prehodDol"></div>

#prehodDol {
   width: auto;
   height: 100px;
   background: linear-gradient(orange, blue);
}

Primer linearnega barvnega prehoda od leve proti desni s tremi barvami:

<div id="prehodDesno"></div>

#prehodDesno {
   width: auto;
   height: 100px;
   background: linear-gradient(to right, orange, blue, red);
}

Primer diagonalnega linearnega barvnega prehoda od levega zgornjega roba proti desnemu spodnjemu robu:

<div id="prehodDesnoDol"></div>

#prehodDesnoDol {
   width: auto;
   height: 100px;
   background: linear-gradient(to right bottom, orange, blue, red);
}

Primer linearnega barvnega prehoda, ki ga določimo s kotom:

<div id="prehod30">30 stopinj</div>
<div id="prehodMinus30">-30 stopinj</div>

#prehod30 {
   width: auto;
   height: 100px;
   background: linear-gradient(30deg, orange, blue);
}

#prehodMinus30 {
   width: auto;
   height: 100px;
   background: linear-gradient(-30deg, orange, blue);
}

30 stopinj

-30 stopinj

Pomni: Pri linearnem prehodu lahko smer določimo z besedami, na primer to right, ali pa s kotom, na primer 30deg.

Barvni mejniki

Pri prehodih lahko posamezni barvi določimo tudi položaj. Tako natančno določimo, kje se neka barva začne ali konča. Tem položajem rečemo barvni mejniki oziroma color stops.

<div id="prehodBarvniMejniki">Barvni mejniki</div>

#prehodBarvniMejniki {
   height: 100px;
   background: linear-gradient(
      to right,
      #fba517 0%, #fba517 30%,
      #4aa3ff 30%, #4aa3ff 70%,
      #ff5b5b 70%, #ff5b5b 100%
   );
}

Barvni mejniki

Prehodi s prosojnostjo

Pri barvnih prehodih lahko uporabimo tudi prosojne barve. To dosežemo z barvnim zapisom rgba(), kjer zadnja vrednost določa prosojnost.

<div id="prehodProsojnost">Prehod od prosojne do polne barve</div>

#prehodProsojnost {
   height: 100px;
   background: linear-gradient(
      to right,
      rgba(255,165,0,0),
      rgba(255,165,0,1)
   );
}

Prehod od prosojne do polne barve

Pozor: Prehodi s prosojnostjo so uporabni, vendar moramo paziti, kaj je v ozadju. Če je ozadje zelo raznoliko, je lahko končni učinek manj predvidljiv.

Radialni barvni prehod

Radialni prehod se širi iz središča navzven. Določimo lahko obliko, velikost, položaj središča in barve.

Osnovna sintaksa je:

background: radial-gradient(oblika velikost at položaj, barva1, barva2, ...)

Primer radialnega barvnega prehoda dveh barv:

<div id="prehodRadialni"></div>

#prehodRadialni {
   width: auto;
   height: 260px;
   background: radial-gradient(orange, blue);
}

Primer radialnega prehoda krožne oblike z več barvami:

<div id="prehodKrog"></div>

#prehodKrog {
   width: auto;
   height: 220px;
   background: radial-gradient(circle, #ffd27f, #f99301, #1f4fa3);
}

Ponavljajoči se prehodi

CSS omogoča tudi ponavljajoče se prehode. To je uporabno za ustvarjanje črtastih ozadij, vzorcev in dekorativnih pasov.

<div id="prehodPonavljajoci"></div>

#prehodPonavljajoci {
   height: 100px;
   background: repeating-linear-gradient(
      45deg,
      #fba517 0px,
      #fba517 20px,
      #ffffff 20px,
      #ffffff 40px
   );
}

Priporočila

Barvne prehode uporabi takrat, ko z njimi izboljšaš preglednost ali poudarek elementa.
Pri ozadjih z besedilom vedno preveri kontrast med ozadjem in črkami.
Za natančnejši nadzor uporabi barvne mejnike.
Pri dekorativnih vzorcih lahko uporabiš ponavljajoče se prehode.
Izogibaj se pretirano izrazitim prehodom, če otežijo branje ali zmotijo glavno vsebino.

Pogoste napake

Barvni prehod se uporabi brez premisleka o berljivosti besedila.
Smer prehoda ni ustrezno izbrana glede na namen elementa.
Predpostavlja se, da je vsak prehod gladek, čeprav lahko z barvnimi mejniki ustvarimo tudi ostre prehode.
Ponavljajoči se prehodi so uporabljeni preveč izrazito in delujejo moteče.

Nazaj

Naprej