الدعم العربي

حركة جميلة بالـ CSS - تقويس حواف الجداول



منذ بضعة ايام انتبهت الى أحد الخاصيات في الـ CSS
و اعجبتني كثيرا،، فقلت اتشاركها مع اخواني،، فربما ستنفعك في التصميم.

لأنها بكل صراحة،، حركة و لا اروع
تابع معايا،،

اسم الخاصية: Border-radius

جرب المثال التالي:-


شفت التأثير ! جميل اليس كذلك؟!

و يمنك التلاعب بحواف الجداول و الخلايا،، كما تحب،،
و ها هي الخاصيات:
1- خاصية التحكم جميع الحواف جملة واحدة: (ضعهما مع بعض بنفس القيمة)
-moz-border-radius
-webkit-border-radius



2- خواص التحكم كل حافة لوحدها:
* حافة اعلى اليسار:
-moz-border-radius-topleft
-webkit-border-top-left-radius

* حافة اعلى اليمين:
-moz-border-radius-topright
-webkit-border-top-right-radius

* حافة اسفل اليسار:
-moz-border-radius-bottomleft
-webkit-border-bottom-left-radius

* حافة اسفل اليمين:
-moz-border-radius-bottomright
-webkit-border-bottom-right-radius


شوف مثال لتلاعب اكثر بالحدود:



و طبعا يمكنك استعمال البكسل px كوحدة كذلك.

ارجو ان يفيدكم الموضوع،،

تسلم يا طيب على المعلومات الجميلة.
لكن لم تذكر فى حديثك شئ عن المتصفحات التى تدعم هذه الخاصية والمتصفحات التى لا تدعمها.

حيث انى اتذكر ان هذه الخواص تعمل مع الفايرفوكس والنافيجاتور فقط تقريبا, ولا تعمل نهائيا مع الأكسبلورار.

عذرا انا ذكرتها في الوصف،،
بحيث هذه الخاصية تعمل مع فايرفوكس،، و سفاري،،
و لم يتم دعمها بعد من طرف انترنت اكسبلورر 8 ،،
و ان شاء الله في نسخ قادمة منه سيتم دعمها لانها خاصية جد مهمة بنظر الكثيرين.

شكرا لك على المرور اخي pepo.

تسلم يا طيب واجدد شكرى لك, وعزرا لأنى لم انتبه للوصف.

السلام عليكم و رحمة الله و بركاته
شكرا جزيلا أخي العزيز كنت أبحث عنها .جزاك اله كل خير

عفوا الاخت احلام،
و بارك الله فيك على المرور

بارك الله فيك

تسلم اخي بيست على الكود...
مع الآسف انه لا يعمل مع الاكسبلورر (و اغلب المتصفحين يستخدمونه)
شكرا جزيلا