Stiilsed veebisaidielemendid CSS -i tausta gradiendiga

Stiilsed veebisaidielemendid CSS -i tausta gradiendiga

Kui olete olnud Internetis kauem kui paar minutit, on tõenäoline, et olete kohanud CSS -i gradienti. CSS -i taustaomadust saab kasutada mitmesuguste stiilide loomiseks ja üks intrigeerivamaid tüüpe on see, mida see gradiendi väärtusega teha saab.





Erinevate CSS -i gradientide kujundamise ja loomise teadmine on iga tarkvaraarendaja või -arendaja eelis. Sellest artiklist saate teada kõike, mida peate teadma, et alustada CSS -i gradientide kaasamist oma projektidesse.



Mis on CSS -i gradient?

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



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

CSS -i gradientide süntaks

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

CSS-i gradient tuleks määrata taustapildi CSS-i omadusele. Gradiendi tüüp võib olla üks mitmest; lineaarne gradient, radiaalne gradient või kooniline gradient. Gradiendi tüübile järgnevad avamis- ja sulgudesulud, mis sisaldavad gradiendi üleminekusuunda, samuti gradiendisse kaasatavad värvid.



Seotud: Kuidas CSS -is taustapilti määrata?

Ülaltoodud näide näitab kahte värvi, kuid gradient võib sisaldada mitut erinevat värvi. Ainus nõue on see, et loendis on iga värv eraldatud komaga.



Mis on lineaarne gradient?

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

CSS lineaarse gradiendi näide

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

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



