دروستکەری گرادیانی CSSی بەخۆڕایی

چۆن کار دەکات

دروستکەری گرادینت ڕیزبەندی گرادینتی CSS ڕاستەوخۆ لە وێبگەڕدا بنیاتدەنێت — بەبێ کتێبخانە، سێرڤەر، بارکردن. فەنکشنێکی دەستنووس دەقنووسینی دروستی linear-gradient، radial-gradient، یان conic-gradient لە ڕوکارە ڕەنگ و گۆشەت پێکدەهێنێت بە کاتی ڕاستەقینەدا، پاشان ئەنجامەکە فۆرمات دەکات بۆ هەر ئامانجی دەرچوونێک هەڵیبژێریت.

1. 1
   ڕوکار و ئاراستە ڕێکبخە

   لەنێوان 2 و 6 ڕوکاری ڕەنگ دادەنێیت بە بەکارهێنانی هەڵبژێری ڕەنگی سەرەکی وێبگەڕ، پاشان هەر ڕوکارێک لەسەر تەوەری %0–100 بەجێ دەکەیت بە خشتەبەرێکی مەودا. بۆ گرادینتی هێڵی و کۆنیک گۆشەیەکیش هەڵدەبژێریت (0–360°)؛ بۆ گرادینتی ڕادیاڵ شێواز هەڵدەبژێریت (بێضاوی یان بازنە) و کلیلوشەی قەبارە کە کۆنترۆڵی دەکات گرادینتەکە چەند بۆ دەرەوە درێژ دەبێتەوە.
2. 2
   buildCss ڕیزبەندی گرادینت پێکدەهێنێت

   لەسەر هەر گۆڕانێک، فەنکشنی ناوخۆیی buildCss پارامیتەرەکانت بەیەکەوە دەبەستێت بۆ بانگکردنی فەنکشنی CSSی دروست — بۆ نموونە linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). هیچ کتێبخانەیەک تێناکەوێت؛ ڕیزبەندییەکە بە لۆژیکی نموونەی جاڤاسکریپتی سادە دروستدەکرێت و ڕاستەوخۆ لە ڕیزی ڕوکارەوە بەیەکەوە دەبەسترێت.
3. 3
   پێشبینینی زیندوو لە ڕێگای شێوازی ناوخۆییەوە دەکێشرێت

   ڕیزبەندی گرادینتی بەیەکەوەبەستراو ڕاستەوخۆ لەسەر توخمێکی div جێبەجێدەکرێت وەک شێوازی پاشبنەمای ناوخۆیی، بۆیە ئەنجینی خودی CSSی وێبگەڕ پێشبینینەکە دەکێشێت. هیچ canvas یان وێنە تێناکەوێت — ئەوەی دەیبینیت ڕاستەوخۆ تایبەتمەندی CSSیە کە جێبەجێدەکرێت.
4. 4
   دەرچوونی ئامادەی کۆپی بە چوار فۆرمات

   هەڵبژێرێکی فۆرمات هەمان ڕیزبەندی گرادینت دەگۆڕێت بۆ CSSی سادە (background: ...)، بلۆکێکی CSS-لەگەڵ-پشتیوانی-پوخت، کلاسێکی نرخی-ئازادی Tailwind، یان ڕاگەیاندنێکی گۆڕاوی SCSS. کرتەکردن لەسەر کۆپی دەرچوونی هەڵبژێردراو بۆ کلیپبۆرد دەنووسێت لە ڕێگای navigator.clipboard.writeTextەوە. گرادینتی ئێستاش لەناو هاشی URLدا کۆددەکرێت بۆیە دەتوانیت نیشانەی بکەیت یان هاوبەشی بکەیت.

ئامرازە پەیوەندیدارەکان