Home-theater-designers
Jei internete buvote ilgiau nei kelias minutes, tikėtina, kad susidūrėte su CSS gradientu. CSS fono ypatybė gali būti naudojama įvairių stilių diapazonui sukurti, o vienas iš įdomiausių tipų yra tai, ką jis gali padaryti su gradiento verte.
Žinoti, kaip kurti ir kurti skirtingus CSS gradientus, yra kiekvieno programinės įrangos kūrėjo ar kūrėjo turtas. Iš šio straipsnio sužinosite viską, ką reikia žinoti, kad pradėtumėte į savo projektus įtraukti CSS gradientus.
Kas yra CSS gradientas?
CSS gradientas iš esmės yra dviejų ar daugiau spalvų derinys, kuris sklandžiai pereina iš vienos į kitą. Pereinamoji CSS gradiento būsena priklauso nuo naudojamo gradiento tipo. Kuriant programinę įrangą dažniausiai naudojami du pagrindiniai gradientų tipai: linijinis ir radialinis.
Tačiau yra trečiasis gradiento tipas, kuris yra mažiau populiarus ir žinomas kaip kūginis gradientas.
CSS gradientų sintaksė
Background-image: gradient-type (direction, color1, color2);
CSS gradientas turėtų būti priskirtas fono paveikslėlio CSS ypatybei. Gradiento tipas gali būti vienas iš kelių; linijinis gradientas, radialinis gradientas arba kūginis gradientas. Po gradiento tipo atidaromi ir uždaromi skliausteliai, kuriuose nurodoma pereinamoji gradiento kryptis, taip pat spalvos, kurios turi būti įtrauktos į gradientą.
Susijęs: Kaip nustatyti fono paveikslėlį CSS
Aukščiau pateiktas pavyzdys rodo dvi spalvas, tačiau gradiente gali būti keletas skirtingų spalvų. Vienintelis reikalavimas yra tas, kad kiekviena sąrašo spalva turi būti atskirta kableliu.
Kas yra linijinis gradientas?
Linijinis gradientas yra populiariausias CSS gradientas. Naudojant dvi ar daugiau spalvų, jis sukuria horizontalų, vertikalų arba įstrižinį perėjimo gradientą.
CSS linijinio gradiento pavyzdys
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
Aukščiau pateiktas kodas sukuria tokį CSS gradientą:
Aukščiau pateiktame pavyzdyje praleistas vienas pagrindinis gradiento sintaksės komponentas. Šis komponentas yra pereinamoji gradiento kryptis ir jis buvo praleistas, nes numatytasis linijinio gradiento derinimas yra vertikalus (iš viršaus į apačią); tai yra norimas rezultatas šiame pavyzdyje.
Aukščiau pateiktas kodas duoda tą patį rezultatą, kaip ir kita kodo eilutė. Vienintelis skirtumas tarp šių dviejų yra kodo krypties skyrius.
Naudojant apatinio linijinio gradiento pavyzdį
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Kaip matote iš išvesties, aukščiau pateiktas kodas sukuria gradientą, kuris prasideda mėlyna viršuje, o po to lėtai pereina į oranžinę apačioje. Jei norite pakeisti spalvų tvarką, galite tiesiog pakeisti iki apačios su į viršų ir tai pakeis gradiento kryptį, sukurdama tokią išvestį:
Panašiai kaip vertikalus lygiavimas, horizontalus gradiento išlyginimas gali būti pasiektas naudojant du krypties raktinių žodžių rinkinius: į kairę ir į dešinę , kuris atitinkamai duos šiuos rezultatus.
Ar turėčiau atsisiųsti 64 ar 32 bitų
Įstrižas linijinis gradientas
Galima pasiekti įstrižinį tiesinį gradiento perėjimą bet kuria linijinio gradiento kryptimi. Norėdami tai padaryti, turite žinoti tik keturis konkrečius raktinių žodžių sąrašus.
- Apačioje dešinėje
- Apačioje kairėje
- Viršuje dešinėje
- Viršuje kairėje
Naudojant įstrižainės tiesinio gradiento pavyzdį
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
Aukščiau pateiktas pavyzdys sukuria tokią išvestį:
Kaip matote iš aukščiau pateikto rezultato, linijinis gradientas pereina įstrižainės kryptimi, judėdamas nuo viršutinės kairės iki apatinės dešinės gradiento dalies.
Įvairiaspalvis linijinis gradientas
Linijinis gradientas gali turėti dvi ar daugiau spalvų, bet kaip atrodo daugiau spalvų gradiente? Įvairiaspalvis linijinis gradiento spalvų išdėstymas priklauso nuo jo krypties. Tie, kurie pereina horizontalia kryptimi, kiekviena nauja spalva pasirodys kairėje arba dešinėje nuo linijinio gradiento, priklausomai nuo tikslios linijinio gradiento krypties.
Įvairiaspalvio linijinio gradiento pavyzdys
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Aukščiau pateikta kodo eilutė duos tokią išvestį:
Kaip matote, kiekviena nauja spalva pridedama prie gradiento dešinės pusės, todėl galiausiai virsta vaivorykštė. Tą pačią išvestį galima pasiekti vertikalia kryptimi; tačiau konkretus spalvų išdėstymas tiesiniame gradiente priklausys nuo vertikalios krypties raktinio žodžio (į viršų arba į apačią).
Kas yra radialinis gradientas?
Radialinis gradientas sukuria spiralinį gradientą iš dviejų spalvų, kurios pagal numatytuosius nustatymus prasideda nuo centro. Kai tiesinis gradientas sukuria tiesų gradientą, kuris teka vertikaliai arba horizontaliai, radialinis gradientas sukuria apskritą gradientą, kuris teka iš centro į išorinius kraštus.
Radialinio gradiento pavyzdys
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
Aukščiau pateikta kodo eilutė duos tokią išvestį:
Radialinio gradiento centro keitimas
Pagal numatytuosius nustatymus radialinis gradientas prasideda nuo gradiento centro; tačiau įvedus kelis raktinius žodžius, galima pakeisti kilmės tašką.
pigiausias būdas gauti „Microsoft Office“
Radialinio gradiento pradžios padėties keitimo pavyzdys
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
Aukščiau pateikta kodo eilutė duos tokią išvestį:
Kaip matote iš išvesties virš gradiento, dabar jis prasideda nuo viršutinio dešiniojo kampo, o ne nuo centro. Šis pakeitimas įmanomas dėl raktinio žodžio įtraukimo viršutinis dešinysis aukščiau esančiame kode. Šis raktinių žodžių sąrašas taip pat gali būti naudojamas norint pakeisti radialinio gradiento kilmės tašką:
- Viršuje kairėje
- Apačioje dešinėje
- Apačioje kairėje
Įvairiaspalviai radialiniai gradientai
Kaip ir tiesinis gradientas, radialinis gradientas taip pat gali naudoti dvi daugiau spalvų, pagrindinis skirtumas yra tas, kad tiesinis gradientas tiesia linija prideda gradientą, o radialinis gradientas prideda naujų spalvų prie išorinio krašto.
Įvairiaspalvis radialinis gradientas
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
Aukščiau pateikta kodo eilutė duos tokią išvestį:
Gradientų pritaikymas
Iki šiol matėte, kaip pakeisti gradiento kryptį ir centrinį tašką, bet nematėte, kaip pritaikyti gradientą. Gradiento pritaikymas gali atrodyti kaip daug darbo, tačiau kai suprasite CSS fono gradiento kūrimo pagrindus, kitas akivaizdus žingsnis yra išmokti padaryti CSS gradientus unikalius.
kaip naudoti priartinimo filtrus
Pagal numatytuosius nustatymus gradiento spalvos užima tolygiai paskirstytą erdvę, o kiekviena spalva sklandžiai pereina į kitą po jos. Taigi, jei dvi spalvos yra sujungtos, kad susidarytų gradientas, kiekviena spalva užims pusę vietos, pereidama iš vienos į kitą. Jei derinamos trys spalvos, kiekviena spalva užims trečdalį turimos vietos.
Naudodami pritaikytą gradientą, galite aiškiai apibrėžti erdvės, kurią spalva užims gradiente, kiekį, aiškiai priskirdami spalvos sustabdymo padėtis .
Linijinio gradiento pritaikymas 1 pavyzdys
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
Aukščiau pateikta kodo eilutė duos tokią išvestį:
Aukščiau išvestyje parodyta antroji linijinio gradiento spalva, sustojusi 30% pirmosios spalvos gradiento taške, o ne įprasta padėtis, ir kadangi antroji spalva taip pat yra paskutinė gradiento spalva, ji natūraliai tęsiasi iki galo .
Jei pirmosios spalvos pabaigoje nurodytumėte 30% kodo, viskas turėtų būti aiškiau.
Linijinio gradiento pritaikymas 2 pavyzdys
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
Aukščiau pateiktas kodas duos tokią išvestį.
Aukščiau pateiktas rezultatas aiškiai parodo pirmąją gradiento spalvą, sustojančią 30% antrosios spalvos gradiento taške. Šis pavyzdys kartu su aukščiau esančiu pavyzdžiu turėtų padėti jums lengviau pritaikyti spalvas.
Radialinis gradientas pritaikomas taip pat, kaip ir tiesinis gradientas. Vienintelis dalykas, kurį turite padaryti, norėdami pasiekti tuos pačius rezultatus radialiniame gradiente, yra pakeisti gradiento tipą ir kryptį.
Kurkite CSS gradientus dar niekada nebuvo taip paprasta
Šiame vadovėlio straipsnyje pateikiami įrankiai, skirti identifikuoti ir sukurti linijinius ir radialinius nuolydžius. Jei jau pasiekėte šį tašką, sužinojote, kaip pakeisti gradiento kryptį ir centrą. Be to, dabar turite įgūdžių tinkinti CSS gradientus ir kurti unikalius foninius gradientus.
Tačiau, jei nenorite iš karto kurti naujų ir unikalių nuolydžių, galite pradėti sukurdami jau atrodančius puikiai atrodančius.
Dalintis Dalintis „Tweet“ Paštu 27 Stilingi CSS fono gradiento pavyzdžiaiTvirtos spalvos tokios pernai. Gradientai yra! Bet kaip juos sukurti CSS?
Skaityti toliau Susijusios temos- Programavimas
- Interneto svetainių kūrimas
- Interneto svetainės dizainas
- CSS
Kadeisha Kean yra „Full Stack“ programinės įrangos kūrėja ir techninė/technologijų rašytoja. Ji turi aiškų sugebėjimą supaprastinti kai kurias sudėtingiausias technologines sąvokas; gaminti medžiagą, kurią lengvai supranta bet kuris naujokas. Ji aistringai rašo, kuria įdomią programinę įrangą ir keliauja po pasaulį (per dokumentinius filmus).
Daugiau iš Kadeisha KeanPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia