مدونة علاء الدين مؤلفاتي | تواصل معي | عن المدونة

الحدود (الزوايا) المنحنية في css

اليوم سنطرح درس بسيط  في css  وهو درس الحدود او الزوايا المنحنية حيث سنستعرض طريقة بسيطة لعمل الحدود المنحنية وفي درس اخر ان شاء الله سنتوسع في شرح الزوايا والحدود المنحنية في css .

سنبدء الدرس بعمل جزء مربع الشكل بعرض 507 بيكسل وبارتفاع 100 بيكسل وبخلفية زرقاء داكنه   لنطبق على هذا الجزء الحدود المنحنية وستكون اكواد هذا الجزء بالشكل التالي :

كود html

<div id="box">   ----"box" قمنا ببتعريف هذا الجزء بالاسم
</div>

كود css
#box {
width:507px;                         هنا قمت بضبط العرض   
height:100px;                                   وهنا الارتفاع
background-color:#4a6da1;            وهنا لون الخلفيه
}

وسينتج لنا الشكل التالي :

ونلاحظ ان الحدود غير منحنية وهنا يبدء درسنا فمن اجل جعل الحدود منحنية يتوجب علينا استخدام الوسم التالي :

border-radius:25px;

حيث نستبدل الرقم 25 بالرقم المناسب وهذا الرقم يمثل قيمة الانحناء ..... لنجرب الوسم السابق على الجزء الذي قمنا بانشاءه في الاعلى حيث سنضيفه الى تنسيق css  بالشكل التالي :
#box {
width:507px;                         هنا قمت بضبط العرض   
height:100px;                                   وهنا الارتفاع
background-color:#4a6da1;            وهنا لون الخلفيه
border-radius:25px;                  هذا هو الجزء الذي اضفناه لعمل انحناء للزوايا
}

بعد اضافة الوسم سيكون الناتج كالتالي :


هل لاحظت انحناء الزوايا ..... اتمنى ان يكون الدرس مفيداً ونلتقي في الدرس المقبل ان شاء الله الذي سنتحدث فيه عن الزوايا والحدود المنحنيه بشكل اوسع .

هناك 3 تعليقات:

  1. درس جميل شكرا لك صديقي

    ردحذف
  2. والله فيك الخيار يا معلم تسلم يا معلم

    ردحذف

يتم التشغيل بواسطة Blogger.