Kā izveidot CSS lodziņa ēnu un nokopēt kodu?

Pielāgojiet slīdņus x un y nobīdei, izplūdumam, izkliedei, krāsai un necaurredzamībai, vērojot priekšskatījumu. Pēc tam CSS izvadē nospiediet Kopēt. Varat arī sākt ar Iepriekšējiem iestatījumiem, piemēram, Maigs, Mirdzums vai Material 8.

Vai varu vienam elementam pievienot vairākas ēnas?

Jā. Nospiediet + Pievienot ēnas slāni, lai pievienotu vairāk slāņu, pēc tam pārkārtojiet tos, paslēpiet vai noņemiet katru. Slāņi tiek apvienoti ar komatiem vienā box-shadow vērtībā.

Kā izveidot iekšēju ēnu?

Izvēlieties slāni un ieslēdziet Iekšēja ēna vai ielādējiet Iekšējs sākotnējo iestatījumu. Izvadē šim slānim tiks iekļauts atslēgvārds inset.

Vai varu iegūt Tailwind klasi, nevis parastu CSS?

Jā. Papildus CSS deklarācijai rīks izvada Tailwind patvaļīgas vērtības klasi formā shadow-[...], kur atstarpes aizstātas ar pasvītrojumiem, gatavu ievietošanai jūsu iezīmēšanas kodā.

Vai ir vienkāršāks veids, kā iestatīt ēnas pozīciju, nekā izmantot slīdņus?

Jā. Velciet priekšskatījuma lodziņu, lai pārvietotu aktīvā slāņa ēnu, un turiet Shift precīzākai kontrolei. Varat arī mainīt Priekšskatījuma fonu un Lodziņa krāsu, lai redzētu, kā ēna izskatās uz jūsu dizaina.

Vai tas tiešām ir bezmaksas?

Jā. Katrs rīks ir bezmaksas, bez konta un kredītkartes. Darbs notiek jūsu ierīcē, nevis mūsu serveros, tāpēc tas ir bezmaksas.

Vai tas darbojas mobilajā ierīcē?

Jā. Tas darbojas mūsdienu mobilajos pārlūkos iOS un Android ierīcēs, nekas nav jāinstalē.

🎨

CSS lodziņa ēnas ģenerētājs bez maksas

Vizuālais CSS box-shadow veidotājs ar tiešraides priekšskatījumu, vairāku slāņu kārtošanu, krāsu izvēlētāju, ielikuma pārslēgšanu un vienas pogas kopēšanu. Ietver Material, neiromorfisma un mirdzuma iepriekšiestatījumus.

Darbojas pārlūkprogrammāBez reģistrācijas, bez uznirstošiem logiemNav nepieciešama pieteikšanāsBezmaksas uz visiem laikiem

Darbojas bezsaistē pēc ielādes

Priekšskatījuma fons

Velciet lodziņu, lai novietotu aktīvā slāņa ēnu — turiet Shift, lai veiktu fīnu regulēšanu

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

Iepriekšēji iestatījumi

Lodziņa krāsa

Malas rādiuss (16px)

x (0px)

y (4px)

izplūdums (12px)

izplatīšanās (0px)

Krāsa

Necaurredzamība (15%)

Iekšēja ēna

Biežākie lietojumi

Karšu UI ēnasVeidojiet elegantus karšu ēnas instrumentiem, produktu režģiem un instrumentiem.
Pogas spiedes efektiVeidojiet pogas ēnas, kas imitē reālas pasaules dziļumu un spiedes stāvokļus.
Neumorphism Soft UIIzveidojiet mīksto UI neumorphism izskatīt ar pāru gaismu + tumšiem ēnām.
Modal & Popover ēnasIzveidojiet paceltus, peldošus jūtas dialogiem un nolaižamajiem izvēlnēm.
Spīdes un fokusa gredzena efektiIzveidojiet spīdošus akcenta efektus, fokusa gredzenus un neons-stila izcelšanu.

Kā tas darbojas

box-shadow ģenerators ir pilnībā klienta puses React rīks — nav servera, nav bibliotēkas. Tas uztur ēnu slāņu objektu sarakstu stāvoklī, saliek derīgas CSS box-shadow virknes ar katru izmaiņu, izmantojot pašrakstītu rgba() formatētāju, un pielieto tās tieši priekšskatījuma elementam ar React style prop, lai pārlūkprogrammas pašs renderēšanas dzinējs uzreiz uzzīmētu rezultātu.

1
Slāņa parametri padod formatētāju
Katrs ēnas slānis glabā x/y nobīdes, izplūdumu, izplešanos, heksadecimālo krāsu un necaurspīdīguma vērtību. Ar katru izmaiņu neliela shadowToCss funkcija konvertē heksadecimālo krāsu uz RGB komponentiem ar regulāro izteiksmi, tad saliek rgba() virkni — piemēram, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Vairāki slāņi tiek savienoti ar komatiem.
2
Pārlūkprogramma renderē dzīvo priekšskatījumu
Saliktā virkne tiek piešķirta boxShadow stila īpašībai div elementam tieši JSX. React atjaunina DOM atribūtu, un pārlūkprogrammas CSS dzinējs uzreiz uzzīmē ēnu — nav iesaistīts neviens audekls vai WebGL, tikai vietējā CSS renderēšana.
3
Vilkšana pozicionēšanai izmanto Pointer Events API
Klikšķināšana un priekšskatījuma kastes vilkšana izsauc setPointerCapture elementam, tad izseko onPointerMove izmaiņas, lai atjauninātu aktīvā slāņa x un y nobīdes reālajā laikā. Turot Shift, tiek pielietots 0.25x mēroga faktors precīzai pozicionēšanai.
4
Izvade tiek nokopēta starpliktuvē
Rīks rada divus izvades formātus no tiem pašiem slāņu datiem: standarta CSS box-shadow deklarāciju un Tailwind patvaļīgas vērtības klasi (shadow-[...]), kur atstarpes tiek aizstātas ar apakšsvītrām pēc Tailwind sintakses noteikumiem. Kopēšana ar vienu klikšķi izmanto navigator.clipboard.writeText.