Box Shadow Generator

Paano gamitin ang box shadow generator

1. Magsimula sa isang preset, o gamitin ang default na Malambot na anino. Nag-aalok ang hanay ng Mga preset ng Malambot, Matigas, Patong-patong, Elevation, Neumorphism, Panloob at Glow.
2. Sa Mga layer ng anino, i-click ang isang layer para piliin ito. Maaaring ilipat ang bawat layer gamit ang Itaas at Ibaba, o tanggalin gamit ang Alisin. Dina-duplicate ng Magdagdag ng layer ang napiling layer para makapag-ayos ka ng kopya.
3. I-edit ang napiling layer sa ilalim ng I-edit ang napiling layer: i-drag ang tuldok sa Offset pad, o gamitin ang mga slider at number field para sa Pahalang na offset (px), Patayong offset (px), Blur (px) at Spread (px).
4. Pumili ng Kulay ng anino gamit ang color picker o mag-type ng anumang CSS color sa code field, saka itakda ang Opacity (%). Lagyan ng tsek ang Inset (panloob na anino) para iguhit ang anino sa loob ng kahon.
5. Ayusin ang Mga setting ng preview (Kulay ng kahon, Kulay ng background, Radius ng sulok (px)) para makita ang anino sa mga totoong kulay mo. Preview lang ang naaapektuhan ng mga ito.
6. Kopyahin ang deklarasyon mula sa CSS code gamit ang Kopyahin.

Keyboard: i-focus ang tuldok sa Offset pad at gamitin ang mga arrow key para ilipat ito nang 1 px, o 10 px kapag may Shift.

Gumagana ito sa iyong browser. Walang ini-type mo na ipinapadala sa server.

Paano gumagana ang box-shadow

Ang syntax ng isang anino ay box-shadow: [inset] x y blur spread color.

• Inililipat ng x at y ang anino pakanan at pababa. Ang mga negatibong halaga ay inililipat ito pakaliwa at pataas. Kapag nasa itaas ng element ang pinagmumulan ng liwanag, positibo ang y.
• Pinalalambot ng blur ang gilid. Hindi ito puwedeng negatibo. Ang blur na 0 ay nagbibigay ng matigas na kopya ng kahon.
• Pinalalaki (positibo) o pinaliliit (negatibo) ng spread ang anino bago ito i-blur. Ang negatibong spread na may malaking y ay nagpapanatili ng anino sa ilalim ng element sa halip na sa paligid nito.
• Karaniwang may transparency ang kulay. Isinusulat ng tool na ito ang mga opaque na kulay bilang HEX at ang mga translucent bilang rgba(), na nauunawaan ng lahat ng browser. Kung maglalagay ka ng kulay na may alpha channel na, imumultiply ito ng Opacity (%).
• Inilalagay ng inset ang anino sa loob ng border, para bang nakabaon ang kahon sa pahina.

Sinusunod ng anino ang border-radius ng element at hindi ito kailanman nagbabago ng layout: hindi ito kumukuha ng espasyo at hindi nagdudulot ng scrollbar.

Bakit maglalagay ng ilang anino?

Ang totoong anino ay hindi iisang malabong parihaba. May maliit, madilim at masikip na anino sa ilalim mismo ng bagay, at malaki, mahina at malabong anino na kumakalat nang mas malayo. Ang pagpapatong ng dalawa hanggang limang layer ay ginagaya ito at mas natural ang itsura kaysa sa isang mabigat na anino. Dinodoble ng preset na Patong-patong ang offset at blur sa bawat hakbang na may mababang opacity. Ginagaya naman ng Elevation ang tatlong-layer na anino ng Material Design.

Ang unang layer sa listahan ang ipininta sa ibabaw ng iba, tulad mismo ng nasa CSS na halaga. Mahalaga ang ayos lalo na kapag pinaghalo ang inset at panlabas na anino o gumamit ng matitingkad na kulay.

Neumorphism

Gumagamit ang Neumorphism (“soft UI”) ng dalawang anino sa element na kapareho ng kulay ng background nito: isang madilim na inilipat pababa at pakanan, at isang maliwanag na inilipat pataas at pakaliwa. Itinatakda ng preset na Neumorphism ang parehong kulay sa #e0e5ec. Tandaan na mababa ang contrast ng istilong ito, kaya ang mga button na gawa rito ay nangangailangan ng malinaw na focus state at nababasang label.