تصميم ديزاين كامل للموقع

CSS3 border : الحدود

آخر تحيين: 06-01-2015

HTML5 تقطيع الصفحة النموذجية CSS تموضع المحتوى


هل العنوان يوحي لكم بشيء ؟ على كل حال ، رأينا سابقا الخاصية border و عرفنا أنها تنتمي إلى الخاصيات الجامعة "Mega Properties" لأنها تجمع بين أكثر من قيمة واحدة في نفس الوقت ، مثال :

div{
  border:2px solid #000;
}

بهذه الشيفرة أعطينا لوسوم div حدوداً بحجم 2 بيكسيل ، و من نوع solid و بلون أسود . هذا جميل و الأحلى هو ما تقدمه لغة CSS3 من إضافات لتنميق الحدود . إليكم هذه الصورة كمثال لبعض هذه التأثيرات :



للحصول على النمط : من حدود جوانبها دائرية مع انعكاس لظل الكتلة استعملت خاصيتين من خاصيات CSS3 ، و في المجمل سنرى ثلاثا في هذا الدّرس و هي :

  • border-radius : للحصول على حدود جوانبها دائرية
  • box-shadow : انعكاس الظل
  • border-image : إضافة صورة للحدود

css3 border-radius

تتيح لنا الخاصية border-radius الحصول على جوانب دائرية بسهولة . أقول بسهولة لأنه في ما مضى أي في عهد CSS2 كنا نلجأ إلى برنام الديزاين كالفوتوشوب مثلا لرسم هذه الجوانب ثم إضافتها إلى الحدود عبارة عن صور .
إذاً لإضافة هذا التأثير ، نعطي القيمة بالبيكسل للحصول على حجم التقوّس الذي نريده ، مثال :

div{
  border: 2px solid black;
  border-radius: 40px;
}
مشاهدة النتيجة


يمكننا أيضا التحكم بالجوانب الأربعة للعلبة ، كلّ على حدة و ذلك باستعمال الخاصيات التالية :

  • border-top-right-radius : الجانب أعلى يمين العلبة
  • border-top-left-radius : الجانب أعلى يسار العلبة
  • border-bottom-left-radius : الجانب أسفل يسار العلبة
  • border-bottom-right-radius : الجانب أسفل يمين العلبة

صورة توضيحية :



مثال :

.borders{
  border-top-left-radius: 60px;
  border-bottom-right-radius: 60px;
}
مشاهدة النتيجة

CSS3 box-shadow

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

div {
  box-shadow: 10px 15px 20px rgb(0,0,0); 
}
مشاهدة النتيجة


أعطينا 4 قيم للخاصية box-shadow و هي بالترتيب :

  • 10px : لإزاحة الظل إلى يمين العلبة ، يمكننا أيضا إزاحته إلى اليسار و ذلك باستعمال القيمة السلبية ، مثلا : 10px- .
  • 15px : إزاحة الظل إلى أسفل الكتلة ، يمكننا أيضا استعمال القيم السلبية
  • 20px : امتداد الظل ، أي تحديد مدى بعده عن العلبة
  • rgb(0,0,0) : لون الظل . أعطيت القيمة باستعمال طريقة rgb عمداً . و لحاجة في نفس يعقوب . لأنني أريد أن أعرفكم بطريقة جديدة ستغير نظرتكم و لو نسبيا في استعمال الألوان . لقد أضافت CSS3 ميزة الشفافية إليها و ذلك باستعمال rgba الحرف "a" الزائد هنا ، هو اختزال لكلمة "ألفا" : "alpha" . و نقصد بها الشفافية في لغتنا . و نعطيها قيما تتراوح بين الرقم 0 و 1 . مثال
div {
  box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.35); 
}
مشاهدة النتيجة



لا تنسوا حرف "a" عند إضافة الشفافية : rgba و ليس rgb .

اعلموا أنه باستطاعتكم فعل الكثير بالخاصية box-shadow ، و كل ما يمر بمخيلتكم في ما يخص الشفافية و الظل و الخلفيات . أعطيتكم أمثلة بسيطة ، ربما تتاح لنا فرص أخرى لرؤية المزيد منها . لنأخذ الآن وجهة نظر المتصفحين في قبولهم لهذه الخاصية !
لحسن الحظ جميع المتصفّحين الجدد يتعرّفون عليها ، أما بالنسبة للإصدارات القديمة ، نظيف هايكات لها لتعمل بشكل جيد ، مثلا :

  • لجميع إصدارات موزيلا "Mozilla FireFox" أقل من النسخة 4 يجب إضافة الهايك -moz- للخاصية
  • و هايك -webkit- لجميع إصدارات :

    - Google Chrome < 10 .
    - Safari < 5.1
    - Mobil Safari < 5.0
    - Android


    ستصبح شيفرتنا الأولى كالتالي :
div {
  -moz-box-shadow: 10px 15px 20px rgb(0,0,0);       /* mozilla FireFox < 4 */
  -webkit-box-shadow: 10px 15px 20px rgb(0,0,0);    /* Chrome<10 , safari<5.1 ... */
  box-shadow: 10px 15px 20px rgb(0,0,0);           /* و جميع المتصفحيات الجديدة Internet Explorer9+ */
}

css3 border-image

يمكننا استعمال صورة لتحديد إطار العلبة ، لنأخذ هذه الصورة مثلا ، و نظيفها كإطار لأية علبة :

div {
   border-image:url(border.png) 30 30 stretch;             /* للمتصفحات الجديدة  */
   -webkit-border-image:url(border.png) 30 30 stretch;   /* أقل من خمسة Safari  */
   -o-border-image:url(border.png) 30 30 stretch;        /* Opera */
 }
مشاهدة النتيجة