هذا الدرس ضمن سلسلة جديدة من دروس بسيطة عن CSS3 ومميزاتها الجديدة وهي سلسلة تطبيقات على CSS3، أستعرضها لكم بشرح خصائص CSS3 ومع أمثلة عليها، يمكنك معرفة المزيد عن CSS3 عبر موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً، ستكون هذه الدروس سهلة مع تطبيق الأمثلة المرفقة لها. هذا الدرس سيكون عن ميزة الحواف الدائرية في CSS3 ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C كذلك.

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

خاصية border-radius

يتم عمل الحواف الدائرية في CSS3 عبر خاصية border-radius، تكتب هذه الخاصية بهذه الطريقة مع تحديد قيمة تدوير الحافة بالبكسل:

border-radius: 5px;

وتكتب هذه الخاصية لجميع المتصفحات التي لا تدعم خاصية border-radius حالياً وستظهر فيها ميزة الحواف الدائرية في المستقبل عبر هذه الخاصية.

خاصية border-radius في محرك Mozilla و Webkit

تأثير خاصية border-radius يختلف بين محرك Mozilla و Webkit أي أن المتصفحات الحالية التي تدعم هذه الخاصية هي متصفحات تستخدم محرك Gecko مثل Firefox و Flock أو متصفحات تستخدم محرك Webkit مثل Safari و Google Chrome، كتابة الخاصية للمحركين تكون بهذه الطريقة:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

بحيث تكون خاصية moz-border-radius- لمحرك Mozilla/Gecko و webkit-border-radius- لمحرك Webkit.

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

border-radius: (top-left) (top-right) (bottom-right) (bottom-left);

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

-moz-border-radius: 15px 0 15px 0;
-webkit-border-radius: 15px 0 15px 0;

يمكن إستخدام خواص أخرى وهي المتعلقة بخاصية border-radius ولكن هذه مختصرة جداً.

خواص أخرى متعلقة بخاصية border-radius

هناك أربع خواص أخرى متعلقة بخاصية border-radius تعمل على تحديد حواف الزوايا على الأربع الجوانب المختارة منك، كما توضح القائمة هذه الخواص (لمحرك Mozilla)

 -moz-border-radius-topright: 5px;
 -moz-border-radius-topleft: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;

تستطيع كتابة الخواص هذه لمحرك Webkit أيضاً كما توضع الشفرة التالية:

 -webkit-border-top-right-radius: 5px;
 -webkit-border-top-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;

مثال عملي: قائمة روابط التصفح

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

شفرة HTML لقائمة الروابط:

<div id="navigation">
     <ul>
         <li><a href="#">المدونة</a></li>
         <li><a href="#">حول المدونة</a></li>
         <li><a href="#">دروس عملية</a></li>
         <li><a href="#">مقالات نظرية</a></li>
         <li><a href="#">ملحقات</a></li>
     </ul>
</div>

شفرة CSS عادية لقائمة الروابط:

#navigation {
     margin:  10px auto;
     padding: 6px 0;
     width: 770px;
     background: url(nav-background.jpg) no-repeat;
     height: 27px;
}
#navigation ul { margin: 0; list-style: none; }
#navigation ul li {
     margin: 0 20px;
     display: inline;
}
#navigation ul li a {
     padding: 0 20px;
     color: #fff;
     font: bold 16px "Simplified Arabic";
     text-decoration: none;
     text-shadow: 1px 1px 0 #595454;
}
#navigation ul li a.active, #navigation ul li a:hover {
     color: #000;
     text-shadow: none;
     background-color: #fff;
     opacity: 0.7;
}

أيضاً إضافة خاصية border-radius للصنف navigation# (عنصر قائمة الروابط) في شفرة CSS:

#navigation {
     -moz-border-radius: 7px;
     -webkit-border-radius: 7px;
}
#navigation ul li a.active, #navigation ul li a:hover {
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
}

الشكل الأخير قبل وبعد إضافة خاصية border-radius:

إذا أردنا عمل الحواف الدائرية على الزوايا العليا (اليمين واليسار) من القائمة نستخدم الخواص المتعلقة بخاصية border-radius، وتكون الشفرة المعدلة بهذه الطريقة للصنف navigation#:

#navigation {
     -moz-border-radius-topright: 7px;
     -moz-border-radius-topleft: 7px;
     -webkit-border-top-right-radius: 7px;
     -webkit-border-top-left-radius: 7px;
}

تطبيق آخر للحواف الدائرية على الزوايا العليا كما توضح الصورة:

أمثلة أخرى على الحواف الدائرية

أمثلة لإستخدام ميزة الحواف الدائرية بشكل رائع من بعض المواقع:

Twitter

Information Highwayman

Dropdown Menu Example

الدكتور نت

Larkef

Simon Collison

Preloaded