Stilizirajte elemente web stranice s CSS gradijentom pozadine

Ako ste na internetu duže od nekoliko minuta, velika je vjerojatnost da ste naišli na CSS gradijent. Svojstvo CSS pozadine može se koristiti za stvaranje niza različitih stilova, a jedna od najzanimljivijih vrsta je ono što može učiniti s vrijednošću gradijenta.

Znanje kako dizajnirati i stvoriti različite CSS gradijente prednost je svakog dizajnera ili programera softvera. Iz ovog ćete članka naučiti sve što trebate znati da biste u svoje projekte počeli ugrađivati ​​gradijente CSS-a.

Što je CSS gradijent?

CSS gradijent je u osnovi kombinacija dviju ili više boja koje glatko prelaze iz jedne u drugu. Prijelazno stanje CSS gradijenta ovisi o vrsti gradijenta koji se koristi. Dvije su glavne vrste gradijenata koje se obično koriste u dizajnu softvera: linearni i radijalni.

Međutim, postoji i treća vrsta gradijenta koja je manje popularna i poznata kao stožasti gradijent.

Sintaksa CSS gradijenata

Slika pozadine: tip gradijenta (smjer, boja1, boja2);

CSS gradijent treba dodijeliti CSS svojstvu pozadinske slike. Tip gradijenta može biti jedan od nekoliko; linearni gradijent, radijalni gradijent ili konični gradijent. Tip gradijenta slijede zagrade za otvaranje i zatvaranje koje sadrže prijelazni smjer gradijenta, kao i boje koje će biti uključene u gradijent.

Povezano: Kako postaviti pozadinsku sliku u CSS

Gornji primjer prikazuje dvije boje, ali gradijent može sadržavati nekoliko različitih boja. Jedini uvjet je da je svaka boja na popisu odvojena zarezom.

Što je linearni gradijent?

Linearni gradijent najpopularniji je gradijent CSS-a. Stvara vodoravni, okomiti ili dijagonalni prijelazni gradijent pomoću dvije ili više boja.

Primjer CSS linearnog gradijenta

Pozadinska slika: linearni gradijent (# 00A4CCFF, # F95700FF);

Gornji kod će proizvesti sljedeći CSS gradijent:

Iz gornjeg primjera izostavljena je jedna glavna komponenta sintakse gradijenta. Ova je komponenta prijelazni smjer gradijenta, a izostavljena je jer je zadano poravnanje linearnog gradijenta okomito (od vrha do dna); to je željeni izlaz u ovom primjeru.

Gornji kod daje isti rezultat kao i sljedeći redak koda. Jedina razlika između njih je odjeljak smjera koda.

Korištenje primjera donjeg linearnog gradijenta

Pozadinska slika: linearni gradijent (do dna, # 00A4CCFF, # F95700FF);

Kao što možete vidjeti iz rezultata, gornji kod stvara gradijent koji započinje plavom bojom na vrhu, a zatim polako prelazi u narančastu boju pri dnu. Ako ste željeli preokrenuti redoslijed boja, jednostavno možete zamijeniti do dna s na vrh i to će okrenuti smjer gradijenta, dajući sljedeći izlaz:

Slično vertikalnom poravnanju, vodoravno poravnanje gradijenta može se postići korištenjem dva skupa ključnih riječi za smjer: lijevo i Na desno, koji će proizvesti sljedeće rezultate.

Dijagonalni linearni gradijent

Moguće je postići dijagonalni linearni gradijentni prijelaz u bilo kojem smjeru linearnog gradijenta. Postoje samo četiri specifična popisa ključnih riječi koje trebate znati da biste to omogućili.

• Dolje desno
• Dolje lijevo
• Gore gore
• Gore lijevo

Korištenje primjera dijagonalnog linearnog gradijenta

Pozadinska slika: linearni gradijent (dolje desno, # 00A4CCFF, # F95700FF);

Gornji primjer daje sljedeći izlaz:

Kao što možete vidjeti iz gornjeg izlaza, linearni gradijent vrši svoj prijelaz u dijagonalnom smjeru krećući se od gornjeg lijevog do donjeg desnog dijela gradijenta.

Višebojni linearni gradijent

Linearni gradijent može imati dvije ili više boja, ali kako izgleda više boja u gradijentu? Višebojni linearni gradijent rasporeda boja ovisi o njegovom smjeru. Oni koji prelaze u vodoravnom smjeru imat će svaku novu boju koja se pojavljuje lijevo ili desno od linearnog gradijenta, ovisno o točnom smjeru linearnog gradijenta.

Primjer raznobojnog linearnog gradijenta

Pozadinska slika: linearni gradijent (zdesna, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Gornji redak koda rezultirat će sljedećim rezultatima:

Kao što vidite, svaka nova boja dodaje se s desne strane gradijenta, stvarajući ono što se na kraju pretvara u dugu. Isti se izlaz može postići u vertikalnom smjeru; međutim, specifični raspored boja na linearnom gradijentu ovisit će o ključnoj riječi okomitog smjera (gore ili dolje).

Što je radijalni gradijent?

Radijalni gradijent stvara spiralni gradijent dviju boja koje prema zadanim postavkama počinju od središta. Tamo gdje linearni gradijent stvara ravni gradijent koji teče okomito ili vodoravno, radijalni gradijent stvara kružni gradijent koji teče od središta do vanjskih rubova.

Korištenje primjera radijalnog gradijenta

Pozadinska slika: radijalni gradijent (krug, # 00A4CCFF, # F95700FF);

Gornji redak koda rezultirat će sljedećim rezultatima:

Promjena centra radijalnog gradijenta

Prema zadanim postavkama radijalni gradijent započinje u središtu gradijenta; međutim, moguće je promijeniti ishodište uvođenjem nekoliko ključnih riječi.

Promjena primjera početne pozicije radijalnog gradijenta

Slika pozadine: radijalni gradijent (krug gore desno, # 00A4CCFF, # F95700FF);

Gornji redak koda rezultirat će sljedećim rezultatima:

Kao što možete vidjeti iz rezultata iznad gradijenta sada počinje od gornjeg desnog kuta umjesto od središta. Ova je promjena moguća zbog uključivanja ključne riječi Gore desno u gornjem kodu. Sljedeći popis ključnih riječi također se može koristiti za promjenu točke ishodišta radijalnog gradijenta:

• Gore lijevo
• Dolje desno
• Dolje lijevo

Višebojni radijalni gradijenti

Kao i linearni gradijent, i radijalni gradijent može koristiti dvije, više je boja, glavna razlika je u tome gdje se linearni gradijent dodaje gradijentu u ravnoj liniji, radijalni gradijent dodaje nove boje na vanjsku rub.

Primjer raznobojnog radijalnog gradijenta

Pozadinska slika: radijalni gradijent (krug, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Gornji redak koda rezultirat će sljedećim rezultatima:

Prilagođavanje gradijenata

Do sada ste vidjeli kako promijeniti smjer i središnju točku gradijenta, ali niste vidjeli kako prilagoditi gradijent. Prilagođavanje gradijenta možda zvuči kao puno posla, ali nakon što shvatite osnove stvaranja CSS gradijent pozadine sljedeći očiti korak je učenje kako povećati svoj CSS gradijenti jedinstven.

Prema zadanim postavkama, boje u gradijentu zauzimaju ravnomjerno raspoređenu količinu prostora, a svaka boja glatko prelazi u onu nakon nje. Dakle, ako se dvije boje kombiniraju kako bi stvorile gradijent, svaka će boja zauzimati polovicu raspoloživog prostora tijekom prijelaza iz jedne u drugu. Ako se kombiniraju tri boje, svaka boja zauzet će trećinu dostupnog prostora.

Pomoću prilagođenog gradijenta možete definirati količinu prostora koju će boja zauzimati u gradijentu tako što ćete izričito dodijeliti zaustavljanje boje.

Primjer prilagodbe linearnog gradijenta 1

Pozadinska slika: linearni gradijent (zdesna, # 00A4CCFF, # F95700FF 30%);

Gornji redak koda rezultirat će sljedećim rezultatima:

Gornji izlaz prikazuje drugu boju u linearnom gradijentu koja se zaustavlja na točki od 30% prve boje u gradijentu, umjesto svog uobičajenog položaja, a budući da je druga boja ujedno i završna boja u gradijentu, ona se prirodno proteže na kraj.

Ako biste 30% u gornji kod stavili na kraj prve boje, stvari bi trebale postati jasnije.

Prilagođavanje linearnog gradijenta Primjer 2

Pozadinska slika: linearni gradijent (zdesna, # 00A4CCFF 30%, # F95700FF);

Gornji kod će proizvesti sljedeći izlaz.

Gornji izlaz jasno prikazuje prvu boju u gradijentu koja se zaustavila na točki od 30% druge boje u gradijentu. Ovaj primjer zajedno s onim gore navedenim trebao bi vam olakšati razumijevanje prilagodbe zaustavljanja boja.

Prilagođavanje radijalnog gradijenta vrši se na isti način kao i linearni gradijent. Jedina stvar koju trebate učiniti da biste postigli iste rezultate gore u radijalnom gradijentu je promjena tipa i smjera gradijenta.

Stvaranje CSS gradijenata nikada nije bilo jednostavnije

Ovaj članak vodiča nudi vam alate za prepoznavanje i stvaranje linearnih i radijalnih gradijenata. Ako ste stigli do ove točke, naučili ste kako promijeniti smjer i središte gradijenta. Uz to, sada imate vještine prilagođavanja CSS gradijenata i stvaranja jedinstvenih gradijenata pozadine.

Međutim, ako ne želite ići izravno u stvaranje novih i jedinstvenih gradijenata, možete započeti stvaranjem nekih već postojećih izvrsnih izgleda.

27 modernih primjera gradijentnog CSS-a

Jednobojne su boje prošle godine. Gradijenti su in! Ali kako ih stvoriti u CSS-u?

Pročitajte Dalje

O autoru

Proširite da biste pročitali cijelu priču