مولد التدرج CSS

قم بإنشاء تدرجات CSS مذهلة بدون أي أدوات تصميم

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

أنواع تدرجات CSS

التدرجات الخطية الانتقال في خط مستقيم من لون إلى آخر. تحدد الزاوية الاتجاه: 0 درجة من الأسفل إلى الأعلى، و90 درجة من اليسار إلى اليمين، و180 درجة من الأعلى إلى الأسفل، و270 درجة من اليمين إلى اليسار. الزوايا الأكثر شيوعًا للتصميم هي 135 درجة (قطريًا) و90 درجة (أفقيًا). أي زاوية بين 0° و360° صالحة.

CSS: التدرج الخطي (135deg، #667eea، #764ba2)

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

CSS: التدرج الشعاعي (دائرة، #667eea، #764ba2)

دعم التدرجات في كل متصفح حديث

يتم دعم التدرجات الخطية والشعاعية في جميع المتصفحات الحديثة دون أي بادئة بائع. كانت الإصدارات الأقدم من Safari وChrome تتطلب في السابق بادئة -webkit- لعرض التدرجات بشكل صحيح، وهي بقايا من الأيام الأولى عندما كانت بنية تدرج CSS لا تزال قيد توحيدها، ولكن لم يكن هذا ضروريًا لأي متصفح شائع الاستخدام لسنوات عديدة حتى الآن، وبالتالي فإن البنية البسيطة غير المسبقة التي ينتجها هذا المولد تعمل في كل مكان دون تعديل.

إضافة المزيد من التوقفات اللونية

يستخدم المولد لونين، لكن تدرجات CSS تدعم أي عدد من توقفات الألوان في أي موضع. لإضافة لون ثالث في منتصف الطريق:

التدرج الخطي (135 درجة، #667eea 0%، #ff6b6b 50%، #764ba2 100%)

يمكنك أيضًا تحديد نقاط التوقف عند نسب مئوية محددة للتحكم في مكان حدوث التحولات:

التدرج الخطي (90 درجة، #000000 0%، #000000 50%، #ff0000 50%، #ff0000 100%)

يؤدي هذا إلى إنشاء انقسام حاد بدلاً من التدرج — وهو مفيد لبعض تأثيرات التصميم.

لوحات التدرج الشعبية

بعض مجموعات التدرج المحبوبة:

• المحيط: #2193b0 → #6dd5ed
• غروب الشمس: #FF512F → #DD2476
• الغابة: #134E5E → #71B280
• الحلم الأرجواني: #667eea → #764ba2
• النار: #f7971e → #ffd200
• سماء الليل: #0f0c29 → #302b63 → #24243e

استخدام التدرجات في CSS

تقبل خاصية اختصار الخلفية أو خاصية صورة الخلفية وظائف التدرج مباشرة:

.الرأس {

الخلفية: تدرج خطي (135 درجة، #667eea، #764ba2)؛

}

يمكن أيضًا تطبيق التدرجات على النص والحدود وطبقات القناع باستخدام تقنيات CSS المتقدمة.

الجمع بين التدرجات مع الصور

يسمح CSS بدمج التدرج مع صورة الخلفية باستخدام طبقات خلفية متعددة:

.البطل {

الخلفية: تدرج خطي (rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('photo.jpg') center/cover;

}

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

كيفية استخدام المولد

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

لماذا تتفوق تدرجات CSS على تدرجات الصورة

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

اختيار الألوان التي تعمل بشكل جيد معًا

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

التدرجات على النص والعناصر الأخرى

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

خاصة وفورية

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