الحدود من لا يعرفها هى البرواز او التخطيط حول الاضافات والمشاركات والقوائم العلوية والكثير على حسب ذوق المصمم فهذه الاشكال متعددة فمن الممكن تجد برواز الاضافات عبارة عن تخطيط افتراضى ونجد ايضا التخطيط عبارة عن نقاط وايضا تخطيط عريض وغيرها من الانواع الكثيرة سوف نتعرف عليها من خلال هذا الدرس بقسم دروس بلوجر الذى تعرفنا من خلالة المزيد من الدروس فلن اطيل عليكم وتعالو نتعرف على انواع هذه الحدود وكيفية استخدامها بقالبك لكى تظهر المدونة بشكل اكثر من رائع وتجعل اضافات بلوجر مميزة عن الاخرى .
الكود المسؤل :
الكود المسؤل عن ذلك بيكون بهذا الشكل :
border:1px none $bordercolor;
- كما تلاحظون من خلال الكود السابق يبداء بكلمة border ويجب ان يكون بجانبة بعد الكلمة النقطتين العموديين تكون بهذا الشكل border: اعتقد الكلمة سهلة الكتابة واستخدام النقطتين من خلال استخدام ازرر الكيبورد Shift + حرف الكاف .
- الان اذا وضعت هذا الرمز 1px بعد النقتطيين فهو يجعل التحكم بسمك الحدود بمعنى اذا جعلت القيمة 2 فتجد السمك اصبح اعرض من رقم واحد كل ما تجعل الرقم اكبر يصبح السمك اعرض .
- نجد ان بعد الرمز السابق كلمة نوع الحدود وهى المسؤلة بعرض الشكل الذى تريدة كما زكرنا سواء نقاط او خطوط وغيرها من الاشكال كل هذا سنتعرف علية .
انواع الحدود :
- none
- outset
- inset
- Double
- solid
- dashed
- ridge
- Groove
- dotted
1- صورة تخص لكلمة solid كما تشاهدون الحدود صلبة
2- صورة تخص لكلمة dashed كما تشاهدون الحدود نقاط متابعدة
3- صورة تخص كلمة dotted كما تشاهدون الحدود نقاط متقاربة
4- صورة لكلمة outset كما تشاهدون الخط السفلى عريض ومميز عن الاخر
5- صورة لكلمة inset كما تشاهدون الخط العلوى والجانبى عريض ومميز عن الاخريين
اعتقد بعد عرض الصور اصبح الدرس واضح لكم وهذا ليس كل شيى بل سنتعرف اكثر على طريقة الاستخدام لتصبح محترف .
كيفية الاستخدام :
كما تعرفنا على الكود المسؤل وايضا انواع الحدود الأن يمكنك بكل سهولة استخدامها بقالبك الخاص ولكن كيف ؟
اذا وضنا الكود المسؤال كتالى :
border:1px none #FF0000;نجد من خلال الكود السابق وهو الكود المسؤل الجزء المحدد باللون الاحمر كما زكرنا بالسابق بأنة يخص السمك للحدود وكما قولنا كل ما تضع رقم كبير كل ما تجد السمك اعرض .
ونجد الكود المحدد باللون الأخضر هى انواع الحدود حيث ان كلمة none تعنى لنا بعدم وجود اى شيى بمعنى اذا تم وضع هذه الكلمة فانك لا تشاهد الحدود ستكون متوقفة لكى تجعل هذه الميزة تعمل عليك بوضع كلمة من انواع الحدود الذى قمت بوضعها لكم .
كيف اضع اللون الخاص الذى اريدة ؟
من خلال الكود السابق والمحدد باللون الاصفر هو الجزء الخاص بخاصية الالون
كيف اقوم بعمل حدود متعددة الالوان بمعنى الجزء العلوى مختلف عن السفلى وعن الجهة اليمنة واليسرى ؟
الطريقة ليست صعبة كما يعتقد البعص فقط عليك بمعرفة اسماء الأتجاهات :
- top وهذه تعنى الجزء العلوى
- bottom وهذه تعنى الجزء السفلى
- right وهذه تعنى الجهة اليمنى
- left وهذه تعنى الجهة اليسرى
بمعنى اسهل اذا كان لديك اضافة وبها هذا الكود :
border:1px dashed #FF0000;فهذا الكود السابق خاص باللون واحد وهو الاحمر والشكل نقاط فهذا يعنى لنا ان المربع او المستطيل سيظل لون واحد فلكى تجعل كل حد مختلف عن الاخر سيكون بهذا الشكل :
border-left: 1px dashed #FF0000;كما تلاحظون باللكود السابق تم وضع اسماء الاتجهات كالعلوى والسفلى وتم وضع كود الالوان وهى مختلفة عن الاخر ليظهر الجزء للجهة اليسرى باللون الاحمر و الجهة اليمنة باللون الاخضر والجزء العلوى باللون الاسود والجزء السفلى باللون الاحمر كما تلاحظون باللصورة التالية توضح لنا التطبيق الفعلى :
border-right: 1px dashed #008000;
border-bottom: 1px dashed #0000FF;
border-top: 1px dashed #000000;
هل هذا الدرس واضح وسلس للجميع ؟
اذا كان لديك اى استفسار فى هذا الدرس فقط لا تتردد بوضع السؤل .
واتمنى بان هذا الدرس افاد الجميع وانتظرونى بدرس اخر
(( لا خير فى كاتم العلم ))
ليست هناك تعليقات:
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )