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

[Sharbaji]

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

<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 حواف ناعمة



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

<div class=”roundDiv1″>

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

<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>

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



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

<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:

[كاسر الأمواج]

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

[الأزهر]

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

[Sharbaji]

العفو ...

[مصطفى فرغلى]

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

curvyCorners - Ultimate Rounded Corners.

[dir4arab.com]

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

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

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

[Sharbaji]

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

curvyCorners - Ultimate Rounded Corners.

100 عنصر يعني 100 DIV

عادي جدا

وين المشكلة

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

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

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

[الإمبراطور وحيد]

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

[مصطفى فرغلى]

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

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

[Sharbaji]

ممكن !!

[owner]

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

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

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

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

[ahmed100]

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


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

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

[خبير S E O]

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

[Sharbaji]

العفو