CSS box-shadow қалай жасап, кодты көшіремін?

X және Y ығысуы, бұлдырлық, таралу, Түс және Мөлдірлік слайдерлерін реттеп, тікелей алдын ала қарауды бақылаңыз. Содан кейін CSS шығысындағы Көшіру түймесін басыңыз. Сондай-ақ Жұмсақ, Жарқыл немесе Material 8 сияқты Дайын үлгілерден бастауға болады.

Бір элементке бірнеше көлеңкені қабаттастыра аламын ба?

Иә. + Тағы бір көлеңке қабаты қосу түймесін басып, қосымша қабаттар қосыңыз, содан кейін олардың ретін өзгертіңіз, Жасыру немесе Жою. Қабаттар бір box-shadow мәнінде үтірмен біріктіріледі.

Ішкі көлеңкені қалай жасаймын?

Қабатты таңдап, Ішкі көлеңке қосқышын іске қосыңыз немесе Ішкі дайын үлгісін жүктеңіз. Содан кейін шығыс сол қабат үшін inset кілт сөзін қамтиды.

Қарапайым CSS орнына Tailwind класын ала аламын ба?

Иә. CSS жарияланымынан басқа, құрал shadow-[...] түріндегі Tailwind еркін мәнді класын шығарады, мұнда бос орындар астын сызумен ауыстырылады, оны тікелей белгілеуіңізге қоюға дайын.

Көлеңке орнын слайдерлерден оңайырақ орнатудың жолы бар ма?

Иә. Белсенді қабаттың көлеңкесін жылжыту үшін алдын ала қарау өрісін сүйреңіз, дәл басқару үшін Shift пернесін басып тұрыңыз. Сондай-ақ, көлеңкенің дизайныңызда қалай көрінетінін тексеру үшін Алдын-ала қарау фоны мен Қорап түсін өзгерте аласыз.

Шынымен тегін бе?

Иә. Әрбір құрал тегін, аккаунтсыз және несие картасынсыз қолданылады. Жұмыс серверлерімізде емес, құрылғыңызда орындалады, бұл оның тегін жұмыс істеуін қамтамасыз етеді.

Мобильді құрылғыларда жұмыс істей ме?

Иә. iOS және Android жүйелеріндегі заманауи мобильді браузерлерде ештеңе орнатпай жұмыс істейді.

🎨

CSS box-shadow генераторы — тегін

Тірі алдын ала қарау, көп қабатты жинақтау, түс таңдағыш, кірістіру ауыстырғышы және бір рет басу арқылы көшіруді қамтитын CSS box-shadow визуалды конструкторы. Material, нейморфизм және жарқырау алдын ала орнатуларын қамтиды.

Браузерде жұмыс істейдіТіркелу жоқ, қалқымалы терезелер жоқКіруді қажет етпейдіМәңгілік тегін

Жүктелгеннен кейін офлайн жұмыс істейді

Алдын-ала қарау фоны

Ағымды қабаттың көлеңін орналастыру үшін құтысын сүйеніңіз - нақтылау үшін Shift ұстаңыз

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

Дайын үлгілер

Қорап түсі

Жиек радиусы (16px)

x (0px)

y (4px)

бұлдырату (12px)

жаю (0px)

Түс

Мөлдірлік (15%)

Ішкі көлеңке

Жиі қолданылуы

Card UI ShadowsСүлеулік карточка көлеңдерін ынамсыз, өнім тораптар және ынамсыз арасын құру.
Button Press EffectsҚұнды өндеуінің көлеңдерін құру шындық тереңдігін және басым күйін және.
Neumorphism Soft UIЖалпы UI neumorphism төрт жетінді көлеңдерімен құру.
Modal & Popover ShadowsДиалог және нүспелеу құслар арасындағы денсаулық сезімін құру.
Glow & Focus Ring EffectsЖарқын әсерлері, фокус сақинасы және неон стильді ерекшелейтін құрыңыз.

Қалай жұмыс істейді

box-shadow генераторы — толығымен клиент жағындағы React құралы — сервер жоқ, кітапхана жоқ. Ол көлеңке қабаты нысандарының тізімін күйде сақтайды, әр өзгеріс сайын қолмен жазылған rgba() пішімдегіш арқылы жарамды CSS box-shadow жолдарын жинақтайды және оларды React-тың style пропы арқылы алдын ала қарау элементіне тікелей қолданады, сондықтан браузердің өз өңдеу қозғалтқышы нәтижені лезде сызады.

1
Қабат параметрлері пішімдегішке беріледі
Әр көлеңке қабаты x/y ығысуын, бұлдырлықты, таралуды, он алтылық түсті және мөлдірлік мәнін сақтайды. Әр өзгеріс сайын, кішкентай shadowToCss функциясы он алтылық түсті RGB компоненттеріне тұрақты өрнек арқылы түрлендіреді, содан кейін rgba() жолын жинақтайды — мысалы, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Бірнеше қабат үтірмен біріктіріледі.
2
Браузер тірі алдын ала қарауды өңдейді
Жинақталған жол JSX-те тікелей div элементінің boxShadow стиль қасиетіне тағайындалады. React DOM атрибутын жаңартады, браузердің CSS қозғалтқышы көлеңкені дереу салады — canvas немесе WebGL қатыспайды, тек нативті CSS өңдеу.
3
Сүйреп орналастыру Pointer Events API пайдаланады
Алдын ала қарау жәшігін басу және сүйреу элементте setPointerCapture шақырады, содан кейін белсенді қабаттың x және y ығысуларын нақты уақытта жаңарту үшін onPointerMove дельталарын қадағалайды. Shift ұстау дәл орналастыру үшін 0.25х масштаб коэффициентін қолданады.
4
Шығыс буферге көшіріледі
Құрал бір қабат деректерінен екі шығыс форматын шығарады: стандартты CSS box-shadow декларациясы және Tailwind еркін мән класы (shadow-[...]), мұнда Tailwind синтаксис ережелеріне сай бос орындар астыңғы сызықтармен алмастырылады. Бір түртпелі көшіру navigator.clipboard.writeText пайдаланады.