Gineadóir Scáth Bosca (box-shadow)

Conas an gineadóir scátha boscaí a úsáid

1. Tosaigh le réamhshocrú, nó coimeád an scáth Bog réamhshocraithe. Tairgeann an tsraith Réamhshocruithe Bog, Crua, Sraitheach, Airde, Neumorphism, Istigh agus Glioscarnach.
2. In Sraitheanna scátha, cliceáil sraith chun í a roghnú. Is féidir gach sraith a bhogadh le Bog suas agus Bog síos, nó a scriosadh le Bain. Déanann Cuir sraith leis cóip den tsraith roghnaithe ionas gur féidir leat cóip a mhionathrú.
3. Cuir an tsraith roghnaithe in eagar faoi Cuir an tsraith roghnaithe in eagar: tarraing an ponc sa phaiste Fritháireamh, nó úsáid na sleamhnáin agus na réimsí uimhreacha do Fritháireamh cothrománach (px), Fritháireamh ingearach (px), Doiléiriú (px) agus Scaipeadh (px).
4. Roghnaigh Dath an scátha leis an roghnóir datha nó clóscríobh aon dath CSS sa réimse cóid, ansin socraigh an Teimhneacht (%). Tic Inset (scáth istigh) chun an scáth a tharraingt taobh istigh den bhosca.
5. Coigeartaigh na Socruithe réamhamhairc (Dath an bhosca, Dath an chúlra, Gath cúinne (px)) chun an scáth a fheiceáil ar do fhíordhathanna. Ní dhéanann siad difear ach don réamhamharc.
6. Cóipeáil an dearbhú ón Cód CSS leis an gcnaipe Cóipeáil.

Méarchlár: fócasaigh an ponc sa phaiste Fritháireamh agus úsáid na heochracha saighde chun é a bhogadh 1 px, nó 10 px le Shift.

Oibríonn an uirlis seo i do bhrabhsálaí agus ní chuirtear aon rud chuig freastalaí.

Conas a oibríonn box-shadow

Is é comhréir scátha amháin box-shadow: [inset] x y blur spread color.

• Bogann x agus y an scáth ar dheis agus síos. Bogann luachanna diúltacha ar chlé agus suas é. Ciallaíonn foinse solais os cionn na heiliminte y dearfach.
• Maolaíonn doiléiriú (blur) an t-imeall. Ní féidir é a bheith diúltach. Tugann doiléiriú 0 cóip le himeall crua den bhosca.
• Méadaíonn (dearfach) nó laghdaíonn (diúltach) scaipeadh (spread) an scáth sula ndoiléirítear é. Coimeádann scaipeadh diúltach le y mór an scáth faoin eilimint seachas timpeall uirthi.
• Iompraíonn dath trédhearcacht de ghnáth. Scríobhann an uirlis seo dathanna teimhneacha mar HEX agus dathanna leaththrédhearcacha mar rgba(), rud a thuigeann gach brabhsálaí. Má chlóscríobhann tú dath a bhfuil cainéal alfa aige cheana, iolraíonn an Teimhneacht (%) é.
• Cuireann inset an scáth taobh istigh den imeall, amhail is dá mbeadh an bosca brúite isteach sa leathanach.

Leanann an scáth border-radius na heiliminte agus ní athraíonn sé an leagan amach riamh: ní ghlacann sé spás agus ní spreagann sé barraí scrollaithe.

Cén fáth sraitheanna iolracha a úsáid?

Ní dronuilleog dhoiléir amháin iad fíorscáthanna. Suíonn scáth beag, dorcha, dlúth díreach faoin réad, agus scaipeann scáth mór, lag, doiléir níos faide ar shiúl. Déanann dhá shraith go cúig shraith cruachta aithris air seo agus tá cuma i bhfad níos nádúrtha air ná ar scáth trom amháin. Déanann an réamhshocrú Sraitheach an fritháireamh agus an doiléiriú a dhúbailt ag gach céim le teimhneacht íseal, teicníc atá coitianta i go leor córas dearaidh. Aithrisíonn Airde scáthanna trí shraith Material Design.

Péinteáiltear an chéad sraith sa liosta ar bharr na gcinn eile, díreach mar atá i luach CSS. Is tábhachtaí an t-ord nuair a mheasctar scáthanna inset agus seachtracha nó nuair a úsáidtear dathanna láidre.

Neumorphism

Úsáideann neumorphism (“soft UI”) dhá scáth ar eilimint a bhfuil an dath céanna aici lena cúlra: ceann dorcha fritháirithe síos agus ar dheis, agus ceann éadrom fritháirithe suas agus ar chlé. Socraíonn an réamhshocrú Neumorphism an dá dhath go #e0e5ec. Bí ar an eolas go bhfuil codarsnacht íseal sa stíl seo, mar sin teastaíonn staid fócais shoiléir agus lipéid inléite ó chnaipí a thógtar léi.