🎨

وړیا د 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%)

دننه سیوری

دا څنګه کار کوي

د box-shadow جوړوونکی یو بشپړ کلاینټ-اړخ React وسیله ده — هیڅ سرور، هیڅ کتابتون. دا حالت کې د سیوري پرت اعتراضونو یو لیست ساتي، سم CSS box-shadow متنونه هر بدلون کې د یوه لاسي-لیکل شوي rgba() فارمیټر سره راټولوي، او یې مستقیم یوه مخکتنه عنصر ته د React سبک ملکیت له لارې پلي کوي نو براوزر خپل رینډرنګ انجن پایله سملاسي رسموي.

1
پرت پارامترونه فارمیټر ته تغذیه کوي
هر سیوري پرت x/y آفسیټونه، بلر، خپرول، یو هیکس رنګ، او شفافیت ارزښت ذخیره کوي. هر بدلون کې، یو کوچنی shadowToCss فنکشن هیکس رنګ RGB برخو ته د ریگولر اکسپریشن سره بدلوي، بیا rgba() متن راټولوي — د بیلګې په توګه، 0px 4px 12px 0px rgba(0, 0, 0, 0.15). ډېر پرتونه د کاماوو سره یوځای کیږي.
2
براوزر ژوندۍ مخکتنه رسموي
راټول شوی متن مستقیم JSX کې د یو div عنصر boxShadow سبک ملکیت ته ټاکل کیږي. React DOM خصوصیت تازه کوي، او براوزر CSS انجن سیوری سملاسي رسموي — هیڅ کینوس یا WebGL پکې شامل نه دی، یوازې اصلي CSS انځورونه.
3
کش-موقعیت د Pointer Events API کاروي
د مخکتنې بکس کیکاږل او کشول setPointerCapture عنصر باندې بولي، بیا onPointerMove توپیرونه تعقیبوي ترڅو د فعال پرت x او y آفسیټونه ریښتینې وخت کې تازه کړي. Shift نیول د نازک موقعیت‌کولو لپاره 0.25x کچه فکتور پلي کوي.
4
محصول کلیپبورډ ته کاپي کیږي
وسیله د همغه پرت ډیټا نه دوه محصول بڼې جوړوي: یو معیاري CSS box-shadow اعلان، او یو Tailwind دلخواه-ارزښت کلاس (shadow-[...]) چیرې چې خالي ځایونه د Tailwind نحوی قواعدو له مخې لاندې کرښو سره بدلیږي. یو-کیکاږل کاپي navigator.clipboard.writeText کاروي.