🎨

Gjenerues CSS Box Shadow Falas

Ndërtues vizual për CSS box-shadow me parashikim të drejtpërdrejtë, shtresim me shumë nivele, zgjedhës ngjyrash, çelës inset dhe kopjim me një klik. Përfshin preseta Material, neumorfizëm dhe shkëlqim.

Funksionon në shfletuesin tuajPa regjistrim, pa dritare kërcyeseNuk kërkohet hyrjeI lirë përgjithmonë

Funksionon jashtë linje sapo ngarkohet

Sfondi i pamjes paraprake

Tërhiqni kutinë për të pozicionuar hijen e shtresës aktive - mbani Shift për kontroll të hollë

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);

Paracaktime

Ngjyra e kutisë

Rrezja e kufirit (16px)

x (0px)

y (4px)

turbullim (12px)

përhapje (0px)

Ngjyra

Opaciteti (15%)

Hije e brendashkruar

Si funksionon

Gjeneruesi i box-shadow është një mjet React tërësisht nga ana e klientit — pa server, pa bibliotekë. Mban një listë objektesh shtresash hijesh në gjendje, montoi vargje të vlefshme CSS box-shadow në çdo ndryshim duke përdorur një formatues rgba() të shkruar me dorë, dhe i zbaton direkt te një element parashikimi përmes propit style të React-it kështu që motori i vetë vizatimit të shfletuesit e vizaton rezultatin menjëherë.

1
Parametrat e shtresës ushqejnë formatuesin
Çdo shtresë hijeje ruan zhvendosjet x/y, turbullimin, përhapjen, një ngjyrë heks, dhe një vlerë tejdukshmërie. Në çdo ndryshim, një funksion i vogël shadowToCss konverton ngjyrën heks në komponentë RGB me një regex, pastaj monton vargun rgba() — për shembull, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Shtresat e shumta bashkohen me presje.
2
Shfletuesi vizaton parashikimin e drejtpërdrejtë
Vargu i montuar caktohet te vetia stili boxShadow e një elementi div direkt në JSX. React-i përditëson atributin DOM, dhe motori CSS i shfletuesit e boj menjëherë hijen — nuk ka canvas apo WebGL të përfshirë, vetëm vizatim CSS vendas.
3
Pozicionimi me tërheqje përdor API-në Pointer Events
Klikimi dhe tërheqja e kutisë së parashikimit thërret setPointerCapture mbi elementin, pastaj gjurmon deltat onPointerMove për të përditësuar zhvendosjet x dhe y të shtresës aktive në kohë reale. Mbajtja e Shift-it zbaton një faktor shkallëzimi 0.25x për pozicionim të hollë.
4
Dalja kopjohet te clipboard
Mjeti prodhon dy formate dalje nga të njëjtat të dhëna shtrese: një deklaratë standarde CSS box-shadow, dhe një klasë vlere arbitrare Tailwind (shadow-[...]) ku hapësirat zëvendësohen me nënvija sipas rregullave të sintaksës së Tailwind. Kopjimi me një klikim përdor navigator.clipboard.writeText.