إتصل بنا

الاسم

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

رسالة *

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

تعليقين

و نعم هذا فصل اخر من سلسلة دروس لغة 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

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

الكاتب : Med Anass SDK

عاشق النت إسم على مسمى أعشق كل ما له علاقة بالوب و الإنترنت
مساحة إعلانية

تعليقات بلوجر

  1. السلام عليكم
    لو سمحت اخي
    هل استطيع ان اعمل حدود مزخرفه .. يعني مثلا تكون صوره من الجوانب ليست تحديد بلون

    ردحذف
  2. السلام عليكم ورحمه الله وبركاته انا احمد طارق من موقع فهمنى دوت كوم انا شيفك بتبدع بلا حدود وتعطى كل ما عندك للزوار بلا مقابل وانا قررت انى هشتريلك دومين ارجو انك تكلمنى عبر الفيس بوك او التويتر لكى اعطيك الرابط
    فيس بوك: www.fb.com/ahmedtarek01157085889
    الاميل: ahmed@fahmney.com

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة