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

+- الدعم العربي (https://www.mybbarab.com)
+-- قسم : :: . + تطوير المواقع و المنتديات و لغات برمجة المواقع + . :: (https://www.mybbarab.com/forum-78.html)
+--- قسم : قسم تطوير المنتديات والمواقع ولغات البرمجه (https://www.mybbarab.com/forum-117.html)
+---- قسم : دروس وكتب الـ XHTML (https://www.mybbarab.com/forum-50.html)
+---- الموضوع : حركة جميلة بالـ CSS - تقويس حواف الجداول (/thread-8936.html)

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

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

flower

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

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

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

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

كود :
<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >
This is Bestpublisher from dd4bb.com
</div>

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

و يمنك التلاعب بحواف الجداول و الخلايا،، كما تحب،،
و ها هي الخاصيات:
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


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

[صورة: moz-border-radius.gif]

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

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

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - Pepo - 2009-06-22

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

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

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - Bestpublisher - 2009-06-22

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

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

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - Pepo - 2009-06-22

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

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - أحلام21 - 2009-07-03

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

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - Bestpublisher - 2009-07-03

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

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - brahim62 - 2009-07-25

بارك الله فيك

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - Dr.Desmond - 2009-08-11

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

RE: حركة جميلة بالـ CSS - تقويس حواف الجداول - رزان - 2009-11-29

يسلمووووووووووووووو