السلام عليكم، سنرى في هذا الدرس أنواع الخلفيات في CSS، بما فيها الخلفيات الملونة و الخلفيات الصورية و Linear-Gradient و Radial-Gradient.
الخلفيات الملونة
تسمى الخاصية (Property) المسؤولة عن إنشاء الخلفيات الملونة بـ 'BACKGROUND-COLOR' و تقبل نفس قيم الخاصية 'COLOR' التي رأيناها في الدرس السابق درس الألوان و الشفافية في CSS، و لا مانع أن نذكِّر بهذه القيم :
* القيمة بإسم اللون.
* القيمة بـ Hexadecimal.
* القيم بـ RGB و RGBa.
الخلفيات الصورية
إنشاء الخلفيات الصورية
تسمى الخاصية (Property) المسؤولة عن إنشاء الخلفيات الصورية بـ 'BACKGROUND-IMAGE' و لديها نوعين من القيم حسب نوع استدعاء الصورة، يعني هل ستستدعى من الويب أو من المخدم الخاص :
* النوع الأول يُكتب عبارة عن كلمة 'URL' ثم قوسين و داخل القوسين يقحم عنوان URL للصورة المراد استدعاؤها، و هذا النوع يحدّد استدعاء الصورة من الويب.
* النوع الآخر يُكتب عبارة عن كلمة 'URL' ثم قوسين و داخل القوسين يقحم مسار الصورة المراد استدعاؤها بتطبيق قاعدة المسارات التي رأيناها في درس الصور في HTML، و هذا النوع يحدّد استدعاء الصورة من المخدّم الخاص.
خواص التعديل على الخلفيات الصورية
التعديل على تكرار صورة الخلفية
بعد استدعاء صورة الخلفية، التنسيق التلقائي للـ HTML يجعلها تظهر مكررة، للتعديل على تكرار صورة الخلفية هناك خاصية (Property) بإسم 'BACKGROUND-REPEAT' لديها أربع أنواع قيم :
• REPEAT : تُظهر صورة الخلفية مكررة.
• REPEAT-X : تُظهر صورة الخلفية مكررة أفقياً.
• REPEAT-Y : تُظهر صورة الخلفية مكررة عمودياً.
• NO-REPEAT : تُظهر صورة الخلفية وحيدة بدون تكرار.
التعديل على حجم صورة الخلفية
بعد استدعاء صورة الخلفية، التنسيق التلقائي للـ HTML يجعلها تظهر بحجمها الأصلي، للتعديل على حجم صورة الخلفية هناك خاصية (Property) بإسم 'BACKGROUND-SIZE' تقبل القيم بنسبة مئوية، بالبكسل 'px' و بالـ 'em'.
التعديل على تثبيت صورة الخلفية
هناك خاصية (Property) بإسم 'BACKGROUND-ATTACHMENT' تُعدل على تثبيت صورة الخلفية، و لديها نوعين من القيم :
• SCROLL : تعمل على تثبيت الخلفية الصورية نسبة إلى صفحة الويب التي تحتويها.
• FIXED : تعمل على تثبيت الخلفية الصورية نسبة إلى نافذة المتصفح.
التعديل على وضعية صورة الخلفية
هناك خاصية (Property) تُعدل على وضعية صورة الخلفية اسمها 'BACKGROUND-POSITION' و لديها نوعين من القيم :
• النوع الأول يحدَّد ككلمات مفتاحية للإتجاهات الثمانية في مستوى شاقولي تنائي الأبعاد و هم :
- TOP : تُظهر صورة الخلفية أعلى الوسط.
- BOTTOM : تُظهر صورة الخلفية أسفل الوسط.
- RIGHT : تُظهر صورة الخلفية وسط اليمين.
- LEFT : تُظهر صورة الخلفية وسط اليسار.
- TOP RIGHT : تُظهر صورة الخلفية أعلى اليمين.
- TOP LEFT : تُظهر صورة الخلفية أعلى اليسار.
- BOTTOM RIGHT : تُظهر صورة الخلفية أسفل اليمين.
- BOTTOM LEFT : تُظهر صورة الخلفية أسفل اليسار.
• النوع الآخر يُحدَّد بقيمتين بالبكسل بحيث أن هذا النوع أدق شيئاً ما من النوع الأول :
- قيمة البكسل التي في يسار القيمة تحدِّد إزاحة صورة الخلفية من اليسار إلى اليمين.
- قيمة البكسل التي في يمين القيمة تحدِّد إزاحة صورة الخلفية من الأعلى إلى الأسفل.
إقحام العديد من الخلفيات المصورة في عنصر HTML واحد
يمكن إقحام العديد من الخلفيات المصورة في عنصر HTML واحد، و ذلك عبر الخاصية 'BACKGROUND-IMAGE'، لكن في قيمتها يجب وضع كلمات 'URL' بقوسيها مفروقة بفواصل بينها، ثم استدعاء الصور من الويب أو من المخدم الخاص، و للتعديل عليهم يجب إقحام خواص التعديل على الخلفيات المصورة، ثم في قيمها يجب وضع التعديل لكل خلفية مصورة مفروق بفاصلة عن الآخر و بالترتيب نفسه الذي في قيمة الخاصية 'BACKGROUND-IMAGE'.
الفيديو التوضيحي للدرس
LINEAR-GRADIENT
ما هو LINEAR-GRADIENT ؟
LINEAR-GRADIENT هي خلفية تُظهر العديد من الألوان متدرجة بشكل خطي من الحافة إلى الحافة المقابلة.
إنشاء LINEAR-GRADIENT
تسمى الخاصية (Property) المسؤولة عن إنشاء Linear-Gradient بـ 'BACKGROUND' و في قيمتها تكتب كلمة 'LINEAR-GRADIENT' ثم قوسين، و بين القوسين يكتب في الأول توجيه الألوان ثم قيم الألوان الكل مفروق بفاصلة حسب الترتيب المراد ظهور الألوان به في Linear-Gradient.
يمكن في توجيه الألوان إقحام إما الكلمات المفتاحية للإتجاهات الثمانية مرفوقة بكلمة 'TO' في البداية، و إما درجة من 0deg إلى 360deg علماً أن 0deg تُوجِّه الألوان من الأسفل إلى الأعلى، و 90deg توجه الألوان من اليسار إلى اليمين، و 180deg توجه الألوان من الأعلى إلى الأسفل، و 270deg توجه الألوان من اليمين إلى اليسار.
يمكن إقحام قيم الألوان بإسم اللون أو بـ Hexadecimal أو بـ RGB أو بـ RGBa أو مختلطة، و يمكن تحديد حجم لون ما بكتابة نسبة مئوية بعد قيمة اللون مباشرة.
RADIAL-GRADIENT
ما هو RADIAL-GRADIENT ؟
RADIAL-GRADIENT هي خلفية تُظهر العديد من الألوان متدرجة بشكل شعاعي من المركز إلى الحافة.
إنشاء RADIAL-GRADIENT
الخاصية (Property) المسؤولة عن إنشاء Radial-Gradient هي 'BACKGROUND' أيضاً، إلا أن Radial-Gradient ثلاث أنواع :
• النوع الأول هو النوع العادي حيث تكتب في قيمة الخاصية 'BACKGROUND' كلمة 'RADIAL-GRADIENT' ثم قوسين، و بين القوسين تكتب في الأول كلمة 'CIRCLE' ثم قيم الألوان الكل مفروق بفاصلة حسب الترتيب المراد ظهور الألوان به في Radial-Gradient.
• النوع الثاني يحتوي على نفس قيمة خاصية النوع الأول، إلا أنه يستبدل في قيمة النوع الثاني كلمة 'CIRCLE' بـ 'CLOSEST-SIDE AT' ثم نسبتين مئويتين تصنفان كإحداثيات إزاحة المركز، فالنسبة المئوية التي في اليسار تحدد إزاحة المركز أفقياً، أما النسبة المئوية التي في اليمين تحدد إزاحة المركز عمودياً.
• النوع الثالث يحتوي على نفس قيمة خاصية النوع الأول، إلا أنه يستبدل في قيمة النوع الثالث كلمة 'CIRCLE' بـ 'FARTHEST-SIDE AT' ثم نسبتين مئويتين تصنفان كإحداثيات إزاحة المركز، فالنسبة المئوية التي في اليسار تحدد إزاحة المركز أفقياً، أما النسبة المئوية التي في اليمين تحدد إزاحة المركز عمودياً.
الفرق بين النوع الثاني و النوع الثالث هو أن في النوع الثاني تبقى دوائر الألوان كاملة الظهور داخل محيط Radial-Gradient، على عكس النوع الثالث لا تظهر دوائر الألوان كاملة.
مثل Linear-Gradient يمكن في Radial-Gradient إقحام قيم الألوان بإسم اللون أو بـ Hexadecimal أو بـ RGB أو بـ RGBa أو مختلطة، و يمكن أيضاً تحديد حجم لون ما بكتابة نسبة مئوية بعد قيمة اللون مباشرة.
الأكواد المستعملة في الدرس
أتمنى أن تستفيدوا من الدرس