Stilizirajte elemente web stranice s CSS gradijentom pozadine

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 pozadine CSS -a može se koristiti za stvaranje niza različitih stilova, a jedan od najintrigantnijih tipova je ono što može učiniti s vrijednošću gradijenta.





Znati dizajnirati i stvoriti različite CSS gradijente prednost je svakog dizajnera ili programera softvera. Iz ovog članka naučit ćete sve što trebate znati da biste počeli uključivati ​​CSS gradijente u svoje projekte.



Što je CSS gradijent?

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





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

Sintaksa CSS gradijenta

Background-image: gradient-type (direction, color1, color2);

Gradijent CSS-a trebao bi se dodijeliti CSS svojstvu pozadinske slike. Vrsta gradijenta može biti jedna od nekoliko; linearni gradijent, radijalni gradijent ili konusni gradijent. Nakon vrste gradijenta slijede otvaranje i zatvaranje zagrada koje sadrže prijelazni smjer gradijenta, kao i boje koje treba uključiti u gradijent.



Povezano: Kako postaviti pozadinsku sliku u CSS -u

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 je najpopularniji CSS gradijent. Stvara vodoravni, okomiti ili dijagonalni prijelazni gradijent pomoću dvije ili više boja.

Primjer linearnog gradijenta CSS -a

Background-image: linear-gradient(#00A4CCFF, #F95700FF);

Gornji kôd će proizvesti sljedeći CSS gradijent:



Jedna je glavna komponenta sintakse gradijenta izostavljena iz gornjeg primjera. Ova je komponenta prijelazni smjer gradijenta, a izostavljena je jer je zadano poravnanje linearnog gradijenta okomito (odozgo prema dolje); to je željeni izlaz u ovom primjeru.

Gornji kôd daje isti rezultat kao i sljedeći redak koda. Jedina razlika između ova dva je smjer smjera koda.

Koristeći primjer donjeg linearnog gradijenta

Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

Kao što možete vidjeti iz izlaza, gornji kod stvara gradijent koji počinje plavom bojom na vrhu, a zatim polako prelazi u narančastu na dnu. Ako želite promijeniti redoslijed boja, jednostavno ih možete zamijeniti do dna s na vrh i to će promijeniti smjer nagiba, dajući sljedeći izlaz:

Slično okomitom 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.

web stranice koje vam besplatno čitaju knjige naglas

Dijagonalni linearni gradijent

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

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

Koristeći primjer dijagonalnog linearnog gradijenta

Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

Gornji primjer proizvodi sljedeće rezultate:

Kao što možete vidjeti iz gornjeg izlaza, linearni gradijent prelazi 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 više boja izgleda u gradijentu? Višebojni linearni raspon boja s gradijentom ovisi o njegovu 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 višebojnog linearnog gradijenta

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Gornji red koda će proizvesti sljedeće rezultate:

Kao što vidite, svaka nova boja dodaje se desno od gradijenta, stvarajući ono što se na kraju pretvori u dugu. Isti izlaz može se postići u okomitom smjeru; međutim, određeni 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 dvije boje koje prema zadanim postavkama počinju od središta. Tamo gdje linearni gradijent proizvodi ravni gradijent koji teče okomito ili vodoravno, radijalni gradijent proizvodi kružni gradijent koji teče od središta prema vanjskim rubovima.

Koristeći primjer radijalnog gradijenta

Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

Gornji red koda će proizvesti sljedeće rezultate:

Promjena radijalnog centra nagiba

Zadano radijalni gradijent počinje u središtu gradijenta; međutim, moguće je promijeniti polazište uvođenjem nekoliko ključnih riječi.

kako oporaviti izbrisane facebook poruke koje nisu arhivirane

Primjer promjene početnog položaja radijalnog nagiba

Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

Gornji red koda će proizvesti sljedeće rezultate:

Kao što možete vidjeti iz izlaza iznad, gradijent sada počinje od gornjeg desnog kuta umjesto od središta. Ta 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 ishodišta radijalnog gradijenta:

  • Gore lijevo
  • Dolje desno
  • Dolje lijevo

Višebojni radijalni gradijenti

Kao i linearni gradijent, radijalni gradijent također može koristiti dvije više boja, glavna razlika je u tome što tamo gdje linearni gradijent dodaje gradijent u ravnoj liniji, radijalni gradijent dodaje nove boje na vanjskom rubu.

Primjer višebojnog radijalnog gradijenta


Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Gornji red koda će proizvesti sljedeće rezultate:

Prilagođavanje gradijenata

Do sada ste vidjeli kako promijeniti smjer i središnju točku nagiba, ali niste vidjeli kako prilagoditi nagib. Prilagođavanje gradijenta moglo bi zvučati kao puno posla, ali kada shvatite osnove stvaranja CSS gradijenta pozadine, sljedeći je očit korak naučiti kako učiniti CSS gradijente jedinstvenijim.

aplikacije kojima nije potreban internet

Prema zadanim postavkama, boje u gradijentu zauzimaju ravnomjerno raspoređenu količinu prostora pri čemu svaka boja glatko prelazi u onu iza nje. Dakle, ako se dvije boje kombiniraju kako bi oblikovale gradijent, svaka će boja zauzeti polovicu raspoloživog prostora dok prelazi s jedne na drugu. Ako se kombiniraju tri boje, svaka će boja zauzeti trećinu dostupnog prostora.

S prilagođenim gradijentom možete definirati količinu prostora koju će boja zauzeti u gradijentu izričitim dodjeljivanjem položaj zaustavljanja boje .

Prilagođavanje primjera linearnog gradijenta 1

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

Gornji red koda će proizvesti sljedeće rezultate:

Gornji izlaz prikazuje drugu boju u linearnom gradijentu koja se zaustavlja u točki od 30% prve boje u gradijentu, umjesto uobičajenog položaja, a budući da je druga boja također konačna boja u gradijentu, ona se prirodno proteže do kraja .

Ako postavite 30% u gornji kôd na kraj prve boje, stvari bi trebale postati jasnije.

Prilagođavanje primjera linearnog gradijenta 2

Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

Gornji kôd će proizvesti sljedeći izlaz.

Gornji izlaz jasno prikazuje prvu boju u gradijentu koja se zaustavlja u točki od 30% druge boje u gradijentu. Ovaj primjer, zajedno s gornjim, trebao bi vam olakšati razumijevanje prilagođavanja zaustavljanja boja.

Prilagođavanje radijalnog nagiba vrši se na isti način kao i linearni nagib. Jedino što trebate učiniti da biste postigli iste gore navedene rezultate u radijalnom gradijentu je promjena vrste i smjera gradijenta.

Stvaranje CSS gradijenta nikad nije bilo lakše

Ovaj članak s vodičem pruža vam alate za prepoznavanje i stvaranje linearnih i radijalnih nagiba. Ako ste došli do ove točke, naučili ste promijeniti smjer i središte nagiba. Osim toga, sada imate vještine prilagođavanja CSS gradijenata i stvaranja jedinstvenih gradijenta pozadine.

Međutim, ako ne želite ići izravno u stvaranje novih i jedinstvenih nagiba, možete početi stvaranjem nekoliko već postojećih sjajnih izgleda.

Udio Udio Cvrkut E -pošta 27 Primjeri stilskih gradijenta pozadine CSS -a

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

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web razvoj
  • Web dizajn
  • CSS
O autoru Kadeisha Kean(Objavljen 21 članak)

Kadeisha Kean je programer softvera i pisac tehničke/tehnologije. Ona ima izrazitu sposobnost pojednostavljivanja nekih od najsloženijih tehnoloških koncepata; proizvodnju materijala koji će lako razumjeti svaki tehnološki novak. Oduševljena je pisanjem, razvojem zanimljivog softvera i putovanjem po svijetu (kroz dokumentarne filmove).

Više od Kadeishe Kean

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu