مُستَوِيَات CSS الكتابة والتصحيح دون تخمين

مُستَوِيَات CSS هي واحدة من الميزات التي تبدو بسيطة حتى تنظر إلى كتلة مُلطية بني اللون حيث تنتظرك تدريج نقي من الأزرق إلى الأرجواني. لديها أوجه تعقيد، وطريقة التدقيق غير واضحة، وغالبًا ما تتوقف التدريجات عند البداية بمشاكلها.

هذا مرجع عملي. كل مفهوم يحتوي على كود يعمل. افتح مُولد تدريجات CSS في علامة تبويب أخرى — ستحتاج إلى تجربة أثناء القراءة.

الأنواع الثلاثة — ومتى تستخدم كل منها

linear-gradient مُخصص للاختلافات الاتجامية: خلفيات المقدمة، ملء الأزرار، مُقسّمات.

background: linear-gradient(135deg, #6366f1, #8b5cf6);

radial-gradient تُنبع من نقطة مركزية — مناسبة للتأثيرات المُركّزة، الأضواء، وعناصر واجهة المستخدم الدائرية.

background: radial-gradient(circle at 30% 40%, #f59e0b, #ef4444);

conic-gradient تتحرك حول زاوية مركزية — هي الخيار المناسب لرسم الخرائط، أدوات التحميل، وعوامل اللون.

background: conic-gradient(from 90deg, #3b82f6, #8b5cf6, #3b82f6);

مبدأ عام: إذا كان التحول يتحرك في اتجاه معين، استخدم الخطي. إذا كان ينبع من نقطة، استخدم الراديلي. إذا كان يدور، استخدم التدريجي.

تحليل القواعد: الأجزاء التي تُربك الناس

أكبر مصدر للارتباك هو الاتجاه مقابل الزاوية. to right و 90deg كلاهما يُنتج تدريجًا من اليسار إلى اليمين، لكنهما يختلفان في طريقة التعامل مع العناصر غير المربعة. استخدم مصطلحات الاتجاه عند رغبتك في تكييف التدريج مع شكل العنصر. استخدم القيم بالدرجة عند الحاجة إلى التحكم الدقيق.to right, to bottom rightالإيقافات اللونية

هي التي تُهمس فيها الدقة: النسخة الثانية تُحافظ على لون أصفر ثابت لـ 30%، ثم تنتقل إلى أرجواني. بدون مواقف محددة، تُحصل على تدريج متساوي وسلاس.

/* Even distribution — browser figures out spacing */
background: linear-gradient(to right, #f97316, #8b5cf6);

/* Explicit stops */
background: linear-gradient(to right, #f97316 0%, #f97316 30%, #8b5cf6 60%, #8b5cf6 100%);

يمكنك أيضًا إلزام حد لون مفاجئ — مفيد لأنماط مُقسّمة:

المشاكل الشائعة وما يسببها بالفعل

/* Hard mid-stop: sharp color transition at 50% */
background: linear-gradient(to right, #3b82f6 50%, #ef4444 50%);

الأنماط

— خطوط مرئية بدل تدريج نقي — تظهر عادة مع تحوّلات من لون بسيط إلى لون آخر. إضافة توقف متوسط بسيط وتحريك الألوان بدرجة بسيطة غالبًا ما يحل المشكلة: عدم تدريج الألوان بسلاسة

/* Before — banding prone */
background: linear-gradient(180deg, #1e1b4b, #312e81);

/* After — add a mid nudge */
background: linear-gradient(180deg, #1e1b4b 0%, #2e2b6e 50%, #312e81 100%);

— تحوّل الأرجواني إلى بني بين الأحمر والأزرق — هو مشكلة معروفة في نظام sRGB. أدخلت ميزة التدريج في مستوى ألوان CSS 4، والتي تُدمج في مساحة لونية محسوسة: الدعم المتوفر في المتصفحات في عام 2026. إذا كنت بحاجة إلى تغطية مُبكرة، احتفظ بـ تدريج القيمة القياسية كمُستوى احتياطي. in oklab مُستَوِيَات التدريج الدائرية في متصفحات WebKit القديمة

/* Modern — cleaner blends */
background: linear-gradient(in oklab to right, #ef4444, #3b82f6);

: أضف تدريجًا بسيطًا كمُستوى احتياطي للوظائف — مثل الرسوم البيانية، مؤشرات التقدم — لأن فشلها في التصميم لا يُعتبر مقبولًا، ولكن فشل واجهة المستخدم لا يُسمح به:

الطبقات المتداخلة للتدريجاتيمكن للخلفيات CSS استقبال قيم متعددة — تدريجات تُضاف مثل طبقات، من الأعلى إلى الأسفل حسب ترتيب الإعلان:

.pie {
  background: #6366f1; /* fallback */
  background: conic-gradient(#6366f1 var(--pct), #e5e7eb var(--pct));
}

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

محدودية واحدة: طبقات التدريجات التي تحتوي على

background:
  linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
  radial-gradient(ellipse at 20% 80%, #6366f1 0%, transparent 60%),
  radial-gradient(ellipse at 80% 20%, #f59e0b 0%, transparent 60%),
  #0f172a;

أو توقفات شفافة تتفاعل مع ما وراءها في نفس

الطبقات، وليس مع خلفية الصفحة. اخطط لترتيب الطبقات بحسب ذلك. rgba مُتغيرات CSS تُجعل التدريجات قابلة للتعديل background أرقام الألوان المُحددة بحزم تُعرقل أنظمة التصميم. اجعل توقفات الألوان متغيرات بدلًا من ذلك:

التبديل بين الألوان يصبح تغييرًا لمتغير واحد. اجمع ذلك مع

لإعطاء تدريجات متحركة — دون ذلك، لا يمكن للـ CSS أن يُدريج بين قيم التدريج:

:root {
  --gradient-start: #6366f1;
  --gradient-end: #8b5cf6;
  --gradient-angle: 135deg;
}

.card {
  background: linear-gradient(var(--gradient-angle), var(--gradient-start), var(--gradient-end));
}

[data-theme="warm"] {
  --gradient-start: #f97316;
  --gradient-end: #ef4444;
}

الأداء: عندما تُكلف التدريجات أكثر من صورة @property تُحول التدريجات إلى صور على مستوى الرسم في وحدة الرسم. بالنسبة للتدريجات البسيطة والثابتة، يكون هذا أخف من طلب صورة عبر HTTP. ولكن التدريجات المعقدة المتداخلة على عناصر تُرسم بانتظام يمكن أن تخلق عوائق في الرسم.

@property --gradient-angle {
  syntax: '<angle>';
  initial-value: 135deg;
  inherits: false;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 495deg; }
}

.animated {
  animation: rotate-gradient 4s linear infinite;
  background: linear-gradient(var(--gradient-angle), #6366f1, #8b5cf6);
}

أنت بحاجة إلى مراقبة هذه الأنماط:

أكثر من 3-4 طبقات من التدريجات على عنصر واحد

التدريجات على

• الخلفيات — تُرسم كلما تمت مسح الصفحة
• التدريجات المتحركة بدون position: fixed — هذه تُحفز إعادة رسم كامل بدل التحديثات المُركبة
• استخدم أدوات تحليل الأداء في أدوات التصميم قبل التحسين. معظم استخدامات التدريجات لا تصل إلى هذه الحدود. عندما تصل إلى عقبة، يُفضل تحويلها إلى صورة مُسبق التحميل أو التحول إلى @property مُبناة على التحريك

ابدأ بالمُولد، انتهِ بالكود @propertyأسرع طريقة للحصول على تدريج يعمل هي من خلال الرؤية: استخدم

لضبط ألوانك وتواريخها، ثم نسخ النتيجة إلى ملفك المخصص. من هناك، يمكن استخدام التقنيات السابقة مثل استخراج المتغيرات، التراكيب،

التدريج — لتوسيعها إلى شيء جاهز للإنتاج دون تخمين. مُنشئ تدرج الألوان CSS مُستَوِيَات CSS: كتابة وتصحيح دون تخمين 2 oklab مُستَوِيَات CSS: كتابة وتصحيح دون تخمين 1

قد يعجبك أيضاً