Stiiliga CSS-i taustgradientiga veebisaidi elemendid

Kui olete Internetis olnud rohkem kui paar minutit, on tõenäoline, et olete kohanud CSS-i gradienti. CSS-i taustaomadust saab kasutada mitmesuguste stiilide loomiseks ja üks kõige huvitavamaid tüüpe on see, mida see saab teha gradientväärtusega.

Erinevate CSS-i gradientide kujundamise ja loomise oskus on iga tarkvara kujundaja või arendaja jaoks vara. Sellest artiklist saate teada kõike, mida peate teadma CSS-i gradientide kaasamiseks oma projektidesse.

Mis on CSS-i gradient?

CSS-i gradient on sisuliselt kahe või enama värvi kombinatsioon, mis sujuvalt ühelt teisele üle läheb. CSS-i gradiendi siirdeseisund sõltub kasutatava gradiendi tüübist. Tarkvarakujunduses kasutatakse tavaliselt kahte tüüpi gradiente: lineaarne ja radiaalne.

Siiski on olemas kolmas tüüpi gradient, mis on vähem populaarne ja tuntud kui kooniline gradient.

CSS-i gradientide süntaks

Taustpilt: gradiendi tüüp (suund, värv1, värv2);

CSS-i gradient tuleks omistada CSS-i taustpildi atribuudile. Gradiendi tüüp võib olla üks mitmest; lineaargradient, radiaalgradient või koonusgradient. Gradiendi tüübile järgnevad sulgude avamine ja sulgemine, mis sisaldab gradiendi üleminekusuunda, samuti gradienti lisatavaid värve.

Seotud: Kuidas CSS-is taustpilti seada

Ülaltoodud näide näitab kahte värvi, kuid gradient võib sisaldada mitut erinevat värvi. Ainus nõue on, et loendis olevad kõik värvid eraldataks komaga.

Mis on lineaarne gradient?

Lineaarne gradient on populaarseim CSS gradient. See loob horisontaalse, vertikaalse või diagonaalse ülemineku gradiendi, kasutades kahte või enamat värvi.

CSS lineaarse gradienti näide

Taustpilt: lineaarne gradient (# 00A4CCFF, # F95700FF);

Ülaltoodud kood annab järgmise CSS-i gradiendi:

Ülaltoodud näites on gradientsüntaksist üks põhikomponent välja jäetud. See komponent on gradiendi üleminekusuund ja see jäeti välja, kuna lineaarse gradiendi vaikesuund on vertikaalne (ülalt alla); see on selles näites soovitud väljund.

Ülaltoodud kood annab sama tulemuse kui järgmine koodirida. Ainus erinevus nende kahe vahel on koodi suunalõik.

Alumise sirggradienti näite kasutamine

Taustpilt: lineaarne gradient (alla, # 00A4CCFF, # F95700FF);

Nagu väljundist näete, loob ülaltoodud kood gradiendi, mis algab ülevalt sinisega ja seejärel üleminek aeglaselt oranžile allosas. Kui soovite muuta värvide järjekorda, võite selle lihtsalt asendada põhja koos ülespoole ja see muudab gradiendi suuna vastupidiseks, andes järgmise väljundi:

Sarnaselt vertikaalsele joondusele saab gradiendi horisontaalse joonduse saavutada kahe suuna märksõnade komplekti abil: vasakule ja paremale, mis annab vastavalt järgmised väljundid.

Diagonaaljooneline gradient

On võimalik saavutada diagonaalse lineaarse gradiendi üleminek lineaarse gradiendi suvalises suunas. Selle võimaldamiseks on vaja ainult nelja konkreetset märksõnaloendit.

• Parempoolsesse alaossa
• All vasakul
• Paremal üleval
• Üles vasakule

Diagonaalse sirggradienti näite kasutamine

Taustpilt: lineaarne gradient (paremal all, # 00A4CCFF, # F95700FF);

Ülaltoodud näide annab järgmise väljundi:

Nagu ülaltoodud väljundist näha, teeb lineaarne gradient diagonaalsuunas ülemineku gradiendi ülevalt vasakult paremale alumisse ossa.

Mitmevärviline lineaarne gradient

Lineaarsel gradiendil võib olla kaks või enam värvi, kuid kuidas näevad gradiendis välja rohkem värve? Mitmevärviline lineaarne gradientvärvide paigutus sõltub selle suunast. Horisontaalsuunas üleminekul ilmub iga uus värv lineaarse gradiendi vasakule või paremale, sõltuvalt lineaarse gradiendi täpsest suunast.

Mitmevärviline lineaarne gradient

Taustpilt: lineaarne gradient (paremale, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Ülal olev koodirida annab järgmise väljundi:

Nagu näete, lisatakse iga uus värv gradientist paremale, luues selle, mis lõpuks vikerkaareks muutub. Sama väljundi saab saavutada vertikaalsuunas; konkreetne värvide paigutus lineaarsel gradiendil sõltub aga vertikaalse suuna märksõnast (üles või alla).

Mis on radiaalne gradient?

Radiaalne gradient loob spiraalse gradiendi, kus kaks värvi on rohkem värve, mis algavad vaikimisi keskelt. Kui lineaarne gradient annab sirge gradiendi, mis voolab vertikaalselt või horisontaalselt, siis radiaalne gradient annab ringgradiendi, mis voolab keskelt välisservadeni.

Radiaalse gradientnäite abil

Taustpilt: radiaalgradient (ring, # 00A4CCFF, # F95700FF);

Ülal olev koodirida annab järgmise väljundi:

Radiaalse gradientkeskuse muutmine

Vaikimisi algab radiaalgradient gradiendi keskelt; lähtekohta on aga võimalik muuta mõne märksõna kasutuselevõtuga.

Radiaalse gradienti lähteasendi muutmine

Taustpilt: radiaalgradient (ring paremal ülal, # 00A4CCFF, # F95700FF);

Ülal olev koodirida annab järgmise väljundi:

Nagu näete väljundist, algab gradient nüüd keskosa asemel paremast ülanurgast. See muudatus on võimalik märksõna lisamise tõttu üleval paremal ülaltoodud koodis. Radiaalgradiendi alguspunkti muutmiseks saab kasutada ka järgmist märksõnaloendit:

• Üleval vasakul
• Paremalt alumine
• All vasakul

Mitmevärvilised radiaalsed gradientid

Sarnaselt lineaarse gradiendiga saab ka radiaalgradient kasutada kahte rohkemat värvi, peamine erinevus on see kus lineaarne gradient lisab gradiendile sirgjooneliselt, lisab radiaalne gradient välimisele uued värvid serv.

Mitmevärviline radiaalgradiendi näide

Taustpilt: radiaalgradient (ring, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Ülal olev koodirida annab järgmise väljundi:

Gradientide kohandamine

Siiani olete näinud, kuidas muuta gradienti suunda ja keskpunkti, kuid te pole näinud, kuidas gradienti kohandada. Gradiendi kohandamine võib tunduda palju tööd, kuid kui saate aru loomise põhitõdedest CSS-i taustgradient järgmine selge samm on õppida, kuidas oma CSS-i gradiente rohkem muuta ainulaadne.

Vaikimisi hõivavad gradiendi värvid ühtlaselt jaotatud ruumi, kusjuures iga värv läheb sujuvalt üle selle järgmisele. Nii et kui gradiendi moodustamiseks on ühendatud kaks värvi, hõivavad mõlemad värvid pool olemasolevast ruumist, liikudes ühelt teisele. Kui kombineeritakse kolm värvi, hõivab iga värv ühe kolmandiku olemasolevast ruumist.

Kohandatud gradiendiga saate määratleda, kui palju ruumi värv gradientides hõivab, määrates selgesõnaliselt värvi peatamise asend.

Lineaarse gradienti näite kohandamine 1

Taustpilt: lineaarne gradient (paremale, # 00A4CCFF, # F95700FF 30%);

Ülal olev koodirida annab järgmise väljundi:

Ülaltoodud väljund näitab lineaarse gradiendi teist värvi, peatudes gradiendi esimese värvi 30% punktis, tavapärase asendi asemel ja kuna teine ​​värv on ka gradiendi viimane värv, laieneb see loomulikult ka värvile lõpp.

Kui paneksite 30% ülaltoodud koodi esimese värvi lõppu, peaksid asjad selgemaks saama.

Lineaarse gradienti näite 2 kohandamine

Taustpilt: lineaarne gradient (paremale, # 00A4CCFF 30%, # F95700FF);

Ülaltoodud kood loob järgmise väljundi.

Ülaltoodud väljund näitab selgelt gradienti esimest värvi, peatudes gradiendi teise värvi 30% punktis. See näide koos ülaltooduga peaks aitama muuta värvi peatamise kohandamise teile arusaadavamaks.

Radiaalgradiendi kohandamine toimub samamoodi nagu lineaargradient. Ainus asi, mida peate tegema, et saavutada radiaalses gradiendis ülaltoodud samad tulemused, on muuta gradiendi tüüpi ja suunda.

CSS-i gradientide loomine pole kunagi varem olnud lihtsam

Selles õpetusartiklis on tööriistad lineaarsete ja radiaalsete gradientide tuvastamiseks ja loomiseks. Kui olete selleni jõudnud, õppisite gradiendi suunda ja keskpunkti muutma. Lisaks on teil nüüd oskused CSS-i gradientide kohandamiseks ja ainulaadsete taustgradientide loomiseks.

Kuid kui te ei soovi otse uute ja ainulaadsete gradientide loomist jätkata, võite kõigepealt luua mõne suurepärase välimusega olemasoleva.

27 stiilse CSS-i gradientnäiteid

Ühevärvilised on nii eelmisel aastal. Gradiendid on sees! Aga kuidas neid CSS-is luua?

Loe edasi

Autori kohta

Laiendage, et lugeda kogu lugu