Slogi spletnih mest s prelivom ozadja CSS

Če ste v internetu več kot nekaj minut, je verjetno, da ste naleteli na gradient CSS. Lastnost ozadja CSS lahko uporabite za ustvarjanje vrste različnih stilov, ena najbolj zanimivih vrst pa je, kaj lahko naredi z vrednostjo preliva.

Vedeti, kako oblikovati in ustvariti različne prelive CSS, je prednost vsakega oblikovalca ali razvijalca programske opreme. Iz tega članka boste izvedeli vse, kar morate vedeti, da začnete v svoje projekte vključevati prelive CSS.

Kaj je gradient CSS?

Gradient CSS je v bistvu kombinacija dveh ali več barv, ki gladko prehaja iz ene v drugo. Prehodno stanje gradienta CSS je odvisno od vrste uporabljenega gradienta. Pri načrtovanju programske opreme se pogosto uporabljata dve glavni vrsti prelivov: linearni in radialni.

Vendar pa obstaja tretja vrsta gradienta, ki je manj priljubljena in je znana kot stožčasti gradient.

Sintaksa prelivov CSS

Slika za ozadje: tip gradienta (smer, barva1, barva2);

Preliv CSS je treba dodeliti lastnosti CSS za ozadje. Tip gradienta je lahko eden izmed več; linearni gradient, radialni gradient ali konični gradient. Tipu gradienta sledijo odpiranje in zapiranje oklepajev, ki vsebujejo prehodno smer gradienta ter barve, ki jih je treba vključiti v gradient.

Sorodno: Kako nastaviti sliko za ozadje v CSS

Zgornji primer prikazuje dve barvi, vendar lahko gradient vsebuje več različnih barv. Edina zahteva je, da je vsaka barva na seznamu ločena z vejico.

Kaj je linearni gradient?

Linearni gradient je najbolj priljubljen gradient CSS. Ustvari vodoravni, navpični ali diagonalni prehodni gradient z uporabo dveh ali več barv.

Primer linearnega gradienta CSS

Slika ozadja: linearni gradient (# 00A4CCFF, # F95700FF);

Zgornja koda bo ustvarila naslednji gradient CSS:

V zgornjem primeru je izpuščena ena glavna komponenta sintakse prelivov. Ta komponenta je prehodna smer gradienta in je bila izpuščena, ker je privzeta poravnava linearnega gradienta navpična (od zgoraj navzdol); to je želeni izhod v tem primeru.

Zgornja koda daje enak rezultat kot naslednja vrstica kode. Edina razlika med obema je smerni odsek kode.

Uporaba primera spodnjega linearnega gradienta

Slika ozadja: linearni gradient (spodaj, # 00A4CCFF, # F95700FF);

Kot lahko vidite iz izhoda, zgornja koda ustvari gradient, ki se začne z modro na vrhu, nato pa počasi preide v oranžno na dnu. Če želite obrniti vrstni red barv, lahko preprosto zamenjate do dna s na vrh in to bo obrnilo smer naklona in ustvarilo naslednje rezultate:

Podobno kot pri navpični poravnavi je mogoče vodoravno poravnavo preliva doseči z uporabo dveh sklopov ključnih besed za smer: levo in desno, ki bo ustvaril naslednje rezultate.

Diagonalni linearni preliv

Možno je doseči diagonalni prehod linearnega gradienta v katero koli smer linearnega gradienta. Obstajajo le štirje specifični seznami ključnih besed, ki jih morate vedeti, da to omogočite.

• Spodaj desno
• Spodaj levo
• Zgoraj desno
• Zgoraj levo

Uporaba diagonalnega primera linearnega gradienta

Slika ozadja: linearni gradient (spodaj desno, # 00A4CCFF, # F95700FF);

Zgornji primer daje naslednje rezultate:

Kot lahko vidite iz zgornjega izhoda, linearni gradient prehaja v diagonalni smeri, ki se premika od zgornjega levega do spodnjega desnega dela gradienta.

Večbarvni linearni gradient

Linearni gradient ima lahko dve ali več barv, toda kako je videti več barv v gradientu? Raznobarvna linearna prelivna barvna razporeditev je odvisna od njene smeri. Tisti, ki prehajajo v vodoravni smeri, bodo imeli vsako novo barvo prikazano levo ali desno od linearnega gradienta, odvisno od natančne smeri linearnega gradienta.

Primer večbarvnega linearnega gradienta

Slika ozadja: linearni gradient (desno, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Zgornja vrstica kode bo dala naslednje rezultate:

Kot lahko vidite, je vsaka nova barva dodana na desni strani gradienta, kar ustvari tisto, kar se sčasoma spremeni v mavrico. Isti izhod je mogoče doseči v navpični smeri; vendar bo posebna razporeditev barv na linearnem gradientu odvisna od ključne besede navpične smeri (zgoraj ali spodaj).

Kaj je radialni gradient?

Radialni gradient ustvari spiralni gradient dveh več barv, ki se privzeto začnejo od sredine. Kjer linearni gradient ustvari raven gradient, ki teče navpično ali vodoravno, radialni gradient ustvari krožni gradient, ki teče od središča do zunanjih robov.

Uporaba primera radialnega gradienta

Slika ozadja: radialni gradient (krog, # 00A4CCFF, # F95700FF);

Zgornja vrstica kode bo dala naslednje rezultate:

Spreminjanje radialnega gradientnega središča

Privzeto se radialni gradient začne v sredini gradienta; vendar je možno izhodišče spremeniti z uvedbo nekaj ključnih besed.

Spreminjanje primera začetnega položaja radialnega gradienta

Slika ozadja: radialni preliv (krog zgoraj desno, # 00A4CCFF, # F95700FF);

Zgornja vrstica kode bo dala naslednje rezultate:

Kot lahko vidite iz izhoda nad gradientom, se zdaj začne v zgornjem desnem kotu namesto v sredini. Ta sprememba je možna zaradi vključitve ključne besede zgoraj desno v zgornji kodi. Naslednji seznam ključnih besed lahko uporabimo tudi za spremembo točke začetka radialnega gradienta:

• Zgoraj levo
• Spodaj desno
• Spodaj levo

Večbarvni radialni gradienti

Tako kot linearni gradient lahko tudi radialni gradient uporablja dve več barv, glavna razlika je v tem kjer linearni gradient gradient gradi v ravni črti, radialni gradient doda nove barve na zunanji strani rob.

Primer večbarvnega radialnega gradienta

Slika ozadja: radialni gradient (krog, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Zgornja vrstica kode bo dala naslednje rezultate:

Prilagajanje prelivov

Do zdaj ste videli, kako spremeniti smer in sredinsko točko naklona, ​​niste pa videli, kako prilagoditi preliv. Prilagajanje gradienta se morda zdi veliko dela, a ko enkrat razumete osnove ustvarjanja gradient ozadja CSS naslednji očiten korak je učenje, kako povečati gradiente CSS edinstven.

Privzeto barve v prelivu zasedajo enakomerno porazdeljeno količino prostora, pri čemer vsaka barva gladko preide v tisto po njej. Torej, če sta dve barvi združeni, da tvorita preliv, bo vsaka barva med prehodom iz ene v drugo zasedla polovico razpoložljivega prostora. Če so kombinirane tri barve, bo vsaka barva zasedla tretjino prostora, ki je na voljo.

S prilagojenim gradientom lahko določite količino prostora, ki ga bo barva zasedla v gradientu, tako da izrecno dodelite položaj zaustavitve barve.

Primer prilagajanja linearnega preliva 1

Slika ozadja: linearni gradient (desno, # 00A4CCFF, # F95700FF 30%);

Zgornja vrstica kode bo dala naslednje rezultate:

Zgornji izhod prikazuje drugo barvo v linearnem gradientu, ki se ustavi na 30% točki prve barve v gradientu, namesto običajnega položaja in ker je druga barva tudi končna barva v prelivu, se naravno razširi na konec.

Če bi 30% postavili v zgornjo kodo na koncu prve barve, bi morale biti stvari jasnejše.

Primer prilagajanja linearnega gradienta 2

Slika ozadja: linearni gradient (desno, # 00A4CCFF 30%, # F95700FF);

Zgornja koda bo dala naslednji izhod.

Zgornji izhod jasno prikazuje prvo barvo v gradientu, ki se ustavi na 30% točki druge barve v gradientu. Ta primer skupaj z zgornjim naj bi vam olajšal razumevanje prilagajanja barvnih zaustavitev.

Prilagajanje radialnega gradienta se izvede na enak način kot linearni gradient. Edina stvar, ki jo morate storiti, da v radialnem gradientu dosežete enake rezultate zgoraj, je spremeniti vrsto in smer gradienta.

Ustvari gradient CSS še nikoli ni bilo lažje

V tem članku so predstavljena orodja za prepoznavanje in ustvarjanje linearnih in radialnih gradientov. Če ste prišli do te točke, ste se naučili, kako spremeniti smer in središče naklona. Poleg tega imate zdaj sposobnosti za prilagajanje prelivov CSS in ustvarjanje edinstvenih prelivov ozadja.

Če pa ne želite iti naravnost v ustvarjanje novih in edinstvenih prelivov, lahko začnete z ustvarjanjem nekaj čudovitih že obstoječih.

27 zglednih primerov gradienta za ozadje CSS

Enobarvne so tako lani. Prelivi so v! Kako pa jih ustvarite v CSS?

Preberite Naprej

O avtorju

Razširi na Branje celotne zgodbe