الموضوع: [حصريا]عمل حواف انسابية و ناعمة من دون صور بستخدام CSS فقط

هذا كود بسيط مكون من css لتصميم مربعات و سبانات و ديفجنات ناعمة الحواف بدن اي استخدام للصور

كود HTML:

<style>
.roundDiv1
{
background:#BB0000; color:#fff; margin:0 8px;
font-family:verdana,arial;font-size:9pt;
font-weight:bolder;text-align:center;width:450px;
}
.rtop, .rbottom
{
display:block;
background:#fff;
}
.rtop *, .rbottom *
{
display: block;
height: 1px;
overflow: hidden;
background:#BB0000;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: 2px
}
</style>

الأن نأتي الى طريقة الإستخدام

سوف استخدم هذا الكلاس لنشاء 4 حواف ناعمة



والاستخدام كالتالي :

كود HTML:

<div class=”roundDiv1″>

وهذا جاهز كامل :

كود HTML:

<div class=”roundDiv1″>
<b class=”rtop”><b class=”r1″></b>
<b class=”r2″></b> <b class=”r3″>
</b> <b class=”r4″></b></b>4 حواف ناعمة<b class=”rbottom”><b class=”r4″></b>
<b class=”r3″></b> <b class=”r2″></b>
<b class=”r1″></b></b>
</div>

وسوف استخدم الكلاس لحافتين ناعمتني فقط وهما العلويتان



وهذا واحد جاهز :

كود HTML:

<div class=”roundDiv1″>
<b class=”rtop”><b class=”r1″></b>
<b class=”r2″></b> <b class=”r3″>
</b> <b class=”r4″></b></b>
DIV حافتان ناعمتان فقط

المثال في المرفقات



بتمنى اكون افدتكم :nice:

درس روووووووووووعة
جزاك الله خير

بارك الله فيك يا عزيزي

العفو ...

ماذا إذا أردت عمل 100 عنصر فى الصفحه بحواف ناعمه و دائريه ؟
ستجد انك تكتب كود css كثير جدا
أنا انصحكم بإستخدام مكتبه curvy corners التى تستخدم الجافاسكريبت فى إضافه حواف ناعمه من أى جهه و بالقطر الذى تريده كل ماعليك هو إضافه class بإسم curvy للعناصر التى تريد تغييرها أو أى إسم اخر

curvyCorners - Ultimate Rounded Corners.

شكرا على هذا الدرس الرائع
ومنذ بداية علاقتى بتطوير الويب منذ 2004 وانا لدى احساس غريب بالنسبه لهذا الموضوع
فكنت اتسائل كيف وصلت محررات html و php الى هذا التطور
ولا يمكننى عمل حواف بدون صور؟؟

ولهذا اشكرك مره اخرى على درسك الرائع

اشهر موقعك مجانا واربح 10 سنت للضغطه
دليلك لافضل مواقع الاستضافه
دليل المواقع العربيه

المشاركة الأصلية كتبت بواسطة Dezology

ماذا إذا أردت عمل 100 عنصر فى الصفحه بحواف ناعمه و دائريه ؟
ستجد انك تكتب كود css كثير جدا
أنا انصحكم بإستخدام مكتبه curvy corners التى تستخدم الجافاسكريبت فى إضافه حواف ناعمه من أى جهه و بالقطر الذى تريده كل ماعليك هو إضافه class بإسم curvy للعناصر التى تريد تغييرها أو أى إسم اخر

curvyCorners - Ultimate Rounded Corners.

100 عنصر يعني 100 DIV

عادي جدا

وين المشكلة

ثم هل تظم ان الجافا اخترعت هذه القصة من نفسها !!

اصلها هي CSS
فقط وتغيير في القيم

شكرا للاضافتك
لكن كودي اسهل بعض الشي

الكودين رائعين
ولكل منهما مجال لإستخدامه
شكرا لكما جميعا
تحية طيبة

يا نحات 100 عنصر بحواف ناعمه يعنى 100 div بداخلم ال 4 div الذى قد ذكرتهم + كود CSS خاص بكل تنسيق لو تريد تغير التنسيق من div لاخر

لكن الجافاسكريبت توفر عنك كل هذا ... انا جربت الطريقتين

ممكن !!

شكرا لك على الاكواد .

المشاركة الأصلية كتبت بواسطة Dezology

يا نحات 100 عنصر بحواف ناعمه يعنى 100 div بداخلم ال 4 div الذى قد ذكرتهم + كود CSS خاص بكل تنسيق لو تريد تغير التنسيق من div لاخر

لكن الجافاسكريبت توفر عنك كل هذا ... انا جربت الطريقتين

افضل الصور في هذه الحالة

المشاركة الأصلية كتبت بواسطة owner

شكرا لك على الاكواد .


افضل الصور في هذه الحالة

وأيضاً أنا ، أذكر أن الدرس الذي كتبه الأخ الكريم طبقته قبل 4 سنوات ولكن لم أقتنع به بسبب كثرة الأكواد ، يمكن إستخدامه مرة واحدة ولكن كثرة أستخدامه في css يكثر من حجم الملف ويمكن في نفس الوقت أن تكون الصورة بالأساس حجمها أقل بكثير في هذه الحالة ، كل شخص له طريقته ، أنا أقوم بتقويس حواف الصندوق في الفوتوشوب والتعديل عن طريق css.

جزاك الله خيراً

العفو