Gjenerator i box-shadow

Si ta përdorësh gjeneratorin e box-shadow

1. Nisu nga një gatishmëri, ose mbaje hijen e parazgjedhur E butë. Rreshti Gatishmëri ofron E butë, E fortë, Me shtresa, Ngritje, Neumorfizëm, E brendshme dhe Shkëlqim.
2. Te Shtresat e hijes, kliko një shtresë për ta zgjedhur. Çdo shtresë mund të lëvizet me Ngrije dhe Ule, ose të fshihet me Hiq. Shto shtresë dyfishon shtresën e zgjedhur, që të mund të ndryshosh një kopje.
3. Ndrysho shtresën e zgjedhur te Ndrysho shtresën e zgjedhur: zhvendos pikën në fushën Zhvendosja, ose përdor rrëshqitësit dhe fushat numerike për Zhvendosja horizontale (px), Zhvendosja vertikale (px), Turbullimi (px) dhe Përhapja (px).
4. Zgjidh Ngjyrën e hijes me zgjedhësin e ngjyrave ose shkruaj çdo ngjyrë CSS në fushën e kodit, pastaj cakto Tejdukshmërinë (%). Shëno Inset (hije e brendshme) që hija të vizatohet brenda kutisë.
5. Rregullo Cilësimet e pamjes paraprake (Ngjyra e kutisë, Ngjyra e sfondit, Rrezja e cepave (px)) që ta shohësh hijen mbi ngjyrat e tua reale. Ato ndikojnë vetëm te pamja paraprake.
6. Kopjo deklarimin nga Kodi CSS me butonin Kopjo.

Tastierë: fokuso pikën në fushën Zhvendosja dhe përdor shigjetat për ta lëvizur me 1 px, ose me 10 px kur mban Shift.

Si funksionon box-shadow

Sintaksa e një hije është box-shadow: [inset] x y blur spread color.

• x dhe y e zhvendosin hijen djathtas dhe poshtë. Vlerat negative e zhvendosin majtas dhe lart. Një burim drite mbi element do të thotë y pozitive.
• Blur (turbullimi) zbut skajin. Nuk mund të jetë negativ. Një turbullim 0 jep një kopje me skaje të prera të kutisë.
• Spread (përhapja) e zmadhon (pozitive) ose e zvogëlon (negative) hijen para se të turbullohet. Një përhapje negative me y të madhe e mban hijen nën element në vend që ta shtrijë rreth tij.
• Ngjyra zakonisht ka tejdukshmëri. Ky mjet i shkruan ngjyrat e patejdukshme si HEX dhe ato gjysmëtejdukshme si rgba(), që e kuptojnë të gjithë shfletuesit. Nëse shkruan një ngjyrë që ka tashmë kanal alfa, Tejdukshmëria (%) e shumëzon.
• inset e vendos hijen brenda kornizës, sikur kutia të ishte e shtypur në faqe.

Hija ndjek border-radius të elementit dhe nuk e ndryshon kurrë faqosjen: nuk zë vend dhe nuk shkakton shirita lëvizjeje.

Pse të shtresohen disa hije?

Hijet reale nuk janë një drejtkëndësh i vetëm i turbulluar. Një hije e vogël, e errët dhe e ngushtë qëndron pikërisht nën objekt, kurse një e madhe, e zbehtë dhe e turbullt përhapet më larg. Vendosja e dy deri në pesë shtresave e imiton këtë dhe duket shumë më natyrale se një hije e vetme e rëndë. Gatishmëria Me shtresa e dyfishon zhvendosjen dhe turbullimin në çdo hap me tejdukshmëri të ulët, teknikë e popullarizuar nga shumë sisteme dizajni. Ngritje imiton hijet me tri shtresa të Material Design.

Shtresa e parë në listë pikturohet sipër të tjerave, saktësisht si në vlerën CSS. Radha ka rëndësi kryesisht kur përzien hije inset me të jashtme ose përdor ngjyra të forta.

Neumorfizmi

Neumorfizmi (“soft UI”) përdor dy hije mbi një element që ka të njëjtën ngjyrë me sfondin: një të errët të zhvendosur poshtë e djathtas dhe një të çelët të zhvendosur lart e majtas. Gatishmëria Neumorfizëm i vendos të dy ngjyrat në #e0e5ec. Mbaje parasysh që ky stil ka kontrast të ulët, prandaj butonat e ndërtuar me të kanë nevojë për gjendje të qartë fokusi dhe etiketa të lexueshme.