التدرجات: الخطية والشعاعية
أنشئ انتقالات لونية سلسة باستخدام linear-gradient() وradial-gradient().
التدرجات: الخطية والشعاعية درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
ما هو التدرج اللوني في CSS؟
التدرجات اللونية في CSS هي صور مُنشأة (لا تحتاج إلى ملف صورة) تنتقل بين لونين أو أكثر. وتُحدّد كقيم للخاصية background-image أو للاختصار background.
أساسيات linear-gradient()
ينتقل التدرج الخطي بين الألوان على طول خط مستقيم. وتحدّد الوسيطة الأولى الاتجاه، تليها نقاط توقف الألوان.
<div class="gradient-demo"></div>
اتجاه التدرج: الكلمات المفتاحية والزوايا
يمكن تحديد الاتجاه باستخدام الكلمات المفتاحية أو الزوايا بالدرجات:
<div class="dir-keyword"></div>
<div class="dir-45deg"></div>
<div class="dir-135deg"></div>
نقاط توقف لونية متعددة
أضيفوا العدد الذي تحتاجون إليه من نقاط توقف الألوان. ويمكن لكل نقطة توقف أن تحدّد موضعًا اختياريًا (طولًا أو نسبة مئوية).
<div class="stops"></div>
نقاط توقف لونية حادة
حدّدوا نقطتي توقف في الموضع نفسه لإنشاء توقف حاد، أي تغيير مفاجئ في اللون من دون مزج.
<div class="hard-stop"></div>
التدرج الخطي المتكرر
تكرر repeating-linear-gradient() نمط التدرج لإنشاء الخطوط والأنسجة.
<div class="stripes"></div>
أساسيات radial-gradient()
ينتشر التدرج الشعاعي إلى الخارج من نقطة مركزية على شكل بيضاوي أو دائري.
<div class="radial-demo"></div>
شكل التدرج الشعاعي وحجمه
تحكموا في شكل التدرج (circle أو ellipse) وفي كلمة مفتاحية تحدّد امتداده:
<div class="radial-circle"></div>
<div class="radial-ellipse"></div>
موضع التدرج الشعاعي
استخدموا at <position> بعد الشكل أو الحجم لتحريك مركز التدرج الشعاعي.
<div class="radial-position"></div>
التدرج المخروطي
تحرك conic-gradient() بالألوان حول نقطة مركزية مثل مخطط دائري. وتتطلب زاوية البدء from وموضع at اختياريًا.
<div class="conic-demo"></div>
شفافية التدرج
استخدموا transparent أو rgba() في نقاط توقف التدرج للانتقال بسلاسة من لون خلفية العنصر أو إليه.
<div class="fade-overlay"></div>
تحقق سريع
أي دالة CSS تنشئ تدرجًا ينتشر إلى الخارج من نقطة مركزية؟
مراجعة
تتحرك التدرجات الخطية على طول خط، وتنتشر التدرجات الشعاعية إلى الخارج، بينما تدور التدرجات المخروطية حول نقطة. استخدموا نقاط التوقف الحادة لإنشاء الخطوط. وجميع دوال التدرج هي قيم للخاصية background-image، وتنشئ صورًا من دون ملفات خارجية.
الأسئلة الشائعة
هل درس «التدرجات: الخطية والشعاعية» مجاني؟
نعم — نص درس «التدرجات: الخطية والشعاعية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «التدرجات: الخطية والشعاعية»؟
أنشئ انتقالات لونية سلسة باستخدام linear-gradient() وradial-gradient(). تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.
كم من الوقت يستغرق درس «التدرجات: الخطية والشعاعية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- قيم الألوان: المسماة وHex وRGB وHSL
- لون الخلفية وصورتها
- التدرجات: الخطية والشعاعية
- الشفافية باستخدام Opacity وRGBA