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

حركة جميلة بالـ 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 كوحدة كذلك.

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