Box-shadow ģenerators

Kā lietot box-shadow ģeneratoru

1. Sāciet ar sagatavi vai atstājiet noklusējuma ēnu Maiga. Rindā Sagataves ir Maiga, Asa, Slāņota, Pacēlums, Neumorfisms, Iekšēja un Mirdzums.
2. Sadaļā Ēnu slāņi noklikšķiniet uz slāņa, lai to atlasītu. Katru slāni var pārvietot ar Pārvietot augšup un Pārvietot lejup vai dzēst ar Noņemt. Pievienot slāni dublē atlasīto slāni, lai varētu pielāgot kopiju.
3. Rediģējiet atlasīto slāni sadaļā Rediģēt atlasīto slāni: velciet punktu laukumā Nobīde vai izmantojiet slīdņus un skaitļu laukus Horizontālā nobīde (px), Vertikālā nobīde (px), Izplūdums (px) un Izplatība (px).
4. Izvēlieties Ēnas krāsa ar krāsu atlasītāju vai ievadiet jebkuru CSS krāsu koda laukā, pēc tam iestatiet Necaurredzamība (%). Atzīmējiet Inset (iekšēja ēna), lai ēna tiktu zīmēta lodziņa iekšpusē.
5. Pielāgojiet Priekšskatījuma iestatījumi (Lodziņa krāsa, Fona krāsa, Stūru rādiuss (px)), lai redzētu ēnu uz savām īstajām krāsām. Tie ietekmē tikai priekšskatījumu.
6. Ar Kopēt nokopējiet deklarāciju no CSS kods.

Tastatūra: fokusējiet punktu laukumā Nobīde un ar bulttaustiņiem pārvietojiet to par 1 px vai ar Shift par 10 px.

Kā darbojas box-shadow

Vienas ēnas sintakse ir box-shadow: [inset] x y blur spread color.

• x un y pārvieto ēnu pa labi un uz leju. Negatīvas vērtības pārvieto to pa kreisi un uz augšu. Gaismas avots virs elementa nozīmē pozitīvu y.
• Izplūdums (blur) mīkstina malu. Tas nevar būt negatīvs. Izplūdums 0 dod asu lodziņa kopiju.
• Izplatība (spread) palielina (pozitīva) vai samazina (negatīva) ēnu pirms izplūdināšanas. Negatīva izplatība ar lielu y notur ēnu zem elementa, nevis ap to.
• Krāsa parasti ir caurspīdīga. Šis rīks necaurspīdīgas krāsas raksta kā HEX, bet caurspīdīgās kā rgba(), ko saprot visas pārlūkprogrammas. Ja ievadāt krāsu, kurai jau ir alfa kanāls, to reizina ar Necaurredzamība (%).
• inset novieto ēnu apmales iekšpusē, it kā lodziņš būtu iespiests lapā.

Ēna seko elementa border-radius un nekad nemaina izkārtojumu: tā neaizņem vietu un neizraisa ritjoslas.

Kāpēc slāņot vairākas ēnas?

Īstas ēnas nav viens izplūdis taisnstūris. Maza, tumša, ciešā ēna atrodas tieši zem objekta, bet liela, blāva, izplūdusi izplatās tālāk. Divu līdz piecu slāņu apvienošana to atdarina un izskatās daudz dabiskāk nekā viena smaga ēna. Sagatave Slāņota katrā solī dubulto nobīdi un izplūdumu ar zemu necaurredzamību – paņēmiens, ko popularizējušas daudzas dizaina sistēmas. Pacēlums atdarina Material Design trīsslāņu ēnas.

Pirmais slānis sarakstā tiek krāsots virs pārējiem, tieši tāpat kā CSS vērtībā. Secībai ir nozīme galvenokārt tad, kad jauc inset un ārējās ēnas vai lieto spēcīgas krāsas.

Neumorfisms

Neumorfisms („mīkstais UI“) izmanto divas ēnas elementam, kam ir tāda pati krāsa kā fonam: tumšu, nobīdītu uz leju un pa labi, un gaišu, nobīdītu uz augšu un pa kreisi. Sagatave Neumorfisms abas krāsas iestata uz #e0e5ec. Ņemiet vērā, ka šim stilam ir zems kontrasts, tāpēc ar to veidotām pogām vajadzīgs skaidrs fokusa stāvoklis un salasāmi uzraksti.