دروستکەری سێبەری سندوقی CSSی بەخۆڕایی
دروستکەری بینراوی box-shadowی CSS لەگەڵ پێشبینینی زیندوو، چینکردنی فرەچینە، دیاریکەری ڕەنگ، بژاردەی inset، و کۆپیکردنی یەک کلیکی. پێشوەختی Material، نیومۆرفیزم، و درەوشانەوە لەخۆدەگرێت.
سندوقەکە ڕاکێشە بۆ ئەوەی سێبەری چینی چالاک شوێن بگۆڕیت - Shift ڕابگرە بۆ کۆنترۆڵی وردتر
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);پێشدانراوەکان
چۆن کار دەکات
دروستکەری box-shadow ئامرازێکی Reactی تەواو لایەنی داواکار — هیچ سێرڤەر، کتێبخانە. لیستێک لە ئۆبجێکتی چینی سێبەر لە دۆخدا دەپارێزێت، ڕیزبەندی CSS box-shadowی دروست لەسەر هەر گۆڕانێک دروستدەکات بە بەکارهێنانی فۆرماتکەرێکی rgba() دەستنووس، و ڕاستەوخۆ بۆ توخمێکی پێشبینین لە ڕێگای شێوازی propی Reactەوە جێبەجێی دەکات بۆیە ئەنجینی نیگاردانی خودی وێبگەڕ دەستبەجێ ئەنجامەکە دەکێشێت.
- 1پارامیتەری چین فۆرماتکەرەکە دەخۆرێننهەر چینی سێبەرێک لاگۆڕی x/y، تێکدان، بڵاوکردنەوە، ڕەنگی شازدەیی، و نرخی شەفافی هەڵدەگرێت. لەسەر هەر گۆڕانێک، فەنکشنێکی بچووکی shadowToCss ڕەنگی شازدەیی دەگۆڕێت بۆ بەشە RGBـەکان بە ڕێجێکس، پاشان ڕیزبەندی rgba() دروستدەکات — بۆ نموونە، 0px 4px 12px 0px rgba(0, 0, 0, 0.15). چەند چینێک بە کۆما بەیەکەوە دەبەسترێن.
- 2وێبگەڕ پێشبینینی زیندووەکە دەکێشێتڕیزبەندی خۆرێنراو ڕاستەوخۆ لە JSXدا بۆ تایبەتمەندی شێوازی boxShadowی توخمێکی div دیاریدەکرێت. React ئاتریبیوتی DOM نوێدەکاتەوە، و ئەنجینی CSSی وێبگەڕ دەستبەجێ سێبەرەکە دەکێشێت — هیچ canvas یان WebGL تێناکەوێت، تەنها کێشانی CSSی ڕەسەن.
- 3ڕاکێشان-بۆ-شوێن APIی Pointer Events بەکاردێنێتکرتەکردن و ڕاکێشانی سندووقی پێشبینین setPointerCapture لەسەر توخمەکە بانگدەکات، پاشان جیاوازیی onPointerMove شوێن دەکەوێت بۆ نوێکردنەوەی لاگۆڕی x و y چینی چالاک بە کاتی ڕاستەقینەدا. گرتنی Shift فاکتەرێکی پیواندنی 0.25x جێبەجێ دەکات بۆ شوێنبەندی وردتر.
- 4دەرچوون بۆ کلیپبۆرد کۆپی دەکرێتئامرازەکە دوو فۆرماتی دەرچوون دروستدەکات لە هەمان داتای چیندا: ڕاگەیاندنێکی ستانداردی CSS box-shadow، و کلاسی نرخی-ئازادی هاوتای Tailwind (shadow-[...]) کە بۆشاییەکان بە ژێرهێڵ دەگۆڕدرێن بەپێی یاسای دەقنووسینی Tailwind. کۆپیکردن بە یەک کرتە navigator.clipboard.writeText بەکاردێنێت.
ئامرازە پەیوەندیدارەکان
دروستکەری خڵی گۆشەی CSS
گۆشەی خڵکراو بە بینراوی دیزاین بکە لەگەڵ کۆنترۆڵی سەربەخۆی هەر گۆشەیەک. سینتاکسی X/Yی بێزەیی پشتگیری دەکات بۆ شێوەی بلۆبی سروشتی.
دروستکەری تۆڕی CSS
تۆڕی CSS بە شێوەی بینراو داڕێژە — تراک، یەکە و کاژاوەکان — و CSS و HTMLی دروستکراو کۆپی بکە.
دروستکەری Flexbox CSS
ئاراستە، سڕینەوە، ڕێکخستنی flex، بەرەوپێش و ڕێکخستنی تاک لەسەر بابەتی زیندوو تاقی بکەرەوە — و CSS کۆپی بکە.