إنشاء خلفيات متعددة الألوان في الموقع في لغة CSS الدرس |13| - Programmer Tech

Programmer Tech

تعلم البرمجة - علوم الكمبيوتر - أمن المعلومات - القرصنة الأخلاقية

إعلان اعلى المقالة

الأربعاء، 16 يونيو 2021

إنشاء خلفيات متعددة الألوان في الموقع في لغة CSS الدرس |13|


إنشاء خلفيات متعددة الألوان في الموقع

سوف نتعرَّف اليوم على كيفية إضافة اكثر من لون لخلفية الموقع دون إضافة صور أو أي شي آخر فقط من خلال الألوان, توجد عدة طريق للقيام بهذا الأمر فسوف نختار طريقتين للقيام به.

الطريقة الأولى من خلال موقع UiGradients

في البداية سوف نستخدم الطريقة من خلال موقع جميل جداً و هو UiGradients يمكن الوصول لرابط الموقع من خلال إضغط هنا, و عند الدخول لهذا الموقع سوف نجد به الكثير من الخلفيات كما يلي


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


بعدما إخترنا خلفية تُناسب طلبنا من الموقع نقوم بالضغط على إشارة <> في الأعلى ليتم إظهار كود جاهز لنا بهذه الخلفية


نقوم بتحديد السطر الأخير من الكود و الذهاب إلى محرر الأكواد الخاص بنا على ملف css, على سبيل المثال نُريد جعل اللون خلفية لكامل الموقع و هذا يعني أنه سوف نَضَعهُ على وسم جسم الصفحة body نقوم بتحديد body و إضافة الكود به كما يلي

body{
    background: linear-gradient(to right, #b91d73, #f953c6);

}


بعد لصق الكود في محرر الأكواد نقوم بتشغيل الكود في المتصفح لنرى ما إذا كانت الخلفية المتعددة الألوان قد تم تحديدها أم لا


كما نُلاحظ أن الخلفية قد تمت على كامل جسم الصفحة لأننا وضعناها على الوسم body, هذه الطريقة إستخدمنا بها الموقع الذي ذكرناه قبل قليل, فإذا نريد نحن أن نضع الخلفية بأنفسنا دون الحاجة لهذا الموقع.

الطريقة الثانية من خلال محرر الأكواد بأنفسنا

نقوم أولاً بتحديد أن اللون يجب أن يكون على وسم body ثم نقوم بكتابة backgroud-image لكي تكون خلفية للصفحة و إختيار لها linear-gradient ثم نقوم بكتابة الألوان التي نريدها كما يلي

body{
    background-image: linear-gradient(aqua, blue);
} 


إخترنا في الكود اللونين aqua و اللون blue ثم أغلقنا الكود بعلامة سيمي كولن;, و عند تشغيل هذا الكود في المتصفح سنجد النتيجة


كما نُلاحظ أنه تم وضع الخلفية لكن على شكل أشرطة, فإذا كنا نُريدها مرة واحدة في كامل الصفحة يجب علينا كتابة الإتجاه قبل أول قيمة مثلاً to left يعني إلى اليسار

body{
    background-image: linear-gradient(to left,aqua, blue);
}


و عند تشغيل هذا الكود ستكون نتيجته هي


و نستطيع تغير القيمة إلى اليمين أيضاً و نستطيع بنفس الطريقة بإضافة لون ثالث على الألوان أو رابع و خامس

body{
    background-image: linear-gradient(to right,aqua,blue,yellow,green);
}


قُمنا بإختيار الوضعية من اليمين to right ثم قُمنا بإختيار أربع ألوان و هي (أكوا, أزرق, اصفر, اخضر) لهذا الموقع و عندما نقوم بتشغيل الكود السابق في المتصفح سوف نجد مزيج من الألوان قد أصبح خلفية


بهذه الطريقة يُمكن تحديد خلفية لونية بأي لون يناسبنا و نقوم بإنشاء خلفيات من خلال الألوان بإحترافية.

هناك تعليق واحد:

  1. nice post, thank you for sharing
    https://www.igmguru.com/machine-learning-ai/rpa-uipath-certification-training/

    ردحذف

facebook

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *