مُستَمِرُاتِ CSS دون سُؤالِ سُطْحِ المُنْتَج — أنشئها بصريًا وانطلق بها

لقد فتحت ملفًا جديدًا لـ CSS، وكتبته background:، ثم توقفت أمام الشاشة. تعرف أنك تريد تدرجًا. تعرف أن الخاصية هي linear-gradient. لا يمكنك تذكّر ما إذا كان الزاوية يبدأ بالدرجة الأولى أو الأخيرة، أو ما إذا كانت الدرجات تتحرك عكس الساعات أو في اتجاه الساعات، أو لماذا تبدو الألوان التي كتبتها غير مطابقة لما تتخيله.

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

كيف تعمل تدرجات linear-gradient بالفعل

البنية الأساسية هي:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

هذا direction هو ما يُسبب التوتر عند الناس. لديك خياران: مصطلح أو زاوية بالدرجات.

المصطلحات: to top, to bottom (الافتراضي)، to left, to right، والاتجاهات القائمة على القطر: to top right, to bottom left، إلخ.

الدرجات: 0deg تتجه إلى الأعلى (كما في to top). تزداد الزاوية في اتجاه الساعات، لذا فإن 90deg تتجه إلى اليمين، 180deg تتجه إلى الأسفل، 270deg تتجه إلى اليسار.

هناك جزء يجب تذكّره: 0deg = إلى الأعلى، من هناك باتجاه الساعات. الباقي يُبنى من ذلك.

ستستخدم ست أنماط هذا الأسبوع

1. من الأعلى إلى الأسفل (الافتراضي)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. التباعد إلى الشفاف

إذا كنت ترغب في وضع نص فوق صورة، فتحتاج إلى أن يكون الأسفل سوداء والأنساق واضحة. ابحث عن transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

ملاحظة واحدة: تجنب transparent في سايفارا عند التحول من قيمة ملونة — فإنه يمر عبر الأسود. استخدم rgba(r, g, b, 0) مع نفس القيم RGB بدلاً من ذلك.

3. خلفية مائلة للإثارة

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg هي تقريبًا من الزاوية السفلى اليسرى إلى الأعلى اليمين — زاوية مميزة مثل غلاف مجلة. تُعرف تدرجات متعددة الأماكن مثل هذه بمسافات المواقع بعد كل لون. بدون نسبة، توزع CSS المسافات بشكل متساوٍ.

4. تدرج خفيف للبطانة

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

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

5. تدرج للزر

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

من اليسار إلى اليمين (90deg) يشعر بالحيوية. اجمعه مع حالة التفاعل التي تُغيّر موقع الخلفية (باستخدام background-size: 200% وإعادة التحديد background-position) لخلق تأثير سحب سلس على الأزرار.

6. توقف لون محدد (بدون تباعد)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

تُخلق خط محدد عند نفس الموضع من خلال توقفين لونين. مفيد للإطارات المقسمة، مؤشرات التقدم، وأنماط الأعمدة — كل ذلك دون عنصر إضافي أو صورة.

تدرجات دائرية: الآخر

radial-gradient تنتشر من نقطة مركزية بدلًا من الاتجاه:

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

الشيء الأول هو الشكل (circle أو ellipse) يليه الموضع. at center هو الافتراضي. اجعل نقطة التركيز تتحرك باستخدام at top left, at 30% 60%، إلخ. تدرجات الدائرة ممتازة للتأثيرات المُضيئة، زر مُضيء، وأسفل الصفحة المُراد.

البنية التي ينساها المطورون (وأفضل طريقة للاحتفاظ بها)

الثلاثة أشياء التي تُسبب صعوبة للمطورين، حسب التكرار:

• الزاوية قبل الألوان — الاتجاه يأتي دائمًا قبل أي توقف لون.
• الدرجات في اتجاه الساعات — 90deg هي إلى اليمين، وليس إلى الأعلى. 0deg هي إلى الأعلى.
• المنطقة الشفافة إلى اللون — تُخلط المتصفحات عبر الأسود ما لم تكن القيم RGBA متطابقة في الطرفين.

إذا كنت ترغب في تجنب التجربة والخطأ تمامًا، فإن مُنشئ تدرج الألوان CSS في iotools.cloud تسمح لك باختيار الألوان بصريًا، وسحب التوقفات، وعكس الزاوية، ونسخ الكود النهائي في نقرة واحدة. لا حاجة لتخمين ما يبدو عليه 143deg .

دعم المتصفح

linear-gradient و radial-gradient مدعومة في جميع المتصفحات الحديثة — تدعمها كروم، فايرفوكس، سايفارا، وإيدج دون تسميات مسبقة. لا تحتاج إلى -webkit- تسميات مسبقة في بنية التدرجات القياسية في عام 2026.

الاستثناء الوحيد هو النسخ القديمة -webkit-linear-gradient التي استخدمتها سايفارا 5.1 وكروم 10-25. ما لم تدعم متصفحات من عام 2012، يمكنك تجاهلها.

conic-gradient مدعومة بشكل قوي في المتصفحات الحديثة ولكن لا تدعم أي متصفحات قديمة — استخدمها عندما تكون المتصفحات المدعومة متجددة فقط.

انسَ البنية — اصنعها بصريًا

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

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