بسم الله الرحمن الرحيم
قدمنا لكم فى درسنا السابق [css] الدرس 3 : تعرف على css انواع اكواد السى اس اس والان درسنا اليوم باذن الله كيفية كتابة كود css
كتابة كود css
كما قلنا سابقا اذا التاثير الذى كنت تريد فعلة عام على المدونة نستخدم نوع css بدون لتغيير وسم body مثلما فعلنا مع الخطوط
الان كيف نكتب كود css
مثلنا اردنا ان نعمل خلفية للمدونة
body {
background : #dedede;}
- لاحظنا هنا الملون بالبرتقالى هو نوع التاثير
- ثم كتبنا نقطتين فوق بعضهما لنبداء كتابه ما يفعلة التاثير
- ثم كتبنا علامة هاشتاج لنعبر عن كتابة كود لون من اكواد hex
- كل حرفين متتاليين يعبران عن درجة كل لون من الالوان الثلاثة احمر وازرق واخضر
- حيث ان اقل قيمة من درجة اللون 00 واعلى قيمة هى ff وهكذا
- ويجب انهاء التاثير بفاصلة منقوطة حتى يتم تفعيل التاثير ;
- ولجعل الخلفية تكون صورة يتم كتابة الكود
body {
background:url(رابط الصورة);
}
- ويمكن ايضا جعل الخلفية تدرج لونى بكتابة الكود
body { background: -webkit-linear-gradient(red, blue); /* لمتصفح سفارى من 5.1 الى 6.0 */ background: -o-linear-gradient(red, blue); /* متصفح اوبرا 11.1 الى 12.0 */ background: -moz-linear-gradient(red, blue); /*من متصفح فايرفوكس 3.6 الى 15 */ background: linear-gradient(red, blue); /* هذة لجميع المتصفحات */}
- او يمكن الاستغناء عن كل هذا الكود بكتابة
body {
background: linear-gradient(#ff0000, #0000ff);}
- حيث البرتقالى هو اسم تاثير الخلفية وهو التدرج
- والاحمر هو كود اللون الاول من التدريج وانا اخترتة احمر
- والازرق اللون الثانى من التدريج وانا اخترتة ازرق لتكون النتيجة هكذا
- يبدوا رائعا صحيح
- ويمكن ايضا تحديد اتجاة الترج باستخدام الكود
body {
background: linear-gradient(180deg, #ff0000, #0000ff);}
- حيث ان المولن بالاخضر هو اتجاة دوران التدرج ويمكنك تغييرة لتصل الى اتجاهك المناسب
- ولا يقتصر التدرج على لونين فقط يمكنك ايضا اضافة المزيد من الالوان حسب رغبتك بإضافة فاصلة وكود اللون مثل
body {
background: linear-gradient(180deg, #ff0000, #0000ff, #000000);}
- ويمكنك اضافة العديد العديد من الالوان
- ولجعل التدرج دائرى يمكنك فعل هذا باضافة هذا الكود
body {
background: radial-gradient(#ff0000, #00ff00, #0000ff);}
- وبهذا يكون التدرج دائرى كما بالاسفل
- تمرين: انشء خلفية باستخدام التدرج اللونى
تاثير border
- تاثير border هو تاثير الحدود الجميل حيث ان هذا التاثير يمكنك من عمل حد علوى او سفلى او ايمن او ايسر او كلهم وهكذا
- يمكنك ايضا من اختيار لون الحد وسمكة وطريقتة
- لاكن هذا التاثير يجب ان يكون مخصص وليس لـ وسم body
- الان كيفية عمل border
- ولنختار مثلا ان نطبقة على منطقة الموضوع
- دائما منطقة الموضوع تكون من نوع class وتسمى post
- لذا سيكون الكود هكذا
.post{
border: 4px solid #DDD;
}
- كتبنا border ليكون نوع التاثير
- 4px هى سمك الحد
- solid هى نوعية الحد حيث solid الحد الكامل
- يمكن استبدال solid بـ dashed حتى يكون الخط المتقطع
- او استبدالها بـ double ليكون الخط ثنائى
- او dotted لتكون مربعات
- او groove حيث groove الحد الكامل بتاثير 3D ثلاثى الابعاد
- او ridge حيث ridge الحد الكامل بتاثير ثلاثى الابعاد من منظور معاكس للـgroove
- او inset حيث inset حد كامل شبية لل الثلاثى الابعاد
- او outset حيث outset شبية ثلاثى الابعاد فى الاتجاة المعاكس لـ inset
- وشاهد الصورة لتتعرف اكثر على ما اقصد
- وكما بالصورة يمكن جعل الحد فى اى اتجاه تريد وليس جميع الاتجاهات
- وذلك بتبديل border بـ border-right لليمين
- وتبديل border بـ border-left لليسار
- او border-top للاعلى
- او border-bottom للاسفل
- كما بالصورة
- تمرين انشء حد مربع بسمك 15 وباستخدام اللون #ff00f5
الى هنا يكون انتهى الجزء الاول من دروس css حرف b انتظروا بقاى الدروس وباذن الله الجزء الثانى من حروف b قريبا
مشكور أخي
ردحذفشكرا على مرورك الطيب
ردحذف