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

مقدمة في تدرجات CSS

تتيح لك تدرجات CSS إنشاء انتقالات سلسة وسلسة بين لونين أو أكثر دون استخدام أي ملفات صور. يتم إنشاؤها بواسطة المتصفح كقيم background-image، مما يعني أنها مستقلة عن الدقة (تبدو حادة على أي شاشة، بما في ذلك شاشات Retina)، وتُحمّل فوراً (بدون طلبات HTTP)، ويمكن تغيير حجمها دون فقدان الجودة. التدرجات هي واحدة من أكثر الأدوات تنوعاً في CSS لإضافة العمق البصري وإنشاء الأنماط وبناء التأثيرات الزخرفية وتحسين التصميم العام لصفحات الويب.

يوفر CSS ثلاثة أنواع من دوال التدرج: linear-gradient() للانتقالات بخط مستقيم، وradial-gradient() للانتقالات الدائرية أو البيضاوية، وconic-gradient() للانتقالات الزاوية حول نقطة مركزية. كل نوع له أيضاً متغير repeating- لإنشاء أنماط متكررة. في هذا الدرس، سنستكشف جميع الأنواع الثلاثة بعمق، بما في ذلك التقنيات المتقدمة لإنشاء الخطوط والأنماط وتأثيرات النص والطبقات الإبداعية.

التدرجات الخطية

ينشئ التدرج الخطي انتقالاً لونياً على طول خط مستقيم. تحدد اتجاه التدرج ونقطتي توقف لونيتين أو أكثر، ويمزج المتصفح بينهما بسلاسة. التدرجات الخطية هي النوع الأكثر استخداماً وتشكل الأساس لفهم جميع أنواع التدرجات الأخرى.

الصيغة الأساسية والاتجاه

الصيغة الأساسية هي: linear-gradient(direction, color1, color2, ...)

يمكن تحديد الاتجاه ككلمة مفتاحية أو زاوية:

• to bottom (الافتراضي) -- التدرج يتدفق من الأعلى إلى الأسفل.
• to top -- التدرج يتدفق من الأسفل إلى الأعلى.
• to right -- التدرج يتدفق من اليسار إلى اليمين.
• to left -- التدرج يتدفق من اليمين إلى اليسار.
• to bottom right -- التدرج يتدفق قطرياً نحو الزاوية السفلية اليمنى.
• to top left -- التدرج يتدفق قطرياً نحو الزاوية العلوية اليسرى.

/* الافتراضي: من الأعلى إلى الأسفل */
.gradient-default {
    background-image: linear-gradient(#3498db, #2ecc71);
}

/* اتجاهات بالكلمات المفتاحية */
.gradient-right {
    background-image: linear-gradient(to right, #3498db, #2ecc71);
}
.gradient-left {
    background-image: linear-gradient(to left, #e74c3c, #f39c12);
}
.gradient-top {
    background-image: linear-gradient(to top, #8e44ad, #3498db);
}

/* اتجاهات قطرية */
.gradient-diagonal {
    background-image: linear-gradient(to bottom right, #667eea, #764ba2);
}
.gradient-diagonal-2 {
    background-image: linear-gradient(to top left, #f093fb, #f5576c);
}

الاتجاهات القائمة على الزوايا

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

/* زوايا شائعة */
.angle-0 {
    background-image: linear-gradient(0deg, #3498db, #2ecc71);
    /* مثل "to top" */
}
.angle-45 {
    background-image: linear-gradient(45deg, #3498db, #2ecc71);
    /* قطري: من أسفل اليسار إلى أعلى اليمين */
}
.angle-90 {
    background-image: linear-gradient(90deg, #3498db, #2ecc71);
    /* مثل "to right" */
}
.angle-135 {
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    /* قطري: من أعلى اليسار إلى أسفل اليمين */
}
.angle-180 {
    background-image: linear-gradient(180deg, #3498db, #2ecc71);
    /* مثل "to bottom" (الافتراضي) */
}
.angle-270 {
    background-image: linear-gradient(270deg, #3498db, #2ecc71);
    /* مثل "to left" */
}

/* تدرج بزاوية خفيفة لبطاقة عصرية */
.modern-card {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 2rem;
    color: white;
}

نقاط التوقف اللونية ومواضعها

تحدد نقاط التوقف اللونية مكان ظهور كل لون على خط التدرج. افتراضياً، تُوزع الألوان بالتساوي، لكن يمكنك التحكم في الموضع الدقيق لكل نقطة توقف باستخدام النسب المئوية أو الأطوال.

/* الافتراضي: الألوان موزعة بالتساوي */
.even {
    background-image: linear-gradient(to right, red, yellow, green);
    /* أحمر عند 0%، أصفر عند 50%، أخضر عند 100% */
}

/* مواضع مخصصة */
.custom-stops {
    background-image: linear-gradient(to right,
        #3498db 0%,
        #3498db 30%,   /* الأزرق يمتد من 0% إلى 30% */
        #2ecc71 70%,   /* الانتقال يحدث بين 30% و 70% */
        #2ecc71 100%   /* الأخضر يمتد من 70% إلى 100% */
    );
}

/* دفع نقطة الانتقال */
.mostly-blue {
    background-image: linear-gradient(to right,
        #3498db 70%,  /* الأزرق يشغل 70% من المساحة */
        #2ecc71       /* الأخضر يملأ الـ 30% المتبقية */
    );
}

/* نقاط توقف لونية متعددة */
.rainbow {
    background-image: linear-gradient(to right,
        hsl(0, 100%, 50%),    /* أحمر */
        hsl(60, 100%, 50%),   /* أصفر */
        hsl(120, 100%, 50%),  /* أخضر */
        hsl(180, 100%, 50%),  /* سماوي */
        hsl(240, 100%, 50%),  /* أزرق */
        hsl(300, 100%, 50%)   /* أرجواني */
    );
}

/* استخدام قيم البكسل لمواضع التوقف */
.pixel-stops {
    background-image: linear-gradient(to right,
        #3498db 0px,
        #3498db 200px,   /* أزرق لأول 200px */
        #2ecc71 200px,   /* الأخضر يبدأ فوراً عند 200px */
        #2ecc71          /* الأخضر يملأ الباقي */
    );
}

نقاط التوقف الحادة (إنشاء الخطوط)

عندما تشترك نقطتا توقف لونيتان متجاورتان في نفس الموضع، لا يوجد انتقال تدريجي بينهما -- يتغير اللون فوراً. هذه التقنية تنشئ خطوطاً حادة وهي الأساس لإنشاء الخطوط والأنماط الهندسية بتدرجات CSS.

/* خطوط أفقية بلونين */
.hard-stop {
    background-image: linear-gradient(to right,
        #3498db 50%,  /* الأزرق يملأ النصف بالضبط */
        #2ecc71 50%   /* الأخضر يبدأ بالضبط عند نقطة المنتصف */
    );
}

/* ثلاثة خطوط عمودية متساوية (مثل العلم) */
.three-stripes {
    background-image: linear-gradient(to right,
        #002395 33.33%,  /* أزرق */
        #ffffff 33.33%,  /* الأبيض يبدأ حيث ينتهي الأزرق */
        #ffffff 66.66%,  /* الأبيض ينتهي عند الثلثين */
        #ed2939 66.66%   /* الأحمر يبدأ حيث ينتهي الأبيض */
    );
}

/* خطوط مائلة */
.diagonal-stripes {
    background-image: linear-gradient(45deg,
        #3498db 25%,
        #2ecc71 25%,
        #2ecc71 50%,
        #3498db 50%,
        #3498db 75%,
        #2ecc71 75%
    );
    background-size: 40px 40px;
}

/* تأثير شريط التقدم */
.progress-bar {
    background-image: linear-gradient(to right,
        #2ecc71 0%,
        #2ecc71 65%,     /* الجزء المملوء (65%) */
        #ecf0f1 65%,     /* غير المملوء يبدأ عند 65% */
        #ecf0f1 100%
    );
    height: 20px;
    border-radius: 10px;
}

تلميحات اللون (نقاط المنتصف)

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

/* الافتراضي: نقطة المنتصف بين النقطتين بالضبط (50%) */
.default-midpoint {
    background-image: linear-gradient(to right, #3498db, #2ecc71);
}

/* إزاحة نقطة المنتصف نحو اليسار (أخضر أكثر ظهوراً) */
.shifted-midpoint {
    background-image: linear-gradient(to right, #3498db, 25%, #2ecc71);
    /* نقطة منتصف الانتقال عند 25% بدلاً من 50% */
    /* الأزرق ينتقل إلى الأخضر أسرع */
}

/* إزاحة نقطة المنتصف نحو اليمين (أزرق أكثر ظهوراً) */
.shifted-right {
    background-image: linear-gradient(to right, #3498db, 75%, #2ecc71);
    /* الأزرق يمتد أطول قبل الانتقال إلى الأخضر */
}

/* تلميحات ألوان متعددة */
.multi-hint {
    background-image: linear-gradient(to right,
        #e74c3c,
        30%,       /* نقطة منتصف الأحمر-للأصفر عند 30% */
        #f1c40f,
        70%,       /* نقطة منتصف الأصفر-للأخضر عند 70% */
        #2ecc71
    );
}

التدرجات الشعاعية

ينشئ التدرج الشعاعي انتقالاً لونياً يشع للخارج من نقطة مركزية بشكل دائري أو بيضاوي. على عكس التدرجات الخطية التي تنتقل على طول خط مستقيم، تنتقل التدرجات الشعاعية في جميع الاتجاهات من نقطة أصل واحدة.

صيغة التدرج الشعاعي الأساسية

الصيغة هي: radial-gradient(shape size at position, color1, color2, ...)

/* الافتراضي: شكل بيضاوي يملأ العنصر */
.radial-default {
    background-image: radial-gradient(#3498db, #2c3e50);
}

/* شكل دائري صريح */
.radial-circle {
    background-image: radial-gradient(circle, #3498db, #2c3e50);
}

/* شكل بيضاوي صريح (الافتراضي) */
.radial-ellipse {
    background-image: radial-gradient(ellipse, #3498db, #2c3e50);
}

/* نقاط توقف لونية متعددة */
.radial-multi {
    background-image: radial-gradient(circle,
        #f39c12,   /* مركز ذهبي */
        #e74c3c,   /* وسط أحمر */
        #8e44ad    /* حافة بنفسجية */
    );
}

/* تأثير الإضاءة المركزة */
.spotlight {
    background-image: radial-gradient(circle,
        rgba(255, 255, 255, 0.3),
        transparent 70%
    );
    background-color: #2c3e50;
}

التحكم في الشكل والحجم

يحدد حجم التدرج الشعاعي مكان انتهاء الحافة الخارجية للتدرج. يوفر CSS أربع كلمات مفتاحية للحجم ويقبل أيضاً قيم أطوال صريحة:

• closest-side -- يمتد التدرج إلى أقرب حافة للعنصر من المركز.
• farthest-side -- يمتد التدرج إلى أبعد حافة من المركز.
• closest-corner -- يمتد التدرج إلى أقرب زاوية للعنصر.
• farthest-corner (الافتراضي) -- يمتد التدرج إلى أبعد زاوية للعنصر.

/* كلمات مفتاحية للحجم */
.closest-side {
    background-image: radial-gradient(circle closest-side, #3498db, #2c3e50);
}
.farthest-side {
    background-image: radial-gradient(circle farthest-side, #3498db, #2c3e50);
}
.closest-corner {
    background-image: radial-gradient(circle closest-corner, #3498db, #2c3e50);
}
.farthest-corner {
    background-image: radial-gradient(circle farthest-corner, #3498db, #2c3e50);
}

/* حجم صريح: دائرة بنصف قطر 100px */
.fixed-circle {
    background-image: radial-gradient(circle 100px, #3498db, #2c3e50);
}

/* حجم صريح: شكل بيضاوي بعرض وارتفاع */
.fixed-ellipse {
    background-image: radial-gradient(200px 100px, #3498db, #2c3e50);
    /* شكل بيضاوي بعرض 200px وارتفاع 100px */
}

تموضع التدرجات الشعاعية

افتراضياً، يكون التدرج الشعاعي في مركز العنصر. يمكنك تغيير نقطة الأصل باستخدام الكلمة المفتاحية at متبوعة بقيم الموضع.

/* الافتراضي: في المركز */
.centered {
    background-image: radial-gradient(circle at center, #3498db, #2c3e50);
}

/* كلمات مفتاحية للموضع */
.top-left {
    background-image: radial-gradient(circle at top left, #f39c12, transparent);
}
.bottom-right {
    background-image: radial-gradient(circle at bottom right, #e74c3c, transparent);
}

/* تموضع بالنسبة المئوية */
.offset {
    background-image: radial-gradient(circle at 30% 70%, #3498db, #2c3e50);
}

/* تموضع بالبكسل */
.pixel-pos {
    background-image: radial-gradient(circle at 50px 50px, #f39c12, transparent);
}

/* توهج زاوية زخرفي */
.corner-glow {
    background-color: #1a1a2e;
    background-image:
        radial-gradient(circle at 0% 0%, rgba(102, 126, 234, 0.4), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(118, 75, 162, 0.4), transparent 50%);
}

/* تأثير الحواف المعتمة (Vignette) */
.vignette {
    background-image:
        radial-gradient(ellipse at center,
            transparent 50%,
            rgba(0, 0, 0, 0.5) 100%
        );
}

التدرجات المخروطية

ينشئ التدرج المخروطي انتقالاً لونياً يدور حول نقطة مركزية، مثل عقارب الساعة. بدلاً من الانتقال على طول خط (خطي) أو للخارج من نقطة (شعاعي)، تنتقل الألوان حول دائرة. التدرجات المخروطية مثالية لإنشاء المخططات الدائرية وعجلات الألوان ومؤشرات التحميل وتأثيرات بصرية دائرية أخرى.

صيغة التدرج المخروطي الأساسية

الصيغة هي: conic-gradient(from angle at position, color1, color2, ...)

/* الافتراضي: يبدأ من الأعلى (0deg/الساعة 12)، في المركز */
.conic-default {
    background-image: conic-gradient(#3498db, #2ecc71, #e74c3c, #3498db);
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* عجلة الألوان */
.color-wheel {
    background-image: conic-gradient(
        hsl(0, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(360, 100%, 50%)
    );
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* مسح بسيط بلونين */
.two-color {
    background-image: conic-gradient(#3498db, #2ecc71);
    border-radius: 50%;
}

زاوية البداية والموضع

/* البدء من زاوية مختلفة */
.from-angle {
    background-image: conic-gradient(from 90deg, #3498db, #2ecc71, #3498db);
    border-radius: 50%;
}

/* البدء من الأسفل (180deg) */
.from-bottom {
    background-image: conic-gradient(from 180deg, #e74c3c, #f39c12, #e74c3c);
    border-radius: 50%;
}

/* تغيير موضع المركز */
.offset-center {
    background-image: conic-gradient(at 30% 70%, #3498db, #2ecc71, #3498db);
    border-radius: 50%;
}

/* دمج الزاوية والموضع */
.custom-origin {
    background-image: conic-gradient(from 45deg at 60% 40%,
        #667eea, #764ba2, #667eea
    );
    border-radius: 50%;
}

إنشاء مخططات دائرية بالتدرجات المخروطية

التدرجات المخروطية مع نقاط توقف لونية حادة هي أبسط طريقة لإنشاء مخططات دائرية بـ CSS خالص -- بدون JavaScript أو SVG.

/* مخطط دائري بسيط: مكتمل 65% */
.pie-chart {
    background-image: conic-gradient(
        #2ecc71 0deg,
        #2ecc71 234deg,    /* 65% من 360deg = 234deg */
        #ecf0f1 234deg,
        #ecf0f1 360deg
    );
    border-radius: 50%;
    width: 150px;
    height: 150px;
}

/* مخطط دائري متعدد الأجزاء */
.budget-chart {
    background-image: conic-gradient(
        #3498db 0deg,
        #3498db 126deg,    /* السكن: 35% = 126deg */
        #2ecc71 126deg,
        #2ecc71 198deg,    /* الطعام: 20% = 72deg */
        #e74c3c 198deg,
        #e74c3c 270deg,    /* النقل: 20% = 72deg */
        #f39c12 270deg,
        #f39c12 324deg,    /* الادخار: 15% = 54deg */
        #9b59b6 324deg,
        #9b59b6 360deg     /* أخرى: 10% = 36deg */
    );
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

/* مخطط حلقي (مخطط دائري بثقب) */
.donut-chart {
    background-image: conic-gradient(
        #3498db 0%,
        #3498db 40%,
        #2ecc71 40%,
        #2ecc71 70%,
        #e74c3c 70%,
        #e74c3c 100%
    );
    border-radius: 50%;
    width: 200px;
    height: 200px;
    position: relative;
}
/* الثقب في المخطط الحلقي */
.donut-chart::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 50%;
}

/* مخطط دائري بنقاط توقف نسبية (رياضيات أبسط) */
.simple-pie {
    background-image: conic-gradient(
        #3498db 0% 35%,    /* أزرق: 0% إلى 35% */
        #2ecc71 35% 60%,   /* أخضر: 35% إلى 60% */
        #f39c12 60% 85%,   /* برتقالي: 60% إلى 85% */
        #e74c3c 85% 100%   /* أحمر: 85% إلى 100% */
    );
    border-radius: 50%;
}

التدرجات المتكررة

لكل نوع تدرج متغير متكرر: repeating-linear-gradient() و repeating-radial-gradient() و repeating-conic-gradient(). تعمل هذه الدوال تماماً مثل نظيراتها غير المتكررة، لكن نمط التدرج يتكرر لملء العنصر بالكامل. هذا مفيد للغاية لإنشاء أنماط الخطوط ودوائر الهدف والتصاميم المتكررة الأخرى.

/* خطوط أفقية */
.horizontal-stripes {
    background-image: repeating-linear-gradient(
        0deg,
        #3498db 0px,
        #3498db 10px,
        #2c3e50 10px,
        #2c3e50 20px
    );
}

/* خطوط مائلة */
.diagonal-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(52, 152, 219, 0.3) 10px,
        rgba(52, 152, 219, 0.3) 20px
    );
}

/* خطوط ورق خفيفة */
.lined-paper {
    background-color: #fefefe;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 27px,
        #e8e8e8 27px,
        #e8e8e8 28px
    );
}

/* خطوط تحذير (شريط الخطر) */
.hazard-stripes {
    background-image: repeating-linear-gradient(
        45deg,
        #f1c40f,
        #f1c40f 10px,
        #2c3e50 10px,
        #2c3e50 20px
    );
}

/* نمط هدف / عين الثور */
.target {
    background-image: repeating-radial-gradient(
        circle,
        #e74c3c 0px,
        #e74c3c 10px,
        #ffffff 10px,
        #ffffff 20px
    );
    border-radius: 50%;
}

/* دوائر متحدة المركز */
.ripple {
    background-image: repeating-radial-gradient(
        circle at center,
        transparent 0px,
        transparent 8px,
        rgba(52, 152, 219, 0.2) 8px,
        rgba(52, 152, 219, 0.2) 10px
    );
}

/* نمط الانفجار النجمي */
.starburst {
    background-image: repeating-conic-gradient(
        #3498db 0deg,
        #3498db 10deg,
        #2c3e50 10deg,
        #2c3e50 20deg
    );
    border-radius: 50%;
}

/* رقعة شطرنج بتدرج مخروطي */
.checkerboard-conic {
    background-image: repeating-conic-gradient(
        #ccc 0% 25%,
        #fff 0% 50%
    );
    background-size: 40px 40px;
}

أنماط التدرج الإبداعية

بدمج تدرجات متعددة ونقاط توقف حادة وأحجام دقيقة، يمكنك إنشاء مجموعة واسعة من الأنماط بالكامل باستخدام CSS -- بدون صور. هذه الأنماط قابلة للتحجيم وقابلة للتخصيص ولا تضيف أي وزن لتحميل صفحتك.

/* نمط رقعة الشطرنج */
.checkerboard {
    background-color: #ffffff;
    background-image:
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 40px 40px;
    background-position: 0 0, 0 20px, 20px -20px, -20px 0;
}

/* نقاط بولكا */
.polka-dots {
    background-color: #2c3e50;
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.15) 10%, transparent 11%),
        radial-gradient(circle, rgba(255,255,255,0.15) 10%, transparent 11%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* خطوط الشبكة */
.grid {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* حد متعرج */
.zigzag {
    background-color: #3498db;
    background-image:
        linear-gradient(135deg, #ffffff 25%, transparent 25%),
        linear-gradient(225deg, #ffffff 25%, transparent 25%);
    background-size: 20px 20px;
    background-position: bottom;
    background-repeat: repeat-x;
    padding-bottom: 20px;
}

/* نسيج ألياف الكربون */
.carbon-fiber {
    background-color: #282828;
    background-image:
        radial-gradient(circle, #333 1px, transparent 1px),
        radial-gradient(circle, #333 1px, transparent 1px);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
}

نص التدرج مع background-clip

أحد أكثر تأثيرات CSS إثارة بصرياً هو ملء النص بتدرج. تستخدم هذه التقنية background-clip: text لقص التدرج لشكل أحرف النص، ثم تجعل لون النص شفافاً حتى يظهر التدرج من خلاله.

/* نص تدرج أساسي */
.gradient-text {
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 3rem;
    font-weight: 800;
}

/* نص تدرج قوس قزح */
.rainbow-text {
    background-image: linear-gradient(to right,
        #e74c3c, #f39c12, #f1c40f, #2ecc71, #3498db, #9b59b6
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.5rem;
    font-weight: 700;
}

/* نص تدرج متحرك */
.animated-gradient-text {
    background-image: linear-gradient(90deg,
        #667eea, #764ba2, #f093fb, #667eea
    );
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-move 4s ease infinite;
    font-size: 3rem;
    font-weight: 800;
}

@keyframes gradient-move {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* نص معدني / ذهبي */
.gold-text {
    background-image: linear-gradient(
        to bottom,
        #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 3rem;
    font-weight: 700;
}

حدود التدرج

لا يدعم CSS التدرجات مباشرة في خاصية border، لكن هناك عدة تقنيات لإنشاء تأثيرات حدود التدرج. تستخدم الطرق الأكثر شيوعاً border-image أو تدرج خلفية مع الحشوة.

/* الطريقة 1: border-image */
.gradient-border-1 {
    border: 3px solid;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
    padding: 1.5rem;
}

/* الطريقة 2: تدرج خلفية مع حشوة */
.gradient-border-2 {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 3px; /* هذا يصبح عرض الحد */
}
.gradient-border-2-inner {
    background: white;
    padding: 1.5rem;
}

/* الطريقة 3: حد تدرج مستدير باستخدام عنصر زائف */
.gradient-border-rounded {
    position: relative;
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
}
.gradient-border-rounded::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 14px; /* أكبر قليلاً من العنصر */
    z-index: -1;
}

/* حد تدرج عند التمرير */
.hover-gradient-border {
    border: 3px solid #ddd;
    border-image: none;
    padding: 1.5rem;
    transition: border-color 0.3s;
}
.hover-gradient-border:hover {
    border: 3px solid;
    border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

طبقات التدرج فوق الصور

أحد أكثر الاستخدامات العملية للتدرجات هو وضع طبقاتها فوق صور الخلفية لتحسين قابلية قراءة النص أو إضافة صبغات لونية أو إنشاء تأثيرات التلاشي. يتم تحقيق ذلك بتكديس تدرج فوق صورة خلفية باستخدام خلفيات متعددة.

/* طبقة داكنة لقابلية قراءة النص */
.hero-dark {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url('hero-image.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    padding: 4rem;
}

/* طبقة صبغة لونية */
.hero-tinted {
    background-image:
        linear-gradient(135deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8)),
        url('hero-image.jpg');
    background-size: cover;
    background-position: center;
    color: white;
}

/* تلاشي سفلي للنص فوق الصورة */
.card-image {
    background-image:
        linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%),
        url('card-photo.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    color: white;
    min-height: 300px;
}

/* تأثير التلاشي الجانبي */
.side-fade {
    background-image:
        linear-gradient(to right, #ffffff 0%, transparent 30%, transparent 70%, #ffffff 100%),
        url('wide-photo.jpg');
    background-size: cover;
    background-position: center;
}

/* إضاءة مركزة شعاعية فوق الصورة */
.spotlight-image {
    background-image:
        radial-gradient(circle at 50% 40%,
            transparent 20%,
            rgba(0, 0, 0, 0.6) 80%
        ),
        url('portrait.jpg');
    background-size: cover;
    background-position: center;
}

/* تأثير ثنائي اللون */
.duotone {
    background-image:
        linear-gradient(rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9)),
        url('photo.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

أمثلة عملية للتدرجات

دعونا نجمع كل شيء معاً بأمثلة واقعية يمكنك استخدامها مباشرة في مشاريعك.

/* زر بتدرج */
.btn-gradient {
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* ترويسة بطاقة بتدرج */
.card-header-gradient {
    background-image: linear-gradient(135deg, #667eea, #764ba2);
    padding: 1.5rem;
    border-radius: 12px 12px 0 0;
    color: white;
}

/* فاصل / خط تدرج */
.gradient-divider {
    height: 3px;
    background-image: linear-gradient(to right,
        transparent,
        #667eea 20%,
        #764ba2 80%,
        transparent
    );
    border: none;
    margin: 2rem 0;
}

/* خلفية تدرج للبطل */
.gradient-hero {
    background-color: #1a1a2e;
    background-image:
        linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* هيكل تحميل بتدرج متحرك */
.skeleton {
    background-color: #e0e0e0;
    background-image: linear-gradient(
        90deg,
        #e0e0e0 0%,
        #f0f0f0 50%,
        #e0e0e0 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* تدرج شبكي (تقريب) */
.mesh-gradient {
    background-color: #ff6b6b;
    background-image:
        radial-gradient(at 40% 20%, #ff6b6b 0%, transparent 50%),
        radial-gradient(at 80% 0%, #feca57 0%, transparent 50%),
        radial-gradient(at 0% 50%, #48dbfb 0%, transparent 50%),
        radial-gradient(at 80% 50%, #ff9ff3 0%, transparent 50%),
        radial-gradient(at 0% 100%, #a29bfe 0%, transparent 50%),
        radial-gradient(at 80% 100%, #ffeaa7 0%, transparent 50%);
}

/* خصائص مخصصة لتدرجات قابلة لإعادة الاستخدام */
:root {
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --gradient-danger: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
    --gradient-warning: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-dark: linear-gradient(135deg, #2c3e50 0%, #4ca1af 100%);
    --gradient-sunset: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

/* تطبيق التدرجات */
.bg-gradient-primary { background-image: var(--gradient-primary); }
.bg-gradient-success { background-image: var(--gradient-success); }
.bg-gradient-danger  { background-image: var(--gradient-danger); }
.bg-gradient-warning { background-image: var(--gradient-warning); }
.bg-gradient-dark    { background-image: var(--gradient-dark); }
.bg-gradient-sunset  { background-image: var(--gradient-sunset); }

/* أدوات نص التدرج */
.text-gradient-primary {
    background-image: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient-sunset {
    background-image: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}