LibraTool logoLibraTool

Bepul CSS Soya Effekti Generatori

Jonli oldindan ko'rish, ko'p qatlamli stacking, rang tanlagich, ichki (inset) o'zgartirgich va bir bosishda nusxalash bilan CSS box-shadow uchun vizual quruvchi. Material, neumorfizm va porlash tayyor variantlarini o'z ichiga oladi.

Yuklangandan keyin oflayn ishlaydi
Ko'rinish foni

Faol qatlamning soyasini joylashtirish uchun katakchani torting — nozik boshqarish uchun Shift tugmasini bosib turing

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

Tayyor sozlamalar

Qanday ishlaydi

Box-shadow generatori to'liq mijoz tomonidagi React asbobi — server yo'q, kutubxona yo'q. U state'da soya qatlami obyektlari ro'yxatini saqlaydi, har bir o'zgarishda qo'lda yozilgan rgba() formatlagichi yordamida to'g'ri CSS box-shadow satrlarini yig'adi va React'ning style prop'i orqali ularni to'g'ridan-to'g'ri ko'rib chiqish elementiga qo'llaydi, shunda brauzerning o'z ko'rsatish dvigateli natijani darhol chizadi.

  1. 1
    Qatlam parametrlari formatlagichga beriladi
    Har bir soya qatlami x/y siljishlarini, xiralashishni, tarqalishni, olti burchakli rangni va shaffoflik qiymatini saqlaydi. Har bir o'zgarishda, kichik shadowToCss funksiyasi olti burchakli rangni muntazam ifoda bilan RGB komponentlariga o'giradi, so'ng rgba() satrini yig'adi — masalan, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Bir nechta qatlamlar vergul bilan birlashtiriladi.
  2. 2
    Brauzer jonli ko'rib chiqishni chizadi
    Yig'ilgan satr JSX'da to'g'ridan-to'g'ri div elementining boxShadow uslub xususiyatiga tayinlanadi. React DOM atributini yangilaydi, brauzerning CSS dvigateli esa soyani darhol bo'yaydi — kanvas yoki WebGL aralashmaydi, faqat mahalliy CSS ko'rsatish.
  3. 3
    Sudrab joylashtirish Pointer Events API'dan foydalanadi
    Ko'rib chiqish qutisini bosish va sudrash elementda setPointerCapture ni chaqiradi, so'ng faol qatlamning x va y siljishlarini real vaqtda yangilash uchun onPointerMove farqlarini kuzatadi. Shift'ni ushlab turish aniq joylashtirish uchun 0.25x masshtab koeffitsientini qo'llaydi.
  4. 4
    Chiqish buferga nusxalanadi
    Asbob bir xil qatlam ma'lumotidan ikki chiqish formatini ishlab chiqaradi: standart CSS box-shadow deklaratsiyasi va Tailwind ixtiyoriy-qiymat sinfi (shadow-[...]), unda bo'shliqlar Tailwind sintaksis qoidalariga muvofiq pastki chiziq bilan almashtiriladi. Bir bosishli nusxalash navigator.clipboard.writeText dan foydalanadi.

Tegishli asboblar

◖

CSS Burchak Radiusi Generatori

Har bir burchakni mustaqil boshqarish bilan dumaloq burchaklarni vizual tarzda loyihalang. Organik tomchi shakllar uchun elliptik X/Y sintaksisini qo'llab-quvvatlaydi.

Sinab ko'ring
🟦

CSS Grid generatori

CSS gridni vizual tarzda loyihalang — tracklar, birliklar va oraliqlar — va yaratilgan CSS hamda HTML ni nusxalang.

Sinab ko'ring
↔️

CSS Flexbox generatori

Jonli elementlarda flex yo'nalishi, o'ralishi, tekislanishi bilan tajriba o'tkazing — va CSS ni nusxalang.

Sinab ko'ring

Ko'p so'raladigan savollar