التحكم في حدود العناصر و تظليلها .

و نعم هذا فصل اخر من سلسلة دروس لغة HTML و الـCSS حيث سنتعرف فيه على خصائص جديدة ، هذه الخصائص التي سنتعرفها تخص التحكم في حدود العناصر و التحكم في ظلها ، خاصيتان صغيرتان و بسيطتان للغاية سنتعرف عليهما في ثلاث فقرات سريعة  .

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

أولا ما هي هذه الحدود التي نحن بصدد التكلم عنها ؟ كل عنصر نقوم بإنشائه يظهر في الموقع على شكل مستطيل أو صندوق ، فعندما نقوم تظليل  النصوص مثلا ستجد أن الظل يأخذ شكل مستطيل كما تشاهد الان و تلك الجوانب التي تحد المربع تسمى حدود العنصر ( Element's Border ) ، و هناك خصائص CSS تختص بالتحكم في هذه الحدود و هي ما سنتعرف عليها فيم يلي .

الفهرس

1. التحكم في حدود العناصر .
2. صقل جوانب الحدود .
3. التحكم في ظلال العناصر .

---

التحكم في حدود العناصر

توفر لنا الـCSS عدة إختيارات ل صفحاتنا ، حيث نتوفر على ثلاث خاصيات تهتم بتحديد شكل حدود العناصر ، السمك ( أو العرض ) ، الشكل و اللون . و هذه الخصائص هي على التوالي : border-width , border-style , border-color .

و كما رأينا في فصل التحكم في خلفيات العناصر ، يمكن جمع هذه الخاصيات الثلاث في خاصية واحدة فقط و هي border ، و هي تأخذ جميع قيم الخاصيات الثلاث السابقة .

بالنسبة للخاصية border فهي تأخذ قيمها كالتالي :

• سمك أو عرض الحدود : يتم تحديده عبر قيم عددية معبر عنها بالوحدات المعروفة ( px , cm , em إلخ ... )
• لون الحدود : تأخذ القيم الخاصة بتحديد الألوان ، إما بتقنية الـHexcolor أو الـrgb أو غيرها .
• شكل الحدود : و هنا أيضا تملك عدة إختيارات حيث يمكن لحدود العنصر أن تكون خطا متصلا ، خطا متقطعا ، نقطا و غيرها و ذلك عن طريق القيم التالية :
  • none : تعني لا شيء ، لا تظهر حدود العنصر أبدا حيث يبقى العنصر عاديا كيفما كان يظهر سابقا .
  • solid : تظهر الحدود على شكل خط متصل عادي .
  • dotted : تظهر على شكل نقط .
  • dashed : تظهر على شكل خط متقطع .
  • double : تظهر الحدود مضاعفة .
  • groove : لا أدري حقا كيف أصفه    ، شاهده في الصورة أسفله .
  • ridge : ......
  • inset : ......
  • outset :  ......

فمثلا لو أردنا أن نحصل على حدود من نوع dotted بالعرض 3 بكسل و اللون الأحمر فإننا سنكتب :

border: 3px dotted red ;

ترتيب القيم لا يهم ، فهو لا يأثر أبدا .

الحد الأعلى ، الأيمن ، الأيسر ، الأيسر .
لنقل أننا أردنا أن نضع لعنصر ما حدودا من نوع مختلف ، حيث الحد الأعلى يختلف عن الحد الأيمن أو شيء من هذا القبيل . الأمر بسيط للغاية فالـCSS توفر لنا القدرة على تخصيص كل طرف بحد مختلف عبر الخصائص border-top ( يعني الحد الأعلى ) ، border-bottom ( الحد الأسفل ) ، border-left ( الحد الأيسر ) ، border-right ( الحد الأيمن ) .

p { 
    border-top: 1px dotted green ; 
    border-bottom: 2px solid #DD292A; 
    border-left: none; 
    border-right: none; 
}

و بالطبع يمكننا تخصيص حدود أي عنصر كيفما كان ، عنصر الفقرة أو <span> أو أي عنصر اخر .

---

صقل جوانب الحدود

كانت مسألة صقل جوانب الحدود تضايق الكثير من مصممي الوب ، لأنها كانت تحتاج إلى إستخدام خصائص CSS كثيرة ، بالإضافة إلى رفق الصور و خلق عناصر جديدة ، أما الان و بفضل الـCSS 3 أصبح صقل الجوانب أمرا سهلا للغاية و لا يتعدى سطرا واحدا .

الخاصية المسؤولة عن ذلك هي border-radius و هي تأخذ قيما عديدية معبر عنها بالوحدات المعروفة ( كالـpx ، cm و غيرها )

p {  
    border: 2px solid #333; 
    border-radius: 10px; 
}

ستصقل الجوانب حيث ستصبح دائرية و لن تظهر الجوانب حادة ، و القيمة 10px تعبر عن شعاع الدائرة التي تتكون في الجوانب .

    أهلا و سهلا بك في مدونة عاشق النت ، هنا ستجد دروسا شيقة عن جميع لغات الوب .
أنت الان في فصل من دروس لغة HTML / CSS

يمكننا أيضا تحديد شعاع الدوائر في كل جانب على حدة حيث يمكن أن نكتب :

border-radius: 10px 20px 15px 10px;

هذه القيم تخص الأطراف الأربعة بالترتيب التالي :

1. الطرف العلوي على اليمين .
2. الطرف العلوي على اليسار .
3. الطرف السفلي على اليسار .
4. الطرف السفلي على اليمين .

كما لو أننا ندور في نفس منحى عقارب الساعة .

خاصية border-radius تعمل على المتصفحات الجديدة فقط ، لأنها خاصية حذيثة نوعا ما ، و في بعض الإصدارات من غوغل كروم أو موزيلا فايرفوكس سنحتاج إلى إضافة بعض المقاطع قبل الخاصية حيث سنكتب webkit-border-radius- بالنسبة للغوغل كروم و سفاري و moz-border-radius- بالنسبة لموزيلا فايرفوكس .

---

التحكم في ظلال العناصر

من جديد ما قدمته لنا الـCSS3 هناك ظلال العناصر ، في الماضي كان يتم صنع ظلال العناصر بإستخدام عناصر جديدة مع التلاعب بقيم background و الـpadding ، أما الان فيكفي إستعمال خاصية واحدة فقط تعطي نتائج أفضل بكثير .

في هذه الفقرة سنتعرف على نوعين من الظلال :

1. ظلال تخص العناصر بإعتبارها صناديق .
2. ظلال نخص النصوص و محتوياتها .

ظلال العناصر Box-shadow
تأخذ خاصية box-shadow أربع قيم هي بالترتيب .

1. المسافة الأفقية التي يبعد بها الظل عن العنصر و هي قيمة عددية .
2. المسافة العمودية التي يبعد بها الظل عن العنصر و هي قيمة عددية  .
3. المسافة التي يتبدد خلالها الظل و هي قيمة عددية أيضا .
4. لون الظل ، و يأخذ قيم الألوان .

و كمثال لنأخذ ما يلي :

box-shadow: 2px 2px 0 #999;

    أهلا و سهلا بك في مدونة عاشق النت ، هنا ستجد دروسا شيقة عن جميع لغات الوب .
أنت الان في فصل من دروس لغة HTML / CSS

أرأيت الان ماذا توفر لنا الـCSS3 من خصائص جميلة  .
في المثال السابق أخذنا المسافة التي يتبدد خلالها الظل هي 0 ، أي لا يتبدد أبدا ، في المثال التالي سنرى كيف يتبدد الظل عند الزيادة في قيمة مسافة التبدد .

box-shadow: 2px 2px 4px #999;

    أهلا و سهلا بك في مدونة عاشق النت ، هنا ستجد دروسا شيقة عن جميع لغات الوب .
أنت الان في فصل من دروس لغة HTML / CSS

الفرق واضح جدا ، أليس كذلك  !!

ماذا لو أردنا بأن يكون الظل داخل الصندوق و ليس خارجه ؟ الأمر بسيط للغاية يكفي أن نظيف القيمة inset إلى الخاصية box-shadow و هكذا نكون قد حققنا ما نريد .

box-shadow: inset 1px 1px 2px #999;

    أهلا و سهلا بك في مدونة عاشق النت ، هنا ستجد دروسا شيقة عن جميع لغات الوب .
أنت الان في فصل من دروس لغة HTML / CSS

إنطلاقا من خاصية box-shadow يمكن خلق عدة تأثيرات تجعل من صفحاتنا أكثر جمالا و أكثر تفاعلية .



خاصية box-shadow كما قلنا حذيثة ، و بالتالي هناك بعض المتصفحات التي لا تشغلها ، لذلك لا تنس إضافة المقاطع -webkit- و -moz- كي تعمل هذه الخاصية على تلك المتصفحات .


ظلال النصوص text-shadow .
تأخذ نفس قيم الخاصية السابقة و بنفس الترتيب ، غير أنها تطبق على العناصر باعتبارها صناديق ، بل على محتوى تلك العناصر ، أي النصوص التي بداخلها .

لنشاهد المثال التالي :

text-shadow: 0 1px 1px #CCC;

    أهلا و سهلا بك في مدونة عاشق النت ، هنا ستجد دروسا شيقة عن جميع لغات الوب .
أنت الان في فصل من دروس لغة HTML / CSS

بهذا نكون قد أكملنا الفصل .

→ الفصل التالي الفصل السابق ←