تحديث آخر نسخة 1.8.37

تقييم الموضوع :
  • 1 أصوات - بمعدل 5
  • 1
  • 2
  • 3
  • 4
  • 5
حركة جميلة بالـ CSS - تقويس حواف الجداول
#1
Icon10 
حركة جميلة بالـ 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
الرد
شكر من طرف :
#2
تسلم يا طيب على المعلومات الجميلة.
لكن لم تذكر فى حديثك شئ عن المتصفحات التى تدعم هذه الخاصية والمتصفحات التى لا تدعمها.

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

شكرا لك على المرور اخي pepo.
الرد
شكر من طرف :
#4
تسلم يا طيب واجدد شكرى لك, وعزرا لأنى لم انتبه للوصف.
الرد
شكر من طرف :
#5
السلام عليكم و رحمة الله و بركاته
شكرا جزيلا أخي العزيز كنت أبحث عنها .جزاك اله كل خير
الرد
شكر من طرف :
#6
عفوا الاخت احلام،
و بارك الله فيك على المرور flower
الرد
شكر من طرف :
#7
بارك الله فيك
الرد
شكر من طرف :
#8
تسلم اخي بيست على الكود...
مع الآسف انه لا يعمل مع الاكسبلورر (و اغلب المتصفحين يستخدمونه)
شكرا جزيلا
الرد
شكر من طرف :
#9
يسلمووووووووووووووو
الرد
شكر من طرف :


التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 6 ) ضيف كريم