Pulsuz CSS Qutu Kölgə Generatoru
Canlı önizləmə, çox qatlı yığım, rəng seçici, daxili keçiş və bir klikdə kopyalama ilə CSS qutu kölgəsi üçün vizual qurucusu. Material, neymorfizm və parlaqlıq əvvəlcədən hazırlanmış parametrləri daxildir.
Fəal sətrin kölgəsini yerləşdirmək üçün qutuya keçid edin - incə kontrol üçün Shift düyməsini basın
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Hazır dəstlər
Ümumi istifadələr
- Card UI ShadowsPanellər, məhsul şəbəkə və panellər üçün zərif kart kölgələri quranlayın.
- Button Press EffectsHəqiqi dərinlik və basış vəziyyətini təqlid edən düymə kölgələri quranlayın.
- Neumorphism Soft UICütləşdirilmiş açıq + tünd kölgələr ilə soft-UI neumorphism görünüşü yaradın.
- Modal & Popover ShadowsDialoq və aşağıya açılanlar üçün yüksəldilmiş, üzən hiss yaradın.
- Glow & Focus Ring EffectsParıltı effektləri, fokus halqaları və neon tərzdə işıqlandırmalar yaradın.
Necə İşləyir
Qutu-kölgəsi yaradıcısı tamamilə istifadəçi tərəfli bir React alətidir — server yoxdur, kitabxana yoxdur. State-də bir kölgə qatı obyektləri siyahısı saxlayır, hər dəyişiklikdə əl ilə yazılmış bir rgba() formatlayıcı istifadə edərək etibarlı CSS box-shadow sətirləri yığır və onları React-in style xüsusiyyəti vasitəsilə birbaşa bir önizləmə elementinə tətbiq edir ki, brauzerin öz render mühərriki nəticəni ani olaraq çəksin.
- 1Qat parametrləri formatlayıcını bəsləyirHər kölgə qatı x/y ofsetlərini, bulanıqlığı, yayılmanı, bir hex rəngi və bir şəffaflıq dəyərini saxlayır. Hər dəyişiklikdə, kiçik bir shadowToCss funksiyası hex rəngi bir müntəzəm ifadə ilə RGB komponentlərinə çevirir, sonra rgba() sətrini yığır — məsələn, 0px 4px 12px 0px rgba(0, 0, 0, 0.15). Bir neçə qat vergüllərlə birləşdirilir.
- 2Brauzer canlı önizləməni render edirYığılmış sətir birbaşa JSX-də bir div elementinin boxShadow stil xüsusiyyətinə təyin edilir. React DOM atributunu yeniləyir, brauzerin CSS mühərriki isə kölgəni dərhal boyayır — canvas və ya WebGL iştirak etmir, yalnız yerli CSS render.
- 3Sürükləyib-mövqeləndirmə Pointer Events API-dən istifadə edirÖnizləmə qutusuna klikləyib sürükləmək elementdə setPointerCapture çağırır, sonra aktiv qatın x və y ofsetlərini real vaxtda yeniləmək üçün onPointerMove fərqlərini izləyir. Shift-i basılı saxlamaq dəqiq mövqeləndirmə üçün 0.25x miqyas faktoru tətbiq edir.
- 4Çıxış mübadilə buferinə kopyalanırAlət eyni qat məlumatından iki çıxış formatı yaradır: standart bir CSS box-shadow bəyanatı və Tailwind-in sintaksis qaydalarına uyğun boşluqların alt xəttlərlə əvəz edildiyi bir Tailwind özbaşına-dəyər sinfi (shadow-[...]). Bir kliklik kopyalama navigator.clipboard.writeText istifadə edir.
Əlaqəli Alətlər
CSS Haşiyə Radiusu Generatoru
Hər küncün müstəqil nəzarəti ilə yuvarlaq künclər vizual olaraq dizayn edin. Üzvi blob formaları üçün elliptik X/Y sintaksisini dəstəkləyir.
CSS Grid Generatoru
CSS grid-i vizual olaraq dizayn edin — trekler, vahidlər və boşluqlar — və yaradılmış CSS və HTML-i kopyalayın.
CSS Flexbox Generatoru
Flex istiqaməti, qapanma, haqlı və düzəltmə ilə canlı elementlər üzərində eksperiment edin — və CSS-i kopyalayın.