Kuidas luua CSS-kastivari ja kopeerida selle kood?

Reguleeri liugureid x- ja y-nihke, hägususe, leviku, värvi ja läbipaistvuse jaoks, jälgides reaalajas eelvaadet. Seejärel vajuta CSS-väljundis Kopeeri. Võid alustada ka eseadetest nagu Pehme, Helendav või Material 8.

Kas ma saan ühele elemendile mitu varju lisada?

Jah. Vajuta + Lisa varjukiht, et lisada veel kihte, seejärel järjesta need ümber, peida või eemalda igaüks. Kihid ühendatakse üheks box-shadow väärtuseks komadega.

Kuidas teha sisevarju?

Vali kiht ja lülita sisse Sisevari või laadi Sisemine eelseade. Väljund sisaldab seejärel selle kihi jaoks märksõna inset.

Kas ma saan tavalise CSS-i asemel Tailwindi klassi?

Jah. Lisaks CSS-i deklaratsioonile väljastab tööriist Tailwindi suvalise väärtusega klassi kujul shadow-[...], kus tühikud on asendatud alakriipsudega, valmis märgendisse kleepimiseks.

Kas varju asukoha määramiseks on liuguritest lihtsam viis?

Jah. Lohista eelvaatekasti, et liigutada aktiivse kihi varju, ja hoia all Shift-klahvi täpseks juhtimiseks. Samuti saad muuta eelvaate tausta ja kasti värvi, et näha, kuidas vari sinu kujundusel välja näeb.

Kas see on tõesti tasuta?

Jah. Iga tööriist on tasuta kasutamiseks, ei nõua kontot ega krediitkaarti. Töö toimub sinu seadmes, mitte meie serverites, mis võimaldabki seda tasuta pakkuda.

Kas see töötab mobiilseadmetes?

Jah. See töötab tänapäevastes mobiilibrauserites iOS-is ja Androidis ning midagi pole vaja installida.

🎨

CSS-kastivarju generaator tasuta

Visuaalne CSS box-shadow ehitaja reaalajas eelvaatega, mitmekihilise virnastamise, värvivalija, sissesüvise lülitamise ja ühe klõpsuga kopeerimisega. Sisaldab Materiali, neumorfismi ja sädelevu eelseadistusi.

Töötab sinu brauserisRegistreerimist pole, hüpikaknaid poleSisselogimist ei nõutaIgavesti tasuta

Töötab võrguühenduseta pärast laadimist

Eelvaade taustast

Lohistage kasti, et paigutada aktiivse kihi vari - täpsema kontrolli saamiseks hoidke Shift-klahvi all

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

Eseaded

Kasti värv

Äärise raadius (16px)

x (0px)

y (4px)

hägusus (12px)

levik (0px)

Värv

Läbipaistvus (15%)

Sisevari

Levinud kasutusviisid

Kaardi UI varjudEhitage elegantne kaardi varjud armatuuride, tooteid võrgukonnade ja armatuuride jaoks.
Nuppu vajutamise efektidEhitage nuppu varjud, mis jäljendavad tegelike maailma sügavust ja vajutamise olekuid.
Neumorphism pehme UILooge pehme UI neumorphism välimusega paaris heledalt + tumedate varjudega.
Modal & Popover varjudLooge tõstetud, ujuv tunne dialoogide ja rippmenüüde jaoks.
Helendavad ja fookusring efektidLooge helendavad aktsendid efektid, fookusrõngad ja neoonilaadsed esiletõstud.

Kuidas see töötab

Box-shadow generaator on täielikult kliendipoolne React'i tööriist — servet, teeki pole. See hoiab varjukihi objektide loendit olekus, koostab kehtivaid CSS box-shadow stringe igal muudatusel käsitsi kirjutatud rgba() formaatija abil ning rakendab need otse eelvaate-elemendile React'i style-propi kaudu, nii et brauseri enda renderdusmootor joonistab tulemuse koheselt.

1
Kihi parameetrid toidavad formaatijat
Iga varjukiht salvestab x/y nihked, hägususe, leviku, kuueteistkümnendvärvi ja läbipaistmatuse väärtuse. Igal muudatusel teisendab väike shadowToCss funktsioon kuueteistkümnendvärvi RGB komponentideks regulaaravaldise abil ning koostab seejärel rgba() stringi — näiteks 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Mitu kihti ühendatakse komadega.
2
Brauser renderdab reaalajas eelvaate
Koostatud string omistatakse boxShadow stiiliomadusele div-elemendil otse JSX-is. React uuendab DOM-atribuuti ja brauseri CSS-mootor maalib varju koheselt — lõuendit ega WebGL-i pole kaasatud, ainult natiivne CSS-renderdamine.
3
Lohistades positsioneerimine kasutab Pointer Events API-t
Eelvaate-kasti klõpsamine ja lohistamine kutsub setPointerCapture'i elemendil, seejärel jälgib onPointerMove deltasid, et uuendada aktiivse kihi x- ja y-nihkeid reaalajas. Shift-klahvi hoidmine rakendab 0,25x skaalategurit täpseks positsioneerimiseks.
4
Väljund kopeeritakse lõikelauale
Tööriist toodab samast kihiandmestikust kaks väljundvormingut: standardse CSS box-shadow deklaratsiooni ning Tailwindi suvaväärtuse klassi (shadow-[...]), kus tühikud asendatakse alakriipsudega vastavalt Tailwindi süntaksireeglitele. Ühe klõpsuga kopeerimine kasutab navigator.clipboard.writeText'i.