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

[Bestpublisher]

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



منذ بضعة ايام انتبهت الى أحد الخاصيات في الـ 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


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



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

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