Ülalolevast näitest on välja jäetud üks gradiendi süntaksi komponent. See komponent on gradiendi ülemineku suund ja see jäeti välja, kuna lineaarse gradiendi vaikimisi joondamine on vertikaalne (ülevalt 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 suunaosa.

Alumise lineaarse gradiendi näite kasutamine

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

Nagu näete väljundist, loob ülaltoodud kood gradiendi, mis algab ülaosas sinisega ja läheb seejärel aeglaselt üle oranžile. Kui soovite värvide järjekorda muuta, võite selle lihtsalt asendada põhja koos tippu ja see muudab gradiendi suunda, saades järgmise väljundi:

Sarnaselt vertikaalsele joondamisele saab gradiendi horisontaalse joondamise saavutada kahe suuna märksõna komplekti abil. vasakule ja paremale , mis toodab vastavalt järgmisi väljundeid.

kuidas seadistada virtuaalset masinat

Diagonaalne lineaarne gradient

On võimalik saavutada diagonaalne lineaarne gradiendi üleminek lineaarse gradiendi mis tahes suunas. Selle saavutamiseks peate teadma ainult nelja konkreetset märksõnade loendit.

  • All paremale
  • All vasakul
  • Üleval paremal
  • Üleval vasakul

Diagonaalse lineaarse gradiendi näite kasutamine

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

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

Nagu näete ülaltoodud väljundist, muudab lineaarne gradient diagonaalsuunas üleminekut vasakult ülevalt paremale alumisse gradiendi sektsiooni.

Mitmevärviline lineaarne gradient

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

Mitmevärvilise lineaarse gradiendi näide

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

Ülaltoodud koodirida annab järgmise väljundi:

Nagu näete, lisatakse iga uus värv gradiendist paremale, luues selle, mis lõpuks muutub vikerkaareks. Sama väljundi saab saavutada vertikaalsuunas; lineaarse gradiendi konkreetne värvikorraldus sõltub aga vertikaalsuuna märksõnast (üles või alla).

Mis on radiaalne gradient?

Radiaalne gradient loob spiraalse gradiendi, mis koosneb kahest värvist, mis algavad vaikimisi keskelt. Kui lineaarne gradient tekitab sirge gradiendi, mis voolab vertikaalselt või horisontaalselt, tekitab radiaalne gradient ringikujulise gradiendi, mis voolab keskelt välisservadeni.

Radiaalse gradiendi näite kasutamine

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

Ülaltoodud koodirida annab järgmise väljundi:

Radiaalse gradiendikeskuse muutmine

Vaikimisi algab radiaalne gradient gradiendi keskelt; Siiski on mõne märksõna kasutuselevõtuga võimalik lähtepunkti muuta.

head videotöötlusrakendused youtube jaoks

Radiaalse gradiendi muutmise algusasendi näide

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

Ülaltoodud koodirida annab järgmise väljundi:

Nagu näete ülaltoodud väljundist, algab gradient nüüd keskelt parema ülanurga alt. See muudatus on võimalik märksõna kaasamise tõttu üleval paremal ülaltoodud koodis. Radiaalse gradiendi lähtepunkti muutmiseks saab kasutada ka järgmist märksõnade loendit:

  • Üleval vasakul
  • Paremalt alumine
  • All vasakul

Mitmevärvilised radiaalsed gradiendid

Nagu lineaarne gradient, võib ka radiaalne gradient kasutada kahte värvi rohkem, peamine erinevus seisneb selles, et kui lineaarne gradient lisab gradiendile sirgjooneliselt, lisab radiaalne gradient välisservale uusi värve.

Mitmevärvilise radiaalse gradiendi näide


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

Ülaltoodud koodirida annab järgmise väljundi:

Gradientide kohandamine

Siiani olete näinud, kuidas muuta gradiendi suunda ja keskpunkti, kuid pole näinud, kuidas gradienti kohandada. Gradiendi kohandamine võib tunduda töömahukas, kuid kui olete CSS -i taustgradiendi loomise põhitõdedest aru saanud, on järgmine selge samm õppida CSS -i gradientide unikaalsemaks muutmist.

kuidas eemaldada Google Drive arvutist

Vaikimisi hõivavad gradiendi värvid ühtlaselt jaotatud ruumi, kusjuures iga värv läheb sujuvalt üle järgnevale. Seega, kui kaks värvi kombineerida gradiendi moodustamiseks, hõivab iga värv ühelt teisele üleminekul poole saadaolevast ruumist. Kui kombineerida kolm värvi, võtab iga värv kolmandiku saadaolevast ruumist.

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

Lineaarse gradiendi kohandamine Näide 1

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

Ülaltoodud koodirida annab järgmise väljundi:

Ülaltoodud väljund näitab lineaarse gradiendi teist värvi, mis peatub gradiendi esimese värvi 30% punktis, selle tavapärase asukoha asemel ja kuna teine ​​värv on ka gradiendi viimane värv, ulatub see loomulikult lõpuni .

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

Lineaarse gradiendi kohandamine Näide 2

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

Ülaltoodud kood annab järgmise väljundi.

Ülaltoodud väljund näitab selgelt gradiendi esimest värvi, mis peatub gradiendi teise värvi 30% punktis. See näide koos ülaltoodud näitega peaks aitama muuta värvi peatamise kohandamise teile hõlpsamini arusaadavaks.

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

CSS -i gradientide loomine pole kunagi olnud lihtsam

See õpetusartikkel pakub teile tööriistu lineaarsete ja radiaalsete gradientide tuvastamiseks ja loomiseks. Kui olete selle punkti jõudnud, õppisite, kuidas muuta gradiendi suunda ja keskpunkti. Lisaks on teil nüüd oskused kohandada CSS -i gradiente ja luua ainulaadseid taustakaldeid.

Kui te aga ei soovi minna uute ja ainulaadsete gradientide loomisele, võite alustada mõne suurepärase välimusega juba olemasoleva loomisega.

Jaga Jaga Piiksuma E -post 27 Stiilse CSS -i tausta gradiendi näiteid

Ühtsed värvid on nii eelmisel aastal. Gradiendid on sees! Aga kuidas neid CSS -is luua?

Loe edasi Seotud teemad
  • Programmeerimine
  • Veebiarendus
  • Veebidisain
  • CSS
Autori kohta Kadeisha Kean(Avaldatud 21 artiklit)

Kadeisha Kean on täispinu tarkvaraarendaja ja tehniline/tehnoloogiline kirjutaja. Tal on selge võime lihtsustada mõnda kõige keerukamat tehnoloogilist kontseptsiooni; materjali tootmine, millest igale tehnoloogia algajale on lihtne aru saada. Ta on kirglik kirjutamise, huvitava tarkvara arendamise ja maailma rändamise vastu (dokumentaalfilmide kaudu).

Veel Kadeisha Keanilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin