Stiliaus svetainės elementai su CSS fono gradientu

Jei internete esate ilgiau nei kelias minutes, tikėtina, kad susidūrėte su CSS gradientu. CSS fono ypatybė gali būti naudojama kuriant įvairių stilių diapazoną, o vienas iš labiausiai intriguojančių tipų yra tai, ką jis gali padaryti su gradiento verte.

Žinojimas, kaip kurti ir kurti skirtingus CSS gradientus, yra bet kurio programinės įrangos dizainerio ar kūrėjo turtas. Iš šio straipsnio sužinosite viską, ką reikia žinoti, kad pradėtumėte įtraukti CSS gradientus į savo projektus.

Kas yra CSS gradientas?

CSS gradientas iš esmės yra dviejų ar daugiau spalvų derinys, kuris sklandžiai pereina nuo vienos prie kitos. Pereinamoji CSS gradiento būsena priklauso nuo naudojamo gradiento tipo. Yra du pagrindiniai gradientų tipai, paprastai naudojami programinės įrangos projektavimui: tiesiniai ir radialiniai.

Tačiau yra trečiasis gradientų tipas, kuris yra mažiau populiarus ir žinomas kaip kūginis gradientas.

CSS gradientų sintaksė

Fono paveikslėlis: gradiento tipas (kryptis, spalva1, spalva2);

CSS gradientas turėtų būti priskirtas CSS fono paveikslėlio ypatybei. Gradiento tipas gali būti vienas iš kelių; tiesinis gradientas, radialinis gradientas arba kūginis gradientas. Po gradiento tipo pateikiami atidarymo ir uždarymo skliaustai, kuriuose nurodoma pereinamoji gradiento kryptis, taip pat spalvos, kurios turi būti įtrauktos į gradientą.

Susijęs: Kaip nustatyti fono paveikslėlį CSS

Aukščiau pateiktame pavyzdyje rodomos dvi spalvos, tačiau gradiente gali būti kelios skirtingos spalvos. Vienintelis reikalavimas yra tai, kad kiekviena sąrašo spalva būtų atskirta kableliu.

Kas yra tiesinis gradientas?

Linijinis gradientas yra populiariausias CSS gradientas. Naudojant dvi ar daugiau spalvų, sukuriamas horizontalus, vertikalus arba įstrižas perėjimo gradientas.

CSS tiesinio gradiento pavyzdys

Fono paveikslėlis: tiesinis gradientas (# 00A4CCFF, # F95700FF);

Aukščiau pateiktas kodas sukurs tokį CSS gradientą:

Aukščiau pateiktame pavyzdyje yra viena pagrindinė gradiento sintaksės sudedamoji dalis. Šis komponentas yra pereinamoji gradiento kryptis ir ji buvo praleista, nes numatytasis tiesinio gradiento lygiavimas yra vertikalus (iš viršaus į apačią); tai yra norima šio pavyzdžio išvestis.

Aukščiau pateiktas kodas duoda tą patį rezultatą kaip ir ši kodo eilutė. Vienintelis skirtumas tarp jų yra kodo krypties skyrius.

Naudojant apatinio tiesinio gradiento pavyzdį

Fono paveikslėlis: tiesinis gradientas (į apačią, # 00A4CCFF, # F95700FF);

Kaip matote iš išvesties, aukščiau pateiktas kodas sukuria gradientą, kuris viršuje prasideda mėlyna, tada lėtai pereina į oranžinę apačioje. Jei norite pakeisti spalvų tvarką, galite tiesiog pakeisti iki dugno su į viršų ir tai pakeis gradiento kryptį, sukurdama tokią išvestį:

Panašiai kaip vertikaliame lygiavime, horizontalų gradiento išlyginimą galima pasiekti naudojant du krypties raktinių žodžių rinkinius: į kairę ir į dešinę, kurie duos atitinkamai šiuos rezultatus.

Įstrižas tiesinis gradientas

Įstrižainės tiesinio gradiento perėjimą įmanoma pasiekti bet kuria tiesinio gradiento kryptimi. Yra tik keturi konkretūs raktinių žodžių sąrašai, kuriuos turite žinoti, kad tai būtų įmanoma.

• Dešinėje apačioje
• Apačioje kairėje
• Viršuje dešinėje
• Viršuje kairėje

Naudojant įstrižainės tiesinio gradiento pavyzdį

Fono vaizdas: linijinis gradientas (apačioje dešinėje, # 00A4CCFF, # F95700FF);

Aukščiau pateiktame pavyzdyje pateikiama tokia išvestis:

Kaip matote iš viršaus išvesties, tiesinis gradientas pereina įstrižainės kryptimi, judėdamas nuo gradiento viršutinės kairės iki apatinės dešinės dalies.

Daugiaspalvis tiesinis gradientas

Linijinis gradientas gali turėti dvi ar daugiau spalvų, bet kaip daugiau spalvų atrodo gradiente? Daugiaspalvis linijinis gradiento spalvų išdėstymas priklauso nuo jo krypties. Tų, kurios pereina horizontalia kryptimi, kiekviena nauja spalva bus rodoma tiesinio gradiento kairėje arba dešinėje, atsižvelgiant į tikslią tiesinio gradiento kryptį.

Daugiaspalvis tiesinio gradiento pavyzdys

Fono paveikslėlis: tiesinis gradientas (į dešinę, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Aukščiau nurodyta kodo eilutė sukurs tokį išvestį:

Kaip matote, kiekviena nauja spalva pridedama prie gradiento dešinės, sukuriant tai, kas ilgainiui perauga į vaivorykštę. Tą pačią išvestį galima pasiekti vertikalia kryptimi; tačiau konkretus tiesinio gradiento spalvų išdėstymas priklausys nuo vertikalios krypties raktinio žodžio (į viršų arba į apačią).

Kas yra radialinis gradientas?

Radialinis gradientas sukuria spiralinį dviejų spalvų, kurios pagal nutylėjimą prasideda nuo centro, gradientą. Kai tiesinis gradientas sukuria tiesų gradientą, kuris teka vertikaliai arba horizontaliai, radialinis gradientas sukuria apskritą gradientą, kuris teka iš centro į išorinius kraštus.

Naudojant radialinio gradiento pavyzdį

Fono vaizdas: radialinis gradientas (apskritimas, # 00A4CCFF, # F95700FF);

Aukščiau nurodyta kodo eilutė sukurs tokį išvestį:

Radialinio gradiento centro keitimas

Pagal numatytuosius nustatymus radialinis gradientas prasideda nuo gradiento centro; tačiau įmanoma pakeisti kilmės vietą įvedus kelis raktinius žodžius.

Radialinio gradiento pradinės padėties keitimo pavyzdys

Fono paveikslėlis: radialinis gradientas (apskritimas viršuje dešinėje, # 00A4CCFF, # F95700FF);

Aukščiau nurodyta kodo eilutė sukurs tokį išvestį:

Kaip matote iš išvesties virš gradiento, dabar jis prasideda nuo viršutinio dešiniojo kampo, o ne centro. Šis pakeitimas galimas dėl įtraukto raktinio žodžio viršutinis dešinysis viršuje esančiame kode. Šis raktinių žodžių sąrašas taip pat gali būti naudojamas norint pakeisti radialinio gradiento pradžios 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 kur tiesinis gradientas tiesia linija prideda gradientą, radialinis gradientas išorėje prideda naujų spalvų kraštas.

Daugiaspalvis radialinio gradiento pavyzdys

Fono vaizdas: radialinis gradientas (apskritimas, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Aukščiau nurodyta kodo eilutė sukurs tokį išvestį:

Gradientų pritaikymas

Iki šiol matėte, kaip pakeisti gradiento kryptį ir vidurio tašką, tačiau nematėte, kaip pritaikyti gradientą. Gradiento pritaikymas gali skambėti kaip didelis darbas, bet kai suprasite kūrimo pagrindus CSS fono gradientas, kitas akivaizdus žingsnis yra mokymasis, kaip padidinti savo CSS gradientus Unikalus.

Pagal numatytuosius nustatymus gradiento spalvos užima tolygiai paskirstytą erdvę, o kiekviena spalva sklandžiai pereina į kitą. Taigi, jei sujungiamos dvi spalvos, kad susidarytų gradientas, kiekviena spalva užims pusę laisvos vietos, pereidama nuo vienos prie kitos. Sujungus tris spalvas, kiekviena spalva užims trečdalį laisvos vietos.

Naudodami pritaikytą gradientą, galite tiksliai nustatyti vietos, kurią spalva užims gradiente, aiškiai priskirdama spalvos sustojimo padėtis.

Linijinio gradiento pritaikymas 1 pavyzdys

Fono vaizdas: tiesinis gradientas (į dešinę, # 00A4CCFF, # F95700FF 30%);

Aukščiau nurodyta kodo eilutė sukurs tokį išvestį:

Aukščiau pateiktoje išvestyje rodoma antroji linijinio gradiento spalva, sustojanti 30% pirmosios gradiento spalvos taške, vietoj įprastos padėties ir dėl to, kad antroji spalva taip pat yra paskutinė gradiento spalva, ji natūraliai tęsiasi iki galas.

Jei pirmosios spalvos pabaigoje aukščiau esančiame kode įdėtumėte 30%, viskas turėtų būti aiškiau.

Linijinio gradiento pritaikymas 2 pavyzdys

Fono vaizdas: tiesinis gradientas (į dešinę, # 00A4CCFF 30%, # F95700FF);

Aukščiau pateiktas kodas sukurs tokią išvestį.

Aukščiau pateiktoje išvestyje aiškiai parodyta pirmoji gradiento spalva, sustojanti 30% antrosios gradiento spalvos taške. Šis pavyzdys kartu su aukščiau pateiktu pavyzdžiu turėtų padėti lengviau pritaikyti spalvų sustabdymą.

Radialinio gradiento pritaikymas atliekamas taip pat, kaip ir tiesinis gradientas. Vienintelis dalykas, kurį turite padaryti, kad radialiniu gradientu pasiektumėte tuos pačius rezultatus, yra pakeisti gradiento tipą ir kryptį.

Kurti CSS gradientus dar niekada nebuvo taip paprasta

Šiame mokymo straipsnyje pateikiami įrankiai, skirti nustatyti ir sukurti tiesinius ir radialinius nuolydžius. Jei pasiekėte šį tašką, sužinojote, kaip pakeisti gradiento kryptį ir centrą. Be to, dabar jūs turite įgūdžių pritaikyti CSS gradientus ir sukurti unikalius fono gradientus.

Tačiau, jei nenorite tiesiai kurti naujų ir unikalių nuolydžių, galite pradėti nuo jau sukurtų puikios išvaizdos.

27 stilingi CSS fono gradiento pavyzdžiai

Vientisos spalvos yra tokios pernai. Gradientai yra! Bet kaip juos sukurti CSS?

Skaitykite toliau

Apie autorių

Išskleisti skaityti visą istoriją