LibraTool logoLibraTool

Акысыз CSS Box Shadow генератору

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

Жүктөлгөндөн кийин оффлайн иштейт
Алдын ала көрүнүштүн фону

Активдүү катмардын көлөкөсүн жайгаштыруу үчүн кутучаны сүйрөңүз - так жөндөө үчүн Shift'ти басып туруңуз

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

Даяр үлгүлөр

Бул кантип иштейт

Box-shadow генератору толугу менен клиент тарабындагы React курал — сервер жок, китепкана жок. Ал абалда көлөкө катмар объекттеринин тизмесин кармайт, ар бир өзгөрүүдө кол менен жазылган rgba() форматтагыч колдонуп жарактуу CSS box-shadow саптарын чогултат жана аларды React'тин style свойствосу аркылуу түз алдын ала көрүү элементине колдонот, ошондуктан браузердин өз тартуу кыймылдаткычы натыйжаны дароо тартат.

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

Байланыштуу куралдар

◖

CSS Border Radius генератору

Ар бир бурчту өзүнчө башкаруу менен тегеректелген бурчтарды визуалдык түрдө долбоорлоңуз. Органикалык формалар үчүн эллипстик X/Y синтаксисин колдойт.

Байкап көрүңүз
🟦

CSS Grid генератору

CSS торду визуалдык түрдө түзүңүз — тректер, бирдиктер жана боштуктар — жана даяр CSS менен HTML кодун көчүрүп алыңыз.

Байкап көрүңүз
↔️

CSS Flexbox генератору

Жандуу элементтерде flex багытын, оролушун, тегиздөөнү сынап көрүңүз — жана CSS кодун көчүрүп алыңыз.

Байкап көрүңүз

Көп берилүүчү суроолор