ما الذي تقدمه أداة مولّد التدرجات؟
تتيح لك أداة "مولّد التدرجات" إنشاء تدرج لوني CSS مخصص بالكامل من خلال تحديد نوعه، وضبط اتجاهه أو شكله، وإضافة ما يصل إلى ثماني نقاط توقف لونية. وأثناء قيامك بإجراء التغييرات على الإعدادات، ستعرض لك الأداة معاينة مباشرة للتدرج اللوني لتشاهد النتيجة فورًا، كما تتيح لك نسخ كود CSS الناتج بنقرة واحدة.
مدخلات الأداة وخيارات التحكم
توفر لك الأداة مجموعة من خيارات التحكم والمدخلات لتصميم التدرج اللوني بدقة:
- نوع التدرج: يمكنك الاختيار بين ثلاثة أنواع وهي "خطي"، أو "شعاعي"، أو "مخروطي".
- زاوية: قيمة رقمية تُستخدم لتحديد اتجاه التدرجات الخطية أو المخروطية.
- شكل: يتيح لك الاختيار بين "قطع ناقص" أو "دائرة" عند استخدام التدرجات الشعاعية.
- نقاط التوقف اللونية: يمكنك إضافة وتعديل ما يصل إلى ثماني نقاط توقف لونية، بحيث تتكون كل نقطة من:
- لون نقطة التوقف: القيمة اللونية المحددة.
- موضع: نسبة مئوية تبدأ من 0% وتصل إلى 100% لتحديد مكان اللون على طول مسار التدرج.
مخرجات الأداة
عند تفاعلك مع عناصر التحكم، تقوم الأداة بتوليد المخرجات التالية فورًا:
- المعاينة المباشرة: تمثيل بصري حي يعرض شكل التدرج اللوني الذي تقوم بتصميمه في الوقت الفعلي.
- CSS: كود CSS البرمجي الجاهز والخاص بالتدرج اللوني الذي قمت بإنشائه لتتمكن من استخدامه مباشرة في مشاريعك.
قواعد العمل والحالات الخاصة في الأداة
لتحقيق أقصى استفادة من الأداة، يرجى فهم القواعد البرمجية والسلوكيات التالية التي تحكم عملها:
- آلية عمل أنواع التدرج:
- يمزج التدرج الـ "خطي" الألوان على امتداد خط مستقيم، وتحدد الزاوية اتجاه هذا الخط.
- ينشر التدرج الـ "شعاعي" الألوان من المركز إلى الخارج على شكل دائرة أو قطع ناقص.
- يدور التدرج الـ "مخروطي" الألوان حول نقطة مركزية تشبه عجلة الألوان.
- التحكم بالاتجاه والشكل:
- يحدد شريط تمرير الزاوية الخاص بالتدرجات الخطية أو المخروطية اتجاه التدرج؛ حيث تشير الزاوية 0 درجة إلى الأعلى، وتشير الزاوية 90 درجة إلى اليمين.
- لا تستخدم التدرجات الشعاعية الزوايا، وبدلاً من ذلك تتيح لك الأداة اختيار شكل "دائرة" أو "قطع ناقص".
- قواعد نقاط التوقف اللونية:
- كل نقطة توقف لونية هي عبارة عن لون مثبت عند موضع معين على طول التدرج، حيث يمثل الموضع 0% نقطة البداية ويمثل الموضع 100% نقطة النهاية.
- يبدأ التدرج اللوني الافتراضي عند فتح الأداة بنقطتي توقف هما:
#6366f1عند الموضع0%و#ec4899عند الموضع100%. - يمكنك إضافة ما يصل إلى ثماني نقاط توقف لونية كحد أقصى. وعند الوصول إلى هذا الحد (ثماني نقاط)، سيتم تعطيل زر "إضافة نقطة توقف" تلقائيًا.
- عند إضافة نقطة توقف لونية جديدة، يتم تعيين موضعها الافتراضي تلقائيًا عند نسبة 50%.
- تفاعل الأزرار:
- بمجرد النقر على زر "نسخ CSS"، تتغير حالة الزر فورًا ليظهر بنص "تم النسخ" لتأكيد العملية بنجاح.
الخصوصية ومعالجة البيانات
تولي الأداة أهمية قصوى لخصوصية بياناتك؛ حيث يتم تقديم كل تدرج لوني وتصييره مباشرة داخل متصفح الإنترنت الخاص بك. ولا يتم تحميل أي من الإعدادات أو الألوان أو القيم التي تقوم بتعيينها داخل الأداة إلى خوادم BroBroGo على الإطلاق.
من يحتاج إلى هذه الأداة؟
تم تصميم هذه الأداة لتلبي احتياجات فئات مختلفة من المستخدمين والمطورين:
- المصممون ومطورو الواجهات الأمامية (Front-end Developers) الذين يحتاجون إلى ضبط دقيق لنوع التدرج، وموضعه، والتحكم في نقاط توقف لونية متعددة للوصول إلى تصميمات احترافية.
- المستخدمون الذين يرغبون في إنشاء خلفيات CSS مخصصة لمواقعهم بشكل سريع وسلس.
- أي شخص يحتاج ببساطة إلى ضبط لونين واتجاه معين لإنشاء تدرج لوني سريع.
الأسئلة الشائعة
ما الفرق بين التدرجات الخطية والشعاعية والمخروطية؟
يمزج التدرج الخطي الألوان على امتداد خط مستقيم تحدد اتجاهه بزاوية. وينشرها التدرج الشعاعي من المركز إلى الخارج في دائرة أو قطع ناقص. أما التدرج المخروطي فيدورها حول المركز مثل عجلة الألوان.
ما نقاط التوقف اللونية؟
كل نقطة توقف لونية هي لون مثبت عند موضع على طول التدرج — 0% في البداية و100% في النهاية. حرّك نقطة التوقف لتغيير موضع ذروة لونها، أو أضف نقاطًا أخرى للحصول على مزج أغنى. يمكنك استخدام ما يصل إلى ثماني نقاط.
كيف أتحكم بالاتجاه؟
بالنسبة للتدرج الخطي أو المخروطي، يقوم شريط تمرير الزاوية بتعيين الاتجاه - 0 درجة لأعلى، و90 درجة لليمين. التدرج الشعاعي ليس له زاوية؛ اختر شكلًا دائريًا أو قطعًا ناقصًا بدلاً من ذلك لتغيير كيفية انتشاره.