طريقة عمل صندوق بأركان مدورة باستخدام CSS3

السلام عليكم ورحمة الله وبركاته..

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

<div align=”center” style= “border-width:1px; border-color:#FF9966;
border-style:solid;
background:#FF9966;
-moz-border-radius: 1.6em;
-webkit-border-radius: 1.6em;
border-radius: 1.6em;”>
<h3>Type your text here ! </h3>
</div>

 

بالطريقة السابقة سوف نحصل على صندوق بأركان مدورة كما بهذه الصورة:

 

وذلك فقط إذا كان متصفحك يدعم border-radius لاحظت في الموقع أن متصفح Safari أكثر من يدعم CSS3 ثم بعد ذلك فايرفوكس2 .. بعكس IE أعتقد أنه لا يدعم منها شيئا! إذا كان لديك IE جرب ذلك بنفسك افتح موقع CSS3.info ولاحظ القائمة الأفقية ستظهر لك بالتأكيد بهذا الشكل:

 

عند دعم CSS3 في المتصفحات بشكل أفضل سيتجه آلاف مطوري الويب لاستخدام الطريقة السابقة بدلا من استخدام الصور..

عن نفسي سأبدا في استخدامها من الآن.. فلا ضير أن يرى مستخدمي IE الصناديق معقوفة بدلا من مدورة..

أعجبني كثيرا Module تعدد الأعمدة الجديد في CSS3.

للاضطلاع على Modules أخرى زر موقع CSS3.info.