CSS Gradient Generator
Create CSS gradients
Create CSS gradients يعمل محليا في المتصفح الخاص بك
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
يبني CSS Gradient Generator تدرجًا خطيًا أو شعاعيًا حقيقيًا من لونين وزاوية، ويظهره بالحجم الكامل، ويسلمك CSS. الزاوية هي الجزء الذي أخطأ الناس في قراءته: في CSS، النقطة 0 درجة لأعلى ويدور الاتجاه في اتجاه عقارب الساعة، لذا فإن 90 درجة تمتد من اليسار إلى اليمين و180 درجة تمتد من الأعلى إلى الأسفل. إن فهم هذا الخطأ هو السبب وراء ظهور التدرج رأسًا على عقب في المرة الأولى. يمكن أن يحمل كلا اللونين قيمة ألفا مكونة من ثمانية أرقام، وهي الطريقة التي تخفي بها التدرج اللوني على الصورة الرئيسية.
Where people use the
- بناء خلفية بطل تتلاشى بين لونين للعلامة التجارية.
- اختبار الزاوية التي تبدو صحيحة قبل الالتزام بها في الكود.
- إنتاج تدرج رأسي دقيق لبطاقة أو زر.
- إنشاء تراكب شبه شفاف يؤدي إلى تعتيم الصورة.
How to use the
- 1
اختر ألوان البداية والنهاية
استخدم منتقي الألوان أو اكتب قيمة سداسية عشرية. المعاينة وتحديث CSS أثناء تغييرهما.
- 2
اختر خطيًا أو شعاعيًا
يمتد الخط الخطي عبر الصندوق بزاوية مختارة. ينتشر شعاعيًا إلى الخارج من المركز على شكل دائرة.
- 3
اضبط الزاوية
اسحب شريط التمرير من 0 إلى 360 درجة. تذكر نقاط 0 لأعلى، و90 درجة لليمين، و180 درجة لأسفل، و270 درجة لليسار.
- 4
انسخ ملف CSS
القاعدة عبارة عن إعلان خلفية يمكنك لصقه مباشرة في ورقة أنماط، أو في خاصية صورة الخلفية إذا كنت تفضل ذلك.
النصائح وأفضل الممارسات
- يُفضل وجود اختلاف بسيط في النصوع للخلفيات التي تحمل نصًا؛ يُقرأ على أنه نسيج وليس إلهاء.
- بالنسبة للنص المتدرج، تحقق من التباين عند النقاط الأفتح والأغمق، وليس فقط المتوسط.
- حافظ على التدرجات عند محطتين أو ثلاث محطات؛ أكثر يميل إلى أن يبدو موحلاً.
الأسئلة المتداولة
في أي اتجاه تشير الزاوية؟
تشير درجة الصفر إلى أعلى العنصر وتزداد الزاوية في اتجاه عقارب الساعة. لذا فإن 90 درجة تتجه نحو اليمين و180 درجة تتجه نحو الأسفل. يعد هذا أمرًا غير بديهي إذا كنت معتادًا على قياس الزوايا الرياضية عكس اتجاه عقارب الساعة من اليمين.
لماذا يبدو التدرج الخاص بي ذو نطاقات؟
لأن اللونين المتقاربين في النصوع ينتجان خطوات مرئية على شاشة 8 بت، خاصة عبر مساحة كبيرة. عادةً ما تؤدي إضافة نقطة توقف ثالثة دقيقة، أو استخدام نطاق نصوع أوسع قليلاً، إلى إخفائها.
هل يمكنني استخدام الشفافية؟
نعم. استخدم قيمة سداسية عشرية مكونة من ثمانية أرقام مثل 667eea00 للشفافية الكاملة أو 667eea80 للنصف، وسوف يتلاشى التدرج اللوني فوق كل ما يقع خلفه.
هل التدرج مدعوم في كل مكان؟
يتم دعم التدرجات الخطية والشعاعية في كل متصفح حالي بدون بادئة. بادئات البائع مطلوبة فقط للإصدارات القديمة جدًا من Safari وAndroid، وهو ما يعني عمليًا عدم إنشاء أي شيء بعد عام 2015 تقريبًا.
لماذا لا يظهر التدرج الخاص بي؟
لأن العنصر ليس له ارتفاع. يتم رسم التدرج اللوني في مربع العنصر، لذلك ينهار div الفارغ إلى ارتفاع صفر ولا يظهر أي شيء. ضبط الارتفاع أو إضافة محتوى.
هل يولد أكثر من توقفين لونيين؟
لا، هذه الأداة تتعامل مع اثنين. للحصول على تدرج متعدد التوقفات، استخدم CSS الذي ينتجه وأضف نقاط التوقف يدويًا؛ بناء الجملة هو ببساطة المزيد من أزواج الألوان والنسبة المئوية مفصولة بفواصل.