CSS gradiento generatorius

Linijiniai gradientai keičia spalvas išilgai tiesios linijos (horizontalios, vertikalios arba įstrižos), sukurdami kryptingą vienos spalvos perėjimą prie kitos. Spinduliniai gradientai spinduliuoja iš centrinio taško į išorę apskritimo arba elipsės forma. Linijinius gradientus naudokite norėdami pabrėžti kryptį ir moderniose sąsajose, o spindulinius - norėdami sukurti taškinius efektus, mygtukus ar organišką vizualinį susidomėjimą.

Galite nustatyti gradiento kampą laipsniais (nuo 0 iki 360 laipsnių) arba naudoti raktinius žodžius, pavyzdžiui, "į dešinę", "į apačią", "į dešinįjį viršų" ir t. t. 0 laipsnių - į viršų, 90 laipsnių - į dešinę, 180 laipsnių - į apačią, 270 laipsnių - į kairę. Kampas lemia ašį, pagal kurią pereina spalvos, todėl galite visiškai kontroliuoti gradiento kryptį.

Taip! CSS gradientai palaiko neribotą spalvų skaičių. Galite pridėti kelias spalvas ir kurti sudėtingus kelių spalvų gradientus. Kiekvienai spalvai galima nustatyti pasirinktinį padėties procentą (nuo 0 % iki 100 %), kad būtų galima valdyti, kurioje gradiento vietoje ji bus rodoma. Tai puikiai tinka vaivorykštės efektams, saulėlydžio gradientams ar sudėtingiems spalvų perėjimams kurti.

Naudokite dvi spalvas, kurios yra artimos savo atspalviu, sodrumu ar šviesumu. Pavyzdžiui, pereikite nuo vidutinės mėlynos prie šiek tiek šviesesnės arba tamsesnės mėlynos spalvos. Išlaikykite mažą kontrastą ir apsvarstykite galimybę naudoti HSL reikšmes, kai šviesumą reguliuojate tik 10-20 %. Subtilūs gradientai suteikia gylio ir vizualinio įdomumo, neužgoždami turinio.

Šiuolaikiniai CSS gradientai (naudojant linijinį gradientą ir radialinį gradientą) palaikomi visose dabartinėse naršyklėse be gamintojo priešdėlių. Tačiau jei reikia palaikyti labai senas naršykles (IE9 ir senesnes), gali prireikti pardavėjo priešdėlių (-webkit-, -moz-, -o-) arba atsarginių vienspalvių spalvų. Šiuolaikiniam žiniatinklio kūrimui visur tinka standartinė CSS gradiento sintaksė.

Tolygiai išdėstykite spalvų sustojimus ir venkite drastiškų spalvų šuolių. Tarp kraštutinių spalvų naudokite tarpines spalvų stoteles, kad perėjimai būtų sklandesni. Naudodami radialinius gradientus, eksperimentuokite su forma (apskritimas ar elipsė) ir padėtimi. Apsvarstykite galimybę naudoti panašios sodrumo ir šviesumo vertės spalvas arba dirbti HSL erdvėje, kurioje galite sukurti sklandžius atspalvių perėjimus.

Spinduliniai gradientai gali būti apskritiminiai (vienodi visomis kryptimis) arba elipsiniai (ištempti, kad tilptų į konteinerį). Apskritimai gerai tinka prožektorių efektams ir centruotam dizainui, o elipsės geriau tinka fonams, kurie turi tolygiai padengti stačiakampio formos sritis. Parametras shape (forma) leidžia valdyti šią elgseną.

Taip! Įstrižiesiems nuolydžiams naudokite kampus nuo 0 laipsnių iki 360 laipsnių. 45 laipsnių kampu sukuriama tobula įstrižainė iš apačios kairėje į viršų dešinėje, 135 laipsnių kampu - iš apačios dešinėje į viršų kairėje. Įstrižiniai gradientai suteikia dinamiško vizualinio įdomumo ir gali nukreipti akį per dizainą.

Naudokite RGBA arba HSLA spalvų formatus su alfa kanalu, kad sukurtumėte permatomus gradientus. Tai puikiai tinka perdangos efektams, vaizdo kaukėms arba gyliui sukurti. Pavyzdžiui, gradientas nuo rgba(0,0,0,0,1) iki rgba(0,0,0,0,0) sukuria perėjimą į skaidrią juodą spalvą.

Spalvų stotelės kontroliuoja kiekvienos spalvos vietą gradiente (nuo 0 % iki 100 %). Tolygūs atstumai sukuria sklandžius perėjimus, o sustūmus stoteles į krūvą sukuriami ryškūs spalvų pokyčiai. Pavyzdžiui, dviejų spalvų išdėstymas ties 50 % sukuria griežtą liniją, o jų išdėstymas ties 40 % ir 60 % sukuria sklandų perėjimą.