Slog elementov spletnega mesta z gradientom ozadja CSS

Slog elementov spletnega mesta z gradientom ozadja CSS

Če ste na internetu več kot nekaj minut, obstaja velika verjetnost, da ste naleteli na preliv CSS. Lastnost ozadja CSS lahko uporabite za ustvarjanje vrste različnih slogov, ena najbolj zanimivih vrst pa je, kaj lahko naredi z vrednostjo gradienta.





Znanje oblikovanja in ustvarjanja različnih nagibov CSS je prednost vsakega oblikovalca ali razvijalca programske opreme. Iz tega članka se boste naučili vsega, kar morate vedeti, da začnete vključevati gradiente CSS v svoje projekte.



Kaj je gradient CSS?

Gradient CSS je v bistvu kombinacija dveh ali več barv, ki gladko prehajajo iz ene v drugo. Prehodno stanje gradienta CSS je odvisno od vrste uporabljenega gradienta. Pri oblikovanju programske opreme se običajno uporabljata dve glavni vrsti gradientov: linearni in radialni.





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

Sintaksa gradientov CSS

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

Gradient CSS je treba dodeliti lastnosti CSS slike ozadja. Vrsta gradienta je lahko ena od več; linearni, radialni ali stožčasti gradient. Vrsti gradienta sledijo odpiranje in zapiranje oklepajev, ki vsebujejo prehodno smer nagiba, ter barve, ki jih je treba vključiti v gradient.



Povezano: Kako nastaviti sliko ozadja 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 naklon je najbolj priljubljen nagib CSS. Ustvari vodoravni, navpični ali diagonalni prehodni gradient z uporabo dveh ali več barv.

Primer linearnega gradienta CSS

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

Zgornja koda bo ustvarila naslednji gradient CSS:



V zgornjem primeru je izpuščena ena glavna komponenta gradientne sintakse. 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 rezultat v tem primeru.

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

Z uporabo primera spodnjega linearnega gradienta

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

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

Podobno kot navpično poravnavo lahko vodoravno poravnavo nagiba dosežemo z uporabo dveh nizov ključnih besed za smer: levo in na desno , ki bo ustvarila naslednje rezultate.

kako odstraniti drm s kalibrom

Diagonalni linearni gradient

Diagonalni linearni gradientni prehod je mogoče doseči v kateri koli smeri linearnega gradienta. Če želite to narediti, morate poznati le štiri posebne sezname ključnih besed.

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

Z uporabo primera diagonalnega linearnega gradienta

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

Zgornji primer daje naslednji izhod:

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

Večbarvni linearni gradient

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

Primer večbarvnega linearnega gradienta

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

Zgornja vrstica kode bo ustvarila naslednji izhod:

Kot lahko vidite, je vsaka nova barva dodana desno od preliva, kar ustvari tisto, kar se sčasoma pretvori v mavrico. Enak izhod je mogoče doseči v navpični smeri; vendar pa bo posebna razporeditev barv na linearnem gradientu odvisna od ključne besede o navpični smeri (navzgor ali navzdol).

Kaj je radialni gradient?

Radialni gradient ustvarja spiralni gradient dveh barv, ki se privzeto začneta od središča. Kadar linearni gradient ustvarja raven naklon, ki teče navpično ali vodoravno, radialni gradient ustvari krožni nagib, ki teče od središča do zunanjih robov.

Z uporabo primera radialnega gradienta

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

Zgornja vrstica kode bo ustvarila naslednji izhod:

Zamenjava radialnega gradientnega centra

Privzeto se radialni gradient začne na sredini gradienta; vendar je možno spremeniti izvorno točko z uvedbo nekaj ključnih besed.

kako videti odstranjena sporočila v messengerju

Primer spreminjanja začetnega položaja radialnega nagiba

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

Zgornja vrstica kode bo ustvarila naslednji izhod:

Kot lahko vidite na izhodu nad gradientom, se gradient 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 uporabite tudi za spremembo izvorne točke radialnega nagiba:

  • Zgoraj levo
  • Spodaj desno
  • Spodaj levo

Večbarvni radialni gradienti

Tako kot linearni gradient lahko tudi radialni gradient uporablja dve barvi več, glavna razlika je v tem, da kjer linearni gradient doda gradientu v ravni črti, radialni gradient doda nove barve na zunanjem robu.

Primer večbarvnega radialnega gradienta


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

Zgornja vrstica kode bo ustvarila naslednji izhod:

Prilagajanje prelivov

Doslej ste videli, kako spremeniti smer in središčno točko naklona, ​​vendar niste videli, kako prilagodite naklon. Prilagajanje gradienta se morda sliši kot veliko dela, toda ko razumete osnove ustvarjanja gradienta ozadja CSS, je naslednji očiten korak, kako se naučiti, kako narediti prelive CSS bolj edinstvene.

kako preveriti, katero matično ploščo imaš

Barve v gradientu privzeto zasedajo enakomerno porazdeljeno količino prostora, pri čemer vsaka barva gladko prehaja v tisto za njo. Če torej dve barvi združimo, da tvorimo gradient, bo vsaka barva med prehodom iz ene v drugo zasedla polovico razpoložljivega prostora. Če združimo tri barve, bo vsaka barva zasedla tretjino razpoložljivega prostora.

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

Prilagajanje primera linearnega gradienta 1

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

Zgornja vrstica kode bo ustvarila naslednji izhod:

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

Če bi 30% v zgornjo kodo vnesli na konec prve barve, bi moralo biti stvari jasnejše.

Primer prilagajanja linearnega gradienta 2

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

Zgornja koda bo ustvarila naslednji izhod.

Zgornji izhod jasno prikazuje prvo barvo v gradientu, ki se ustavi na 30% točki druge barve v gradientu. Ta primer in zgornji primer bi vam olajšal razumevanje prilagajanja barvnega ustavljanja.

Prilagoditev radialnega nagiba poteka na enak način kot linearni naklon. Edino, kar morate storiti, da dosežete enake rezultate zgoraj v radialnem naklonu, je spremeniti vrsto in smer nagiba.

Ustvarjanje prelivov CSS nikoli ni bilo lažje

Ta članek vsebuje navodila za prepoznavanje in ustvarjanje linearnih in radialnih naklonov. Če ste prišli do te točke, ste se naučili spreminjati smer in središče nagiba. Poleg tega imate zdaj sposobnosti prilagajanja gradientov CSS in ustvarjanja edinstvenih gradientov ozadja.

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

Deliti Deliti Cvrkutati E-naslov 27 Elegantni primeri gradientov v ozadju CSS

Enobarvne barve so tako lani. Gradienti so v igri! Kako pa jih ustvarite v CSS?

Preberite Naprej Sorodne teme
  • Programiranje
  • Spletni razvoj
  • Oblikovanje spletnih strani
  • CSS
O avtorju Kadeisha Kean(21 objavljenih člankov)

Kadeisha Kean je razvijalka programske opreme in tehnična/tehnološka pisateljica. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelavo materiala, ki ga lahko vsak tehnološki začetnik zlahka razume. Strastno piše, razvija zanimivo programsko opremo in potuje po svetu (skozi dokumentarne filme).

Več od Kadeisha Kean

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite