Sut mae creu CSS box-shadow a chopïo'r cod?

Addaswch y llithrwyr ar gyfer dadleoliad x ac y, aneglurder (blur), gwasgariad (spread), Lliw a Tryloywder, gan wylio'r rhagolwg byw. Yna pwyswch Copïo yn yr allbwn CSS. Gallwch hefyd ddechrau o Rhagosodiadau megis Meddal, Llewyrch neu Material 8.

A allaf bentyrru sawl cysgod ar un elfen?

Gallwch. Pwyswch + Ychwanegu haen cysgod arall i ychwanegu mwy o haenau, yna aildrefnwch nhw, neu defnyddiwch Cuddio neu Dileu ar bob un. Caiff yr haenau eu huno â chomas mewn un gwerth box-shadow.

Sut mae gwneud cysgod mewnol?

Dewiswch haen a threwch Cysgod mewnol ymlaen, neu lwythwch y rhagosodiad Mewnosod. Bydd yr allbwn wedyn yn cynnwys y gair allweddol inset ar gyfer yr haen honno.

A allaf gael dosbarth Tailwind yn lle CSS plaen?

Gallwch. Yn ogystal â'r datganiad CSS, mae'r offeryn yn cynhyrchu dosbarth gwerth mympwyol Tailwind ar y ffurf shadow-[...], gyda bylchau wedi'u disodli gan danlinellau, yn barod i'w ludo i'ch marcio.

Oes ffordd haws o osod safle'r cysgod na'r llithrwyr?

Oes. Llusgwch y blwch rhagolwg i symud cysgod yr haen weithredol, a daliwch Shift am reolaeth fanwl. Gallwch hefyd newid Rhagolwg cefndir a Lliw blwch i weld sut mae'r cysgod yn edrych ar eich dyluniad.

A yw'n rhad ac am ddim go iawn?

Ydy. Mae pob offeryn yn rhad ac am ddim i'w ddefnyddio, heb gyfrif a heb gerdyn credyd. Mae'r gwaith yn rhedeg ar eich dyfais yn hytrach nag ar ein gweinyddion ni, a dyna sy'n caniatáu iddo fod yn rhad ac am ddim i'w redeg.

A yw'n gweithio ar ffôn symudol?

Gall. Mae'n rhedeg ym mhorwyr symudol cyfredol iOS ac Android, heb ddim i'w osod.

🎨

Generadur Cysgod Blwch CSS am ddim

Adeiladwr gweledol ar gyfer box-shadow CSS gyda rhagolwg byw, haenu aml-haen, dewiswyr lliw, toglo mewnol, a chopïo un-clic. Yn cynnwys rhagosodiadau Material, neumorffiaeth, a glow.

Yn rhedeg yn eich porwrDim cofrestru, dim ffenestri naidNid oes angen mewngofnodiAm ddim am byth

Yn gweithio all-lein ar ôl llwytho

Rhagolwg cefndir

Lluchiwch y blwch i leoli cysgod yr haen weithredol - dalwch Shift am reolaeth fanwl

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

Rhagosodiadau

Lliw blwch

Radiws ymyl (16px)

x (0px)

y (4px)

niwl (12px)

lledaeniad (0px)

Lliw

Tryloywder (15%)

Cysgod mewnol

Defnyddiau cyffredin

Card UI ShadowsAdeiladu cysgodion cerdyn elegaidd ar gyfer dashboards, grid cynnyrch a dashboards.
Button Press EffectsAdeiladu cysgodion botwm sy'n dynwared dyfnder go iawn a gwladwriaethau gwasgu.
Neumorphism Soft UICreu'r olwg neumorphism soft-UI gyda chysgodion pâr golau + tywyll.
Modal & Popover ShadowsCreu'r deimlad codi, arnofio ar gyfer dialogi ac arolygwyr.
Glow & Focus Ring EffectsCrëwch effaith disgleirio, cylchoedd ffocws, a thyniadau arddull neon.

Sut Mae'n Gweithio

Mae'r generadur box-shadow yn offeryn React ochr-cleient llwyr — dim gweinydd, dim llyfrgell. Mae'n cynnal rhestr o wrthrychau haen cysgod mewn cyflwr, yn cydosod llinynnau CSS box-shadow dilys ar bob newid gan ddefnyddio fformatiwr rgba() wedi'i ysgrifennu â llaw, ac yn eu cymhwyso'n uniongyrchol i elfen rhagolwg drwy briodwedd arddull React fel bod injan rendro'r porwr ei hun yn tynnu'r canlyniad ar unwaith.

1
Mae paramedrau haen yn bwydo'r fformatiwr
Mae pob haen cysgod yn storio ansymudiadau x/y, aneglurder, taeniad, lliw hecs, a gwerth didreiddedd. Ar bob newid, mae ffwythiant shadowToCss bach yn trosi'r lliw hecs i gydrannau RGB gyda mynegiad rheolaidd, yna'n cydosod y llinyn rgba() — er enghraifft, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Mae haenau lluosog yn cael eu cydgadwyno ag atalnodau.
2
Mae'r porwr yn rendro'r rhagolwg byw
Mae'r llinyn a gydosodwyd yn cael ei neilltuo i briodwedd arddull boxShadow elfen div yn uniongyrchol yn JSX. Mae React yn diweddaru'r priodwedd DOM, ac mae injan CSS y porwr yn peintio'r cysgod ar unwaith — nid oes cynfas na WebGL yn gysylltiedig, dim ond rendro CSS brodorol.
3
Mae llusgo-i-safle'n defnyddio'r Pointer Events API
Mae clicio a llusgo'r blwch rhagolwg yn galw setPointerCapture ar yr elfen, yna'n olrhain deltau onPointerMove i ddiweddaru ansymudiadau x a y'r haen weithredol mewn amser real. Mae dal Shift yn cymhwyso ffactor graddfa 0.25x ar gyfer safleoli manwl gywir.
4
Mae'r allbwn yn cael ei gopïo i'r clipfwrdd
Mae'r offeryn yn cynhyrchu dau fformat allbwn o'r un data haen: datganiad CSS box-shadow safonol, a dosbarth gwerth-mympwyol Tailwind (shadow-[...]) lle mae bylchau'n cael eu disodli â thanlinellau yn ôl rheolau cystrawen Tailwind. Mae copïo un-clic yn defnyddio navigator.clipboard.writeText.