إغلاق


اضغط هنا لتنزيل آخر إصدارة من زووبس



دروس التعامل مع الثيمات: كيفية عمل حواف دائرية دون الحاجة لصور  
الكاتب : mariane
بتاريخ: 2010/5/27
عدد مرات القراءة 1586
الحجم 3.31 KB
تحظير للطباعة أخبر صديقك
 
كلنا بحب ان يضيف الى تصميمه لمسات جميلة . من بينها الحواف الدائرية rounded corners . الطريقة البدائية هي قليلاً معقدة : كانت تقتضي ان نرسم التصميم على الفوتوشوب ونقطعه ومن ثم ندمجه في التصميم ونعمل له متغيرات css
اما بوجود css3 وهو نسخة متطورة من css اصبح الامر مجرد كود نضعه , لكن لدينا مشكلة صغيره الى ان المتصفح انترنيت اكسبلولر لا يقراها للان ولكن عاجلاً او اجلاً سيتم قراءته.
اما بالنسبة للكود ضعه في ملف style.css في اي مكان تريد ان يصبح دائري,لنفترض مثلا في عنوان البلوك:
.box_round {
     -
moz-border-radius12px/* FF1+ */
  
-webkit-border-radius12px/* Saf3+, Chrome */
          
border-radius12px/* Opera 10.5, IE 9 */
}


الكود كما ترون متوافق مع كروم, سفاري واوبرا وطبعاً فاير فوكس.
ماذا يعني الرقم 12؟
يعني درجة الانحناء او التدوير و يمكنكم جعلها 8 مثلا ان كنتم لا تريديون الكثير من التدوير.

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

النتيجة لهذا الكود :
انقر لمشاهدة الصورة الأصلية في نافذة جديدة
 
ترتيب الدرس : 10.00 (2 صوت)
صوت للدرس
العودة للقسم | العودة الي الصفحة الرئيسية

موقع الدعم العربي لنظام إدارة المحتوى زووبس


مواقع صديقة: رياض القرآن ، خلفيات شاشة ، المجلة السعودية للسيارات ، أهرام العلمية ، ابن مصر ، برامج عربية و معربة ، ماسنجر شبوة.نت ، ضفاف ، العاب