CSS gradienta ģenerators

Lineārie gradienti nodrošina krāsu pāreju taisnā līnijā (horizontālā, vertikālā vai diagonālā), radot virziena plūsmu no vienas krāsas uz citu. Radiālie gradienti izstaro no centra punkta uz āru apļveida vai eliptiskā veidā. Lineāros gradientus izmantojiet virziena uzsvēršanai un modernām saskarnēm, bet radiālos gradientus - starmešu efektiem, pogām vai organiskai vizuālai interesei.

Var iestatīt gradienta leņķi grādos (no 0 grādu līdz 360 grādiem) vai izmantot atslēgvārdus, piemēram, "pa labi", "uz leju", "uz augšu pa labi" utt. 0 grādu norāda uz augšu, 90 grādu - uz labo pusi, 180 grādu - uz leju un 270 grādu - uz kreiso pusi. Leņķis nosaka asi, pa kuru notiek krāsu pāreja, nodrošinot pilnīgu kontroli pār gradienta virzienu.

Jā! CSS gradienti atbalsta neierobežotu krāsu pieturu skaitu. Varat pievienot vairākas krāsas, lai izveidotu sarežģītus daudzkrāsu gradientus. Katrai krāsai var iestatīt papildu procentuālo pozīciju (no 0 % līdz 100 %), lai kontrolētu, kur tā parādās gradientā. Tas ir lieliski piemērots varavīksnes efektu, saulrieta gradientu vai sarežģītu krāsu pāreju veidošanai.

Izmantojiet divas krāsas, kas ir tuvas pēc nokrāsas, piesātinājuma vai spilgtuma. Piemēram, pārejiet no vidēji zilas uz nedaudz gaišāku vai tumšāku zilu krāsu. Saglabājiet zemu kontrastu un apsveriet iespēju izmantot HSL vērtības, kurās gaišumu regulējat tikai par 10-20%. Smalki gradienti piešķir dziļumu un vizuālo interesi, nepārblīvējot saturu.

Mūsdienīgi CSS gradienti (izmantojot lineāro gradientu un radiālo gradientu) tiek atbalstīti visās pašreizējās pārlūkprogrammās bez ražotāja prefiksiem. Tomēr, ja nepieciešams atbalstīt ļoti vecas pārlūkprogrammas (IE9 un senākas), var būt nepieciešami ražotāja prefiksi (-webkit-, -moz-, -o-) vai rezerves vienkrāsas. Mūsdienu tīmekļa vietņu izstrādē visur darbojas standarta CSS gradientu sintakse.

Novietojiet krāsu pieturas vienmērīgi un izvairieties no krasiem krāsu lēcieniem. Izmantojiet starpkrāsu pieturas starp ekstrēmām krāsām, lai radītu vienmērīgākas pārejas. Radiālo gradientu gadījumā eksperimentējiet ar formu (aplis pret elipsi) un novietojumu. Apsveriet iespēju izmantot krāsas ar līdzīgām piesātinājuma un gaišuma vērtībām vai strādāt HSL telpā, kur varat izveidot vienmērīgas nokrāsu pārejas.

Radiālie gradienti var būt apaļi (vienādi visos virzienos) vai eliptiski (izstiepti, lai ietilptu konteinerā). Apļi labi piemēroti starmešu efektiem un centrētiem dizainiem, bet elipses ir labāk piemērotas fona laukumiem, kuriem vienmērīgi jāpārklāj taisnstūra laukumi. Veidlapas parametrs ļauj kontrolēt šo uzvedību.

Jā! Diagonāliem slīpumiem izmantojiet leņķus no 0 grādu līdz 360 grādiem. 45 grādi veido perfektu diagonāli no kreisās apakšējās daļas uz labo augšējo daļu, 135 grādi - no labās apakšējās daļas uz kreiso augšējo daļu. Diagonālās gradientes piešķir dinamisku vizuālo interesi un var vadīt skatienu pa dizainu.

Izmantojiet RGBA vai HSLA krāsu formātus ar alfa kanālu, lai izveidotu gradientus, kas kļūst caurspīdīgi. Tas ir lieliski piemērots pārklāšanās efektiem, attēlu maskām vai dziļuma radīšanai. Piemēram, gradients no rgba(0,0,0,0,1) līdz rgba(0,0,0,0,0) rada pāreju uz caurspīdīgu melnu.

Krāsu pieturas nosaka, kur gradientā parādās katra krāsa (no 0% līdz 100%). Vienmērīgs attālums rada vienmērīgas pārejas, savukārt, ja pieturas ir saliktas kopā, tiek radītas krasas krāsu izmaiņas. Piemēram, novietojot divas krāsas 50 % attālumā, tiek radīta stingra līnija, bet, izvietojot tās 40 % un 60 % attālumā, tiek radīts vienmērīgs sajaukums.