Box-shadow framleiðandi

Hvernig á að nota box-shadow framleiðandann

1. Byrjaðu á forstillingu eða haltu sjálfgefna skugganum Mjúkt. Röðin Forstillingar býður upp á Mjúkt, Hart, Lagskipt, Upphækkun, Neumorphism, Innri og Ljómi.
2. Í Skuggalög smellirðu á lag til að velja það. Hægt er að færa hvert lag með Færa upp og Færa niður eða eyða því með Fjarlægja. Bæta við lagi afritar valda lagið svo þú getir fínstillt afrit.
3. Breyttu völdu lagi undir Breyta völdu lagi: dragðu punktinn í Frávik reitnum eða notaðu sleðana og talnareitina fyrir Lárétt frávik (px), Lóðrétt frávik (px), Óskýrleiki (px) og Útbreiðsla (px).
4. Veldu Litur skuggans með litavalinu eða sláðu inn hvaða CSS-lit sem er í kóðareitinn og stilltu síðan Ógegnsæi (%). Hakaðu í Inset (innri skuggi) til að teikna skuggann inni í kassanum.
5. Stilltu Stillingar forskoðunar (Litur kassa, Bakgrunnslitur, Radíus horna (px)) til að sjá skuggann á þínum raunverulegu litum. Þær hafa aðeins áhrif á forskoðunina.
6. Afritaðu yfirlýsinguna úr CSS-kóði með Afrita.

Lyklaborð: settu punktinn í Frávik reitnum í fókus og notaðu örvalyklana til að færa hann um 1 px, eða 10 px með Shift.

Hvernig box-shadow virkar

Syntax eins skugga er box-shadow: [inset] x y blur spread color.

• x og y færa skuggann til hægri og niður. Neikvæð gildi færa hann til vinstri og upp. Ljósgjafi fyrir ofan þáttinn þýðir jákvætt y.
• Óskýrleiki (blur) mýkir brúnina. Hann getur ekki verið neikvæður. Óskýrleiki 0 gefur harðbrúnað afrit af kassanum.
• Útbreiðsla (spread) stækkar (jákvætt) eða minnkar (neikvætt) skuggann áður en hann er gerður óskýr. Neikvæð útbreiðsla með stóru y heldur skugganum undir þættinum í stað þess að hann sé allt í kring.
• Litur er yfirleitt hálfgagnsær. Þetta tól skrifar ógegnsæja liti sem HEX og hálfgagnsæja sem rgba(), sem allir vafrar skilja. Ef þú slærð inn lit sem hefur þegar alfarás margfaldar Ógegnsæi (%) hann.
• inset setur skuggann innan við rammann, eins og kassinn væri þrýst inn í síðuna.

Skugginn fylgir border-radius þáttarins og breytir aldrei útliti síðunnar: hann tekur ekkert pláss og kallar ekki fram skrunstikur.

Hvers vegna að leggja saman marga skugga?

Raunverulegir skuggar eru ekki ein óskýr ferhyrningur. Lítill, dökkur og þéttur skuggi liggur rétt undir hlutnum og stór, daufur og óskýr skuggi dreifist lengra. Með því að stafla tveimur til fimm lögum má líkja eftir þessu og útkoman verður mun eðlilegri en einn þungur skuggi. Forstillingin Lagskipt tvöfaldar frávik og óskýrleika í hverju þrepi með lágu ógegnsæi, aðferð sem mörg hönnunarkerfi hafa gert vinsæla. Upphækkun líkir eftir þriggja laga skuggum Material Design.

Fyrsta lagið á listanum er málað ofan á hin, nákvæmlega eins og í CSS-gildinu. Röðin skiptir mestu máli þegar þú blandar inset og ytri skuggum eða notar sterka liti.

Neumorphism

Neumorphism („mjúkt viðmót“) notar tvo skugga á þátt sem hefur sama lit og bakgrunnurinn: dökkan sem er færður niður og til hægri og ljósan sem er færður upp og til vinstri. Forstillingin Neumorphism setur báða liti á #e0e5ec. Hafðu í huga að þessi stíll hefur lítil birtuskil, svo hnappar sem byggðir eru á honum þurfa skýra fókusstöðu og læsilega texta.