Kif noħloq box-shadow f'CSS u nikkopja l-kodiċi?

Aġġusta l-isliders għall-offset x u y, blur, spread, Kulur u Opacity, waqt li ssegwi l-ħarsa diretta. Imbagħad agħfas Kopja fir-riżultat tas-CSS. Tista' wkoll tibda minn Presets bħal Artab, Tiddi jew Material 8.

Nista' npoġġi diversi dellijiet fuq element wieħed?

Iva. Agħfas + Żid saff ta' dell biex iżżid aktar saffi, imbagħad biddel l-ordni tagħhom, Aħbi jew Neħħi kull wieħed. Is-saffi jingħaqdu bil-virgoli f'valur wieħed ta' box-shadow.

Kif nagħmel dell intern?

Agħżel saff u attiva Dell intern, jew uża l-preset Inset. Ir-riżultat imbagħad jinkludi l-kelma ewlenija inset għal dak is-saff.

Nista' nikseb klassi ta' Tailwind minflok CSS sempliċi?

Iva. Minbarra d-dikjarazzjoni CSS, l-għodda toħroġ klassi ta' valur arbitrarju ta' Tailwind fil-forma shadow-[...], bi spazji mibdula b'underscores, lesta biex tpoġġiha fil-markup tiegħek.

Hemm mod aktar faċli biex tissettja l-pożizzjoni tad-dell mill-isliders?

Iva. Dragga l-kaxxa tal-preview biex tmexxi d-dell tas-saff attiv, u żomm Shift għal kontroll preċiż. Tista' wkoll tbiddel Ħarsa primedja tal-isfond u Kulur tal-kaxxa biex tara kif jidher id-dell fuq id-disinn tiegħek.

Iva. Kull għodda tista' tintuża b'xejn, mingħajr kont u mingħajr karta ta' kreditu. Ix-xogħol isir fuq it-tagħmir tiegħek minflok fuq is-servers tagħna, u huwa dan li jippermettilha tibqa' taħdem b'xejn.

Taħdem fuq il-mowbajl?

Iva. Jaħdem fil-browsers moderni tal-mowbajl fuq iOS u Android, mingħajr xejn x'tinstalla.

🎨

Ġeneratur ta' Box Shadow CSS b'xejn

Builder viżwali għal box-shadow CSS b'preview ħaj, stacking multi-layer, colour picker, toggle inset, u kopja b'klikk wieħed. Jinkludi presets Material, neumorphism, u glow.

Jaħdem fil-browser tiegħekMingħajr reġistrazzjoni, mingħajr pop-upsEbda login meħtieġĦieles għal dejjem

Jaħdem offline ladarba mgħobbi

Ħarsa primedja tal-isfond

Iġbed il-kaxxa biex tippożizzjona l-ombra tal-layer attiva - żomm Shift għall-kontroll fin

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

Presets

Kulur tal-kaxxa

Radju tal-bordura (16px)

x (0px)

y (4px)

blur (12px)

spread (0px)

Kulur

Opakità (15%)

Dell intern

Użi komuni

Card UI ShadowsIbni skuggi ta' kards eleganti għal dashboards, grid ta' prodotti u dashboards.
Button Press EffectsIbni skuggi ta' buttons li jimilaw id-dinja reali profondità u press states.
Neumorphism Soft UIOħloq il-ħarsa tal-UI soft-UI neumorphism b'shadows ta' qbil ta' dawl + skur.
Modal & Popover ShadowsOħloq il-ħarsa ta' mgħalija, floating għall-dialogi u dropdowns.
Glow & Focus Ring EffectsĦoloq effetti ta' splendur, ċirkolu tal-fokus, u highlights stil neon.

Kif Taħdem

Il-ġeneratur tal-box-shadow huwa għodda React kompletament min-naħa tal-klijent — l-ebda server, l-ebda librerija. Iżomm lista ta' oġġetti ta' saffi ta' dell fl-istat, jibni strings CSS box-shadow validi f'kull bidla bl-użu ta' formatter rgba() miktub bl-idejn, u japplikahom direttament għal element ta' anteprima permezz tal-proprjetà style ta' React biex il-magna ta' rendjar tal-browser stess tiddisinja r-riżultat minnufih.

1
Il-parametri tas-saff jitmajgħu lill-formatter
Kull saff ta' dell jaħżen offsets ta' x/y, blur, spread, kulur hex, u valur ta' opaċità. F'kull bidla, funzjoni żgħira shadowToCss tikkonverti l-kulur hex għal komponenti RGB bir-regex, imbagħad tibni l-istring rgba() — pereżempju, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Saffi multipli jingħaqdu bil-virgoli.
2
Il-browser jirrendja l-anteprima ħajja
L-istring mibni jiġi assenjat għall-proprjetà style boxShadow ta' element div direttament f'JSX. React taġġorna l-attribut DOM, u l-magna CSS tal-browser tpittar id-dell minnufih — l-ebda canvas jew WebGL involuti, sempliċement rendjar CSS nattiv.
3
Il-pożizzjonar bit-tiġbid juża l-Pointer Events API
Il-klikk u t-tiġbid tal-kaxxa tal-anteprima jsejjaħ setPointerCapture fuq l-element, imbagħad isegwi d-deltas ta' onPointerMove biex jaġġorna l-offsets x u y tas-saff attiv f'ħin reali. Iż-żamma ta' Shift tapplika fattur ta' skala ta' 0.25x għal pożizzjonar preċiż.
4
Il-ħruġ jiġi kkopjat fil-clipboard
L-għodda tipproduċi żewġ formats ta' ħruġ mid-data tal-istess saff: dikjarazzjoni CSS box-shadow standard, u klassi ta' valur arbitrarju ta' Tailwind (shadow-[...]) fejn l-ispazji jiġu sostitwiti b'underscores skont ir-regoli tas-sintassi ta' Tailwind. Il-kopja b'click wieħed tuża navigator.clipboard.writeText.