يقدم لك محرر Downcodes برنامجًا تعليميًا تفصيليًا حول كود التدرج اللوني لخلفية CSS. تشرح هذه المقالة استخدام التدرجات الخطية والتدرجات الشعاعية بطريقة بسيطة وسهلة الفهم، مكملة بنماذج من الأكواد لمساعدتك على إتقان مهارات تدرجات CSS بسهولة وإضافة لمسة من السطوع إلى تصميم الويب الخاص بك. سواء كنت مبتدئًا أو مطورًا ذا خبرة، يمكنك الاستفادة منه كثيرًا. سنبدأ بتدرج خطي بسيط ونشرح تدريجيًا الاستخدام المتقدم مثل الزوايا المخصصة، والتدرجات الشعاعية، وتوقفات اللون، وما إلى ذلك، ونناقش المشكلات المهمة مثل توافق المتصفح وتحسين الأداء، مما يساعدك في النهاية على إنشاء تصميمات ويب ملونة ومذهلة بصريًا خلفية الصفحة.
هناك نوعان رئيسيان من أكواد CSS لتدرجات ألوان الخلفية: التدرجات الخطية والتدرجات الشعاعية. يقوم التدرج الخطي بنقل الألوان بسلاسة على طول خط مستقيم، بينما يشع التدرج الشعاعي للخارج من نقطة ما. بالنسبة للمبتدئين، تتضمن كتابة كود CSS لتدرج لون الخلفية فهم وتطبيق خاصية صورة الخلفية، حيث يتم التعامل مع التدرجات فعليًا كصورة. سوف يتوسع ما يلي بالتفصيل حول كيفية استخدام التدرجات الخطية لإضافة تأثيرات خلفية ملونة إلى صفحات الويب أو المشاريع الخاصة بك.
يتم تعريف التدرجات الخطية بواسطة وظيفة الخطي التدرج () والتي تتطلب لونين على الأقل لإنشاء تأثير الانتقال. بناء الجملة الأساسي هو كما يلي:
صورة الخلفية: التدرج الخطي (الاتجاه، توقف اللون 1، توقف اللون 2، ...)؛
الاتجاه اختياري ويكون افتراضيًا من أعلى إلى أسفل. تحدد نقاط التوقف اللونية ألوان البداية والنهاية للتدرج. يمكنك إضافة ألوان متعددة لإنشاء تأثيرات تدرج معقدة.
لإنشاء خلفية متدرجة خطية تنتقل من الأزرق إلى الأحمر، يكون الكود كما يلي:
.عنصر {
صورة الخلفية: التدرج الخطي (الأزرق والأحمر)؛
}
لم يتم تحديد أي اتجاه هنا، فالاتجاه الافتراضي هو من الأعلى إلى الأسفل. إذا كنت تريد التدرج من اليسار إلى اليمين، يمكنك كتابة:
.عنصر {
صورة الخلفية: التدرج الخطي (إلى اليمين، الأزرق، الأحمر)؛
}
بالإضافة إلى استخدام الكلمة الأساسية الاتجاه، يمكنك أيضًا تحديد زاوية معينة لتحديد اتجاه التدرج، على سبيل المثال:
.عنصر {
صورة الخلفية: تدرج خطي (45 درجة، أزرق، أحمر)؛
}
سيؤدي هذا إلى إنشاء تأثير متدرج من الزاوية اليسرى العليا إلى الزاوية اليمنى السفلى (زاوية 45 درجة).
يتم تنفيذ التدرجات الشعاعية من خلال الدالة radial-gradient()، والتي تتطلب أيضًا تحديد لونين أو أكثر. على عكس التدرجات الخطية، تشع الألوان إلى الخارج من نقطة مركزية. بناء الجملة الأساسي هو كما يلي:
صورة الخلفية: تدرج شعاعي (حجم الشكل في الموضع، لون البداية، ...، اللون الأخير)؛
يعد الشكل والحجم اختياريين، حيث يتم تعيينهما افتراضيًا على شكل قطع ناقص والزاوية الأبعد لعنصر التراكب.
لإنشاء تدرج نصف قطري من الأبيض في المركز إلى الأزرق عند الحواف، يكون الكود كما يلي:
.عنصر {
صورة الخلفية: تدرج شعاعي (أبيض، أزرق)؛
}
سيؤدي هذا إلى إنشاء تدرج شعاعي بيضاوي افتراضي.
يمكنك تغيير شكل التدرج وحجمه، مثل إنشاء تدرج دائري وتحديد الحجم:
.عنصر {
صورة الخلفية: تدرج شعاعي (الجانب الأقرب للدائرة، أبيض، أزرق)؛
}
وهذا يجعل شكل التدرج دائريًا، بأبعاد تمتد فقط إلى الحافة الأقرب.
سواء أكان ذلك تدرجًا خطيًا أو شعاعيًا، فإن استخدام توقفات الألوان المتعددة يسمح لك بإنشاء تأثيرات تدرج أكثر تعقيدًا وثراءً. بناء الجملة هو كما يلي:
صورة الخلفية: التدرج الخطي (إلى اليمين، الأحمر، البرتقالي، الأصفر، الأخضر، الأزرق، النيلي، البنفسجي)؛
سيؤدي هذا إلى إنشاء تأثير قوس قزح، يظهر من اليسار إلى اليمين.
عند استخدام الخلفيات المتدرجة، عليك الانتباه إلى مشكلات توافق المتصفح. تدعم معظم المتصفحات الحديثة تدرجات CSS، لكن قد تواجه مشكلات في التوافق في بعض المتصفحات القديمة. يمكن حل هذه المشكلات باستخدام أداة البادئة التلقائية أو عن طريق إضافة بادئة المتصفح يدويًا. بالإضافة إلى ذلك، على الرغم من أن التدرجات تجلب تأثيرات بصرية جميلة إلى الصفحة، إلا أن التدرجات المعقدة للغاية قد تؤثر على سرعة تحميل الصفحة وأدائها، لذا يوصى بالاستخدام المعتدل.
باختصار، تعد تدرجات CSS أداة قوية ومرنة لإضافة تأثيرات خلفية جميلة إلى صفحات الويب والتطبيقات. من خلال التعرف على البنية الأساسية للتدرجات الخطية والشعاعية، بالإضافة إلى كيفية إنشاء تدرجات معقدة باستخدام التوقفات اللونية، يمكنك تصميم أنماط خلفية ملونة واحترافية.
1. كيف تكتب كود تدرج لون الخلفية باستخدام CSS؟
لتحقيق تأثير تدرج لون الخلفية، يمكنك استخدام وظيفة CSS الخطية التدرج (). تقوم هذه الوظيفة بإنشاء خلفية متدرجة خطيًا بناءً على زاوية محددة.
فيما يلي نموذج التعليمات البرمجية لتطبيق تدرج خلفية زرقاء من الأعلى إلى الأسفل على عنصر ما:
.my-element { الخلفية: خطي متدرج (إلى الأسفل، #0000ff، #0000cc)؛}في هذا المثال، إلى الأسفل يحدد اتجاه التدرج، مما يعني أنه من الأعلى إلى الأسفل، #0000ff هو لون البداية، و#0000cc هو لون النهاية.
2. كيفية تحقيق تدرج لون الخلفية في اتجاهات مختلفة؟
بالإضافة إلى الأسفل، يمكنك أيضًا تغيير اتجاه التدرج. فيما يلي بعض أمثلة التوجيه شائعة الاستخدام:
إلى الأعلى يمثل التدرج من الأسفل إلى الأعلى إلى اليمين يمثل التدرج من اليسار إلى اليمين إلى أسفل اليمين يمثل التدرج من أعلى اليسار إلى أسفل اليمين إلى أعلى اليسار يمثل التدرج من أسفل اليمين إلى أعلى اليساريمكنك أيضًا تحديد الزاوية، على سبيل المثال:
45 درجة تمثل التدرج من أعلى اليسار إلى أسفل اليمين 135 درجة تمثل التدرج من أعلى اليمين إلى أسفل اليسار3. كيفية تحقيق تدرج الخلفية لألوان متعددة؟
بالإضافة إلى التدرجات اللونية، يمكن أيضًا استخدام المزيد من الألوان لتحقيق تأثيرات تدرج الخلفية الملونة.
فيما يلي نموذج التعليمات البرمجية الذي يطبق تدرجًا للخلفية بثلاثة ألوان (من اليسار إلى اليمين):
.my-element { الخلفية: خطي متدرج (إلى اليمين، #ff0000، #00ff00، #0000ff)؛}في هذا المثال، الألوان المتدرجة من اليسار إلى اليمين هي الأحمر والأخضر والأزرق. يمكنك زيادة الألوان أو تقليلها حسب الحاجة وضبط موضعها لإنشاء تأثيرات متدرجة أكثر تعقيدًا.
آمل أن تساعدك هذه المقالة على فهم تدرجات ألوان خلفية CSS وتطبيقها بشكل أفضل. لمزيد من المحتوى المثير، يرجى الاستمرار في متابعة محرر Downcodes!