مولّد تدرجات CSS الخطية والشعاعية والمخروطية مع معاينة

طريقة الاستخدام

اختر نوع التدرج: خط يتغير لونه (خطي)، أو انتشار من المركز (شعاعي)، أو دوران حول نقطة (مخروطي).
حدّد الزاوية للتدرج الخطي أو المخروطي. ولا تنطبق على التدرج الشعاعي.
اختر كل لون في نقاط اللون واكتب موضعه بالنسبة المئوية. أضف نقاطاً أو احذفها، من نقطتين إلى ست.
اضغط نسخ تحت CSS والصق السطر في ورقة الأنماط لديك، أو ابدأ من أحد القوالب الجاهزة.

أنواع التدرجات الثلاثة

الخطي: يتغير اللون على طول خط مستقيم. تشير الزاوية 0deg إلى الأعلى، وتدور الزاوية مع عقارب الساعة، فتمضي 90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل.
الشعاعي: تنتشر الألوان من المركز في دائرة، من النقطة الأولى إلى الأخيرة.
المخروطي: تدور الألوان حول المركز كعقارب الساعة. وتحدد الزاوية المكان الذي يبدأ عنده اللون الأول.

نقاط اللون ومواضعها

نقطة اللون هي لون عند موضع من 0٪ إلى 100٪ على طول التدرج. يكتب المحرر النقاط بترتيب مواضعها، فلا يغيّر ترتيب إدخالها الصورة. ويُبقي ما بين نقطتين وست نقاط التدرجَ سهل القراءة، والكودَ قصيراً.

الكود هو صياغة CSS القياسية التي تقرؤها المتصفحات الحديثة، والمعاينة يرسمها متصفحك من القيمة نفسها، فما تراه هو ما تحصل عليه ورقة الأنماط.

مثال محلول: قالب الشروق

قالب الشروق تدرج خطي بزاوية 135deg، يمتد من أعلى اليسار نحو أسفل اليمين. وله ثلاث نقاط: برتقالي عند 0٪، وأصفر عند 50٪، ووردي عند 100٪.

الكود الذي يعطيه هو: background: linear-gradient(135deg, #f97316 0%, #facc15 50%, #ec4899 100%);

الأسئلة الشائعة

ماذا تعني 0deg في التدرج الخطي؟

تشير 0deg إلى الأعلى، فيتغير اللون مع هذه الزاوية من الأسفل إلى الأعلى. وتدور الزاوية مع عقارب الساعة: 90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل.

لماذا تأتي نقاطي في ترتيب مختلف في الكود؟

يكتب الكود النقاط بترتيب مواضعها، لأن CSS يقرؤها بهذا الترتيب. فإذا أدخلت 80٪ قبل 20٪، يعرض الكود 20٪ أولاً، وتبقى الصورة كما هي.

هل أستطيع استعمال لون شفاف؟

لا يقبل هذا المحرر إلا ألواناً صلبة مكتوبة بالصيغة السداسية. وللشفافية عدّل الكود يدوياً، واستعمل لوناً له قيمة ألفا.

كم عدد نقاط اللون التي أستطيع استعمالها؟

من نقطتين إلى ست. ويبقي المحرر العدد ضمن هذا المدى، فيكون للتدرج دائماً بداية ونهاية.

هل يعمل الكود في كل المتصفحات؟

الصياغة هي الشكل القياسي الذي تدعمه المتصفحات الحديثة. تحقق من النتيجة في المتصفحات التي يستعملها زوارك، خاصة إذا كنت تدعم إصدارات قديمة.

هل يُرسل تصميمي إلى مكان آخر؟

لا. يُبنى التدرج داخل متصفحك، ولا يُخزَّن شيء ولا يُرسل إلى خادم.

هل أستطيع استعمال التدرج لون النص؟

هذه الأداة تكتب تعريف الخلفية وحده. ووضع تدرج خلف النص ممكن، لكنه يحتاج إلى CSS أكثر مما تكتبه الأداة.

المصادر

آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.