بسم الله الرحمن الرحيم وبه نستعين ....

من الاضافات الرائعه في الاصدار الحديث من الانماط css3 تم اضافة خيار اكثر من مميز يضيف للانماط بعد اخر وهو الزوايا المنحنيه للاطار نفسه border كان في السابق نحتاج الى صور نضعها على الزوايا لتجميلها مع الاصدار الحديث خلاص تم الاستغناء عن الصور واستخدام اكواد الانماط الاسرع طبعاً والاجمل في رأيي ...

الكود الخاص به يعتبر اضافة للكود الاساسي

	border: 2px dashed #579b76;
	border-radius:10px;

في المثال طبقنا الكود الاساسي للاطار border واضفنا له الحجم 2px والنوع dashed واللون #579b76 طبعا بيكون الزوايا بالطريقه هذي حاده مثل مافي الصوره بالاعلى لكن بعد اضافة الكود الاخر border-radius الخاص بحدة الزوايا عن طريق تحديدها بالارقام لاحظوا بعد تطبيق الكود الثاني الخاص بالزوايا ...

الكود الخاص بالزوايا ماله علاقه بنوع الاطار او حجمه او اللون كلها نعدلها من الكود او الوسم الاساسي للاطار border لاحظوا يا احباب بعد ما نعدل على الكود السابق في الصوره التاليه

طبعا نفس الكود السابق استخدمناه اللي اضفته لكم بعد اعطاء الاطار حجم 2px طيب لو احتجنا نعدل على بعض الزوايا في الاطار مثل الصوره التاليه

في المثال عدلنا على بعد الزوايا في الاعلى مع تغييرها في الزوايا في الاسفل الكود اللي استخدمنها
 

border-radius: 5px 5px 10px 10px;

طبعا دائرة الزوايا تكون الزوايه في اليسار اعلى بعدها الزاويه في اليمين اعلى بعدها الزاويه في اليمين اسفل بعدها في اليسار اسفل وعن طريقها نعدل على بعد الزوايه ...

الزوايا تعمل مع الاصداره الحديثه css3 وعمل على كل المتصفحات الحديثه

ملاحظه متصفح اكسبلور الحديثه تعمل معها بدون مشاكل

هذا وصلى الله وسلم على نبينا وسيدنا محمد صلى الله عليه وعلى اله وصحبه وسلم ...

, , , ,

علِّق

Plain text

  • لا يسمح بوسوم HTML.
  • تتحول مسارات مواقع وب و عناوين البريد الإلكتروني إلى روابط آليا.
  • تفصل السطور و الفقرات تلقائيا.

guest

  • وسوم إتش.تي.إم.إل المسموح بها: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • لا يسمح بوسوم HTML.
By submitting this form, you accept the Mollom privacy policy.