طريقة عمل صندوق بأركان مدورة باستخدام 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 ! :D</h3>
</div>

 

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

 

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

 

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

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

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

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

 

 

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

  1. مدخل إلى CSS3 | مدونة مبدع Says:

    […] طريقة عمل صندوق بأركان مدورة باستخدام css3 […]

  2. حمد الدويك Says:

    جزاك الله خيرا على هذا الدرس وأرجو أن تستمر
    في هذه السلسلة والتي تتحدث عن css3

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: