التدرجات اللونية في التصميم الحديث
عادت التدرجات اللونية بقوة إلى واجهات المواقع والتطبيقات الحديثة، فهي تضيف عمقًا وحيوية للأزرار والخلفيات والبطاقات والشعارات، دون الحاجة إلى صور ثقيلة تبطئ تحميل الصفحة. وبفضل CSS أصبح بإمكانك إنشاء تدرجات بسطر واحد من الكود يعمل في جميع المتصفحات الحديثة.
كيف تستخدم المولد؟
- اختر نوع التدرج: خطي يمتد في اتجاه معين، أو دائري ينتشر من المركز، أو مخروطي يدور حول نقطة.
- حدد زاوية التدرج بالمنزلق.
- اختر ألوان التدرج وموضع كل لون بالنسبة المئوية، وأضف حتى ستة ألوان.
- جرّب التدرجات الجاهزة أو زر «عشوائي» للإلهام.
- انسخ كود CSS والصقه في ملف التنسيق، أو نزّل التدرج صورة PNG بدقة 1920×1080 لاستخدامها خلفية.
أنواع التدرجات في CSS
linear-gradient(): الأكثر استخدامًا، مثالي للخلفيات والأزرار. الزاوية 90 من اليسار إلى اليمين، و180 من الأعلى إلى الأسفل.radial-gradient(): يناسب إبراز منطقة مركزية أو إنشاء تأثير توهج.conic-gradient(): ينتشر حول نقطة كعجلة الألوان، ويُستخدم للرسوم الدائرية والمؤثرات الفنية.
نصائح لتدرجات جميلة
- اختر ألوانًا متجاورة على عجلة الألوان (مثل البنفسجي والأزرق) لتدرج ناعم ومريح.
- تجنب الانتقال بين لونين متعاكسين تمامًا (مثل الأحمر والأخضر) لأنه ينتج لونًا رماديًا باهتًا في المنتصف؛ أضف لونًا وسيطًا.
- تأكد من تباين كافٍ بين النص والتدرج خلفه لسهولة القراءة.
- يتضمن الكود المنسوخ لونًا احتياطيًا للمتصفحات القديمة جدًا.
استخرج ألوان شعارك أو صورتك أولًا بأداة استخراج الألوان من الصورة ثم استخدمها هنا لتدرج متناسق مع هويتك.
نصائح تصميم لتدرجات أجمل
- اختر ألوانًا متجاورة: التدرج بين لونين متقاربين على عجلة الألوان (مثل البنفسجي والأزرق) يبدو ناعمًا وعصريًا، بينما الألوان المتضادة تماما قد تُنتج لونًا رماديًا باهتًا في المنتصف.
- أضف نقطة لون ثالثة: لون وسيط أفتح قليلًا يجعل الانتقال أكثر حيوية.
- اهتم بالتباين: إذا وضعت نصًا فوق التدرج، تأكد من وضوحه على أفتح وأغمق جزء فيه.
- استعمله باعتدال: تدرج واحد مميز في الواجهة أو زر الدعوة لاتخاذ إجراء أقوى من تدرجات في كل مكان.
استخراج ألوان علامتك التجارية
هل لديك شعار أو صورة تريد مطابقة ألوانها؟ استخرج لوحة الألوان منها عبر مستخرج الألوان من الصور، ثم استخدمها هنا لصنع تدرج متناسق مع هويتك.
الأداء
تدرجات CSS تُرسم بواسطة المتصفح، فلا تحتاج إلى تحميل صور، وتبقى حادة على كل الشاشات، وحجمها بضعة أحرف فقط، مما يحسّن سرعة الموقع وتجربة المستخدم.
الأسئلة الشائعة
كيف أضيف التدرج إلى موقعي؟
انسخ الكود والصقه داخل قاعدة CSS للعنصر المطلوب، مثل body أو .hero.
هل تعمل التدرجات في جميع المتصفحات؟
نعم، التدرجات الخطية والدائرية مدعومة في جميع المتصفحات الحديثة، والمخروطية مدعومة منذ 2020 تقريبًا.
كيف أجعل التدرج للنص بدل الخلفية؟
أضف background-clip: text مع color: transparent إلى عنصر النص بعد خاصية الخلفية.
ما فائدة تنزيل PNG؟
لاستخدام التدرج خلفية لسطح المكتب أو الهاتف، أو في برامج التصميم والعروض التقديمية.
هل يمكنني استخدام التدرجات تجاريًا؟
نعم، الكود والصور الناتجة حرة الاستخدام دون قيود.
آخر تحديث: