Kaip sukurti CSS dėžutės šešėlį ir nukopijuoti kodą?

Nustatykite x ir y poslinkio, suliejimo, išplitimo, Spalvos ir neskaidrumo slankiklius, stebėdami tiesioginę peržiūrą. Tada CSS išvestyje paspauskite Kopijuoti. Taip pat galite pradėti nuo Išankstinių nustatymų, pvz., Minkštas, Švytėjimas ar Material 8.

Ar galiu vienam elementui priskirti kelis šešėlius?

Taip. Paspauskite + Pridėti šešėlio sluoksnį, kad pridėtumėte daugiau sluoksnių, tada keiskite jų tvarką, Paslėpti arba Pašalinti kiekvieną. Sluoksniai sujungiami kableliais į vieną box-shadow reikšmę.

Kaip padaryti vidinį šešėlį?

Pasirinkite sluoksnį ir įjunkite Vidinis šešėlis arba įkelkite Vidinis išankstinį nustatymą. Išvestyje tam sluoksniui bus pridėtas raktažodis inset.

Ar galiu gauti Tailwind klasę vietoj paprasto CSS?

Taip. Be CSS deklaracijos, įrankis pateikia Tailwind savavališkos reikšmės klasę, kurios forma shadow-[...], tarpus pakeičiant pabraukimais, paruoštą įklijuoti į jūsų žymėjimą.

Ar yra paprastesnis būdas nustatyti šešėlio padėtį nei slankikliai?

Taip. Vilkite peržiūros langelį, kad perkeltumėte aktyvaus sluoksnio šešėlį, o tiksliai kontrolei laikykite nuspaudę Shift. Taip pat galite pakeisti Peržiūros foną ir Dėžės spalvą, kad pamatytumėte, kaip šešėlis atrodo jūsų dizaine.

Taip. Kiekvienas įrankis yra nemokamas, nereikia nei paskyros, nei kredito kortelės. Darbas atliekamas jūsų įrenginyje, o ne mūsų serveriuose, todėl jis ir yra nemokamas.

Ar veikia mobiliuosiuose įrenginiuose?

Taip. Veikia šiuolaikinėse mobiliosiose naršyklėse iOS ir Android sistemose, nieko diegti nereikia.

🎨

CSS dėžutės šešėlio generatorius nemokamai

Vizualinis CSS box-shadow kūrimo įrankis su tiesiogine peržiūra, kelių sluoksnių kaupimu, spalvų parinkikliu, vidinio šešėlio perjungikliu ir kopijavimu vienu paspaudimu. Apima „Material“, neomorfizmo ir švytėjimo šablonus.

Veikia jūsų naršyklėjeBe registracijos, be iššokančių langųPrisijungimo nereikiaNemokamai amžinai

Veikia neprisijungus, kai įkeliama

Peržiūros fonas

Vilkite dėžę, kad nustatytumėte aktyvaus sluoksnio šešėlio padėtį — laikykite Shift, kad valdytumėte tiksliau

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

Išankstiniai nustatymai

Dėžės spalva

Kraštų spindulys (16px)

x (0px)

y (4px)

suliejimas (12px)

išplitimas (0px)

Spalva

Neskaidrumas (15%)

Vidinis šešėlis

Dažniausi naudojimo būdai

Kortelės UI šešėliaiSukurkite elegantius kortelės šešėlius prietaisams, produktų tinkleliam ir prietaisams.
Mygtuko paspaudimo efektaiSukurkite mygtuko šešėlius, kurie imitates realaus pasaulio gylį ir paspaudimo būsenas.
Neumorphism minkštas UISukurkite minkštą UI neumorphism pavidalą su suporuotais šviečiais + tamsiais šešėliais.
Modal & Popover šešėliaiSukurkite pakilios, plaukiojančios jausmos dialogo laukeliam ir slankiams meniu.
Svytejimo ir fokuso ziedo efektaiSukurkite svytincjus akcentinius efektus, fokusuotus ziedus ir neoniu stiliu zymejimus.

Kaip tai veikia

Box-shadow generatorius yra visiškai kliento pusėje veikiantis React įrankis — jokio serverio, bibliotekos. Jis būsenoje saugo šešėlio sluoksnių objektų sąrašą, kiekvieno pakeitimo metu sukonstruoja galiojančias CSS box-shadow eilutes naudodamas rankomis parašytą rgba() formatuotoją ir pritaiko jas tiesiogiai peržiūros elementui per React style savybę, kad pati naršyklės atvaizdavimo sistema akimirksniu nupieštų rezultatą.

1
Sluoksnio parametrai maitina formatuotoją
Kiekvienas šešėlio sluoksnis saugo x/y poslinkius, suliejimą, sklaidą, HEX spalvą ir permatomumo reikšmę. Kaskart pasikeitus, maža shadowToCss funkcija konvertuoja HEX spalvą į RGB komponentus reguliariuoju reiškiniu, tada sukonstruoja rgba() eilutę — pavyzdžiui, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Keli sluoksniai sujungiami kableliais.
2
Naršyklė atvaizduoja gyvą peržiūrą
Sukonstruota eilutė priskiriama div elemento boxShadow stiliaus savybei tiesiai JSX kode. React atnaujina DOM atributą, o naršyklės CSS variklis iš karto nupiešia šešėlį — čia nėra jokio canvas ar WebGL, tik natūralus CSS atvaizdavimas.
3
Tempimas pozicijai keisti naudoja Pointer Events API
Spustelėjus ir tempiant peržiūros dėžutę, elementui iškviečiamas setPointerCapture, tada sekami onPointerMove poslinkiai, realiu laiku atnaujinant aktyvaus sluoksnio x ir y poslinkius. Laikant Shift, taikomas 0,25x mastelio koeficientas tiksliam pozicionavimui.
4
Išvestis kopijuojama į iškarpinę
Įrankis iš tų pačių sluoksnio duomenų sukuria du išvesties formatus: standartinę CSS box-shadow deklaraciją ir Tailwind savavalės reikšmės klasę (shadow-[...]), kurioje tarpai pakeičiami pabraukimo brūkšneliais pagal Tailwind sintaksės taisykles. Kopijavimas vienu paspaudimu naudoja navigator.clipboard.writeText.