CSS box-shadow գեներատոր անվճար
CSS box-shadow-ի վիզուալ կառուցիչ ուղիղ նախադիտմամբ, բազմաշերտ կուտակմամբ, գույնի ջրվեժով, inset անջատիչով ու մեկ սեղմումով պատճենով: Ներառում է Material, neumorphism ու փայլ կանխադրածներ:
Քաշեք տուփը՝ ակտիվ շերտի ստվերի դիրք փոխելու համար - Shift սեղմածը պահեք լավ կառավարման համար
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);Նախապատրաստված
Տարածված կիրառություններ
- Card UI ShadowsԿառուցել մեծ քարտ ստվերներ համար նկարներ, ապրանքի grid եւ նկարներ:
- Button Press EffectsԿառուցել կոճակ ստվերներ, որ արտացոլել իրական խորության եւ ստուգել պետությունների:
- Neumorphism Soft UIՍտեղծեք soft-UI նեյմորֆիզմի տեսք՝ զուգակցված բաց և մուգ ստվերներով։
- Modal & Popover ShadowsՍտեղծել վեր-հեռացված, լողացող զգացում համար զի խոսակցություն եւ հայտնել:
- Glow & Focus Ring EffectsՍտեղծեք փայլուն էֆեկտներ, ֆոկուս օղակներ և նեոն ոճի ընդգծումներ:
Ինչպես է այն աշխատում
box-shadow գեներատորը ամբողջովին կողմնային React գործիք է — չկա սերվեր, չկա գրադարան։ Այն պահում է ստվերի շերտի օբյեկտների ցանկ վիճակում, հավաքում է վավեր CSS box-shadow տողեր ամեն փոփոխության ժամանակ՝ ձեռագիր rgba() ձևակերպիչով, և կիրառում է դրանք ուղղակիորեն նախադիտման տարրի վրա React-ի style հատկության միջոցով, որպեսզի դիտարկիչի սեփական մատուցման շարժիչն ակնթարթորեն գծի արդյունքը։
- 1Շերտի պարամետրերը սնուցում են ձևակերպիչըՅուրաքանչյուր ստվերի շերտ պահում է x/y շեղումները, մշուշը, տարածումը, տասնվեցական գույնը և թափանցիկության արժեքը։ Ամեն փոփոխության ժամանակ փոքր shadowToCss ֆունկցիան տասնվեցական գույնը փոխարկում է RGB բաղադրիչների կանոնավոր արտահայտությամբ, ապա հավաքում է rgba() տողը — օրինակ՝ 0px 4px 12px 0px rgba(0, 0, 0, 0.15)։ Բազմաթիվ շերտեր միանում են ստորակետերով։
- 2Դիտարկիչը մատուցում է կենդանի նախադիտումըՀավաքված տողը վերագրվում է div տարրի boxShadow ոճային հատկությանը ուղղակիորեն JSX-ում։ React-ը թարմացնում է DOM հատկությունը, և դիտարկիչի CSS շարժիչն անմիջապես գունանկարում է ստվերը — ոչ մի canvas կամ WebGL ներգրավված չէ, միայն բնիկ CSS մատուցում։
- 3Քաշիր-դիրքավորիր-ն օգտագործում է Pointer Events APIՆախադիտման տուփը սեղմելը և քաշելը կանչում է setPointerCapture տարրի վրա, ապա հետևում է onPointerMove-ի տարբերություններին՝ ակտիվ շերտի x և y շեղումները իրական ժամանակում թարմացնելու համար։ Shift-ը պահելը կիրառում է 0.25x մասշտաբի գործակից՝ նուրբ դիրքավորման համար։
- 4Ելքը պատճենվում է սեղմատախտակինԳործիքը նույն շերտի տվյալներից արտադրում է երկու ելքային ձևաչափ. ստանդարտ CSS box-shadow հայտարարություն, և Tailwind կամայական-արժեքով դաս (shadow-[...]), որտեղ բացատները փոխարինվում են ընդգծումներով՝ ըստ Tailwind-ի շարահյուսության կանոնների։ Մեկ սեղմումով պատճենումն օգտագործում է navigator.clipboard.writeText-ը։
Առնչվող գործիքներ
CSS border-radius գեներատոր
Վիզուալ կերպով նախագծեք կլորացված անկյուններ՝ յուրաքանչյուր անկյան անկախ կառավարմամբ: Աջակցում է X/Y շարահյուսությունն օրգանական blob ձևերի:
CSS Grid Գեներատոր
Վիզուալ ներածեք CSS grid — հետքեր, միավորներ և բացեր — և պատճեն անեք ստեղծված CSS և HTML:
CSS Flexbox Գեներատոր
Փորձեք flex ուղղությունը, փաթեթը, հիմնավորումը և հավասարեցումը իրական տարրերի վրա — և պատճեն անեք CSS-ը: