Generator gradientov CSS

Linearni gradienti prehajajo barve vzdolž ravne črte (vodoravne, navpične ali diagonalne) in ustvarjajo smerni tok iz ene barve v drugo. Radialni gradienti se širijo iz središčne točke navzven v krožnem ali eliptičnem vzorcu. Linearne gradiente uporabite za poudarjanje smeri in sodobne vmesnike, radialne gradiente pa za učinke žarometov, gumbe ali organske vizualne zanimivosti.

Kot gradienta lahko nastavite v stopinjah (od 0 do 360 stopinj) ali uporabite ključne besede, kot so "na desno", "na dno", "na desno zgoraj" itd. 0 stopinj kaže navzgor, 90 stopinj kaže desno, 180 stopinj kaže navzdol in 270 stopinj kaže levo. Kot določa os, vzdolž katere barve prehajajo, kar vam omogoča popoln nadzor nad smerjo gradienta.

Da! Gradienti CSS podpirajo neomejeno število barvnih stopenj. Dodate lahko več barv in ustvarite zapletene večbarvne gradiente. Vsaka barva ima lahko izbirni odstotek položaja (od 0 % do 100 %), s katerim določite, kje v gradientu se prikaže. To je odlično za ustvarjanje mavričnih učinkov, gradientov sončnega zahoda ali zapletenih barvnih prehodov.

Uporabite dve barvi, ki sta si blizu po odtenku, nasičenosti ali svetlosti. Na primer, iz srednje modre preidite v nekoliko svetlejšo ali temnejšo modro. Kontrast naj bo nizek in razmislite o uporabi vrednosti HSL, pri katerih svetlost prilagodite le za 10-20 %. Subtilni prehodi dodajo globino in vizualno zanimivost, ne da bi preobremenili vsebino.

Sodobni gradienti CSS (z linearnim gradientom in radialnim gradientom) so podprti v vseh trenutnih brskalnikih brez predpon proizvajalca. Če pa morate podpirati zelo stare brskalnike (IE9 in starejše), boste morda potrebovali predpone prodajalca (-webkit-, -moz-, -o-) ali nadomestne polne barve. Pri sodobnem razvoju spletnih strani je standardna gradientna sintaksa CSS uporabna povsod.

Barvne postaje postavite enakomerno in se izogibajte drastičnim barvnim preskokom. Med ekstremnimi barvami uporabite vmesne barvne stopice, da ustvarite bolj gladke prehode. Pri radialnih gradientih eksperimentirajte z obliko (krog ali elipsa) in položajem. Razmislite o uporabi barv s podobnimi vrednostmi nasičenosti in svetlosti ali o delu v prostoru HSL, kjer lahko ustvarite gladke prehode odtenkov.

Radialni gradienti so lahko krožni (enaki v vseh smereh) ali eliptični (raztegnjeni, da se prilegajo vsebniku). Krogi se dobro obnesejo pri učinkih žarometov in centriranih vzorcih, elipse pa so primernejše za ozadja, ki morajo enakomerno pokrivati pravokotna območja. S parametrom oblike lahko nadzorujete to obnašanje.

Da! Za diagonalne naklone uporabite kote med 0 in 360 stopinjami. 45 stopinj ustvari popolno diagonalo od spodnjega levega do zgornjega desnega roba, 135 stopinj pa od spodnjega desnega do zgornjega levega roba. Diagonalni gradienti dodajo dinamično vizualno zanimivost in lahko vodijo pogled skozi oblikovanje.

Uporabite barvne formate RGBA ali HSLA s kanalom alfa za ustvarjanje gradientov, ki se spremenijo v prozorne. To je odlično za učinke prekrivanja, slikovne maske ali ustvarjanje globine. Na primer, gradient od rgba(0,0,0,0,1) do rgba(0,0,0,0,0) ustvari prehod v prozorno črno.

Z barvnimi stopnjami določite, kje v gradientu se pojavi posamezna barva (od 0 % do 100 %). Z enakomernim razmikom ustvarite gladke prehode, medtem ko z združevanjem stopenj ustvarite ostre barvne spremembe. Če na primer dve barvi postavite na 50 %, ustvarite ostro črto, medtem ko razmik med njima na 40 % in 60 % ustvari gladko prelivanje.