زوايا دائرية مع اطار بدون صور

[owner]

السلام عليكم ..

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

اثناء تصفحي مواقع الانترنت وجدت طريقة لعمل مربع مع زوايا دائرية بالاضافة الى اطار .

.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;} .b1 {height:1px; background:#0FB1FF; margin:0 5px;} .b2 {height:1px; background:#C6ECFF; border-right:2px solid #0FB1FF; border-left:2px solid #0FB1FF; margin:0 3px;} 
.b3 {
 height: 1px;
 background: #C6ECFF;
 border-right: 1px solid #0FB1FF;
 border-left: 1px solid #0FB1FF;
 margin: 0 2px;
}
.b4 {
 height: 2px;
 background: #C6ECFF;
 border-right: 1px solid #0FB1FF;
 border-left: 1px solid #0FB1FF;
 margin: 0 1px;
 border-right-color: #0FB1FF;
 border-left-color: #0FB1FF;
}
.contentb {
 background: #C6ECFF;
 border-right: 1px solid #0FB1FF;
 border-left: 1px solid #0FB1FF;
 font-family: tahoma;
 font-size: 15px;
 text-align: center;
 border-right-color: #0FB1FF;
 border-left-color: #0FB1FF;
}
.contentb div {margin-left: 5px;}

وهذا كود الـhtml

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="contentb"> <div>Aldirazi - 360 Style Zone<br />
 <br />
 <span lang="ar-bh">تجربة للحواف المستديره <br />
 </span></div> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

وسوف يظهر المربع مع الحواف الدائرية .

يعمل الكود على Ie7 و FF بدون اي مشاكل .

بالتوفيق ان شاء الله

[الثلج]

رائع عزيزي وأخف من السابق المتواجد في القسم

[AMiSHKA]

ممكن تورينا مثال يا الغالي
و مشكور

[owner]

شكرا لكم على المرور والتعقيب ..

MRb3 - Powered By OwnerUpload

هذي الصفحة استخدمت فيها الكود اللي في الموضوع .

[smart mind]

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

[hishamorg]

ممكن توضح كيف أركب الكود بالصفحة لأني ماعرفت
وشكرا لك

[smart mind]

جربته .. بس ابغى أسئل الله يرضى عليك ..
كيف ممكن اتحكم بحجم البوكس ؟ كثييير عريض لمن حاولت اجربه في فوتر

[owner]

جربته .. بس ابغى أسئل الله يرضى عليك ..
كيف ممكن اتحكم بحجم البوكس ؟ كثييير عريض لمن حاولت اجربه في فوتر

اهلا ..

شكرا لكم على الردود المشجعه ..

بالنسبة الى التحكم بالBox , ممكن عن طريق اضافة ستايل جديد ضمن الستايلات بهذي المواصفات

.C {
 width: 80%;
}

ممكن تغير الـ80% الى اي رقم يناسبك او ممكن تستخدم البكسل كـ700px مثلا

وبعدين اضف Div جديد بأسم C

 
<div class="C">
-------- الكوود --------
</div>

يعني :-

 

<div class="C">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="contentb"> <div>Aldirazi - 360 Style Zone<br />
<br />
<span lang="ar-bh">تجربة للحواف المستديره <br />
</span></div> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

[smart mind]

owner
تعبناك معانا الله يسعدك ..
ضبط معاي بس صاير البوكس باليمين مررره وابغاه center

[owner]

اهلا ..

استخدم الوسم
<center>

بكون الكود كالتالي :

 
<center>
<div class="C">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="contentb"> <div>Aldirazi - 360 Style Zone<br />
<br />
<span lang="ar-bh">تجربة للحواف المستديره <br />
</span></div> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</center>

ممكن توضح كيف أركب الكود بالصفحة لأني ماعرفت
وشكرا لك

اسف اخوي ما انتبهت الى رد ..

ببساطة ضع الكود الاول في وسم الهيدر او في ملف css منفصل

والكود الثاني بين وسم الbody وراح تظهر النتائج

[I.M.A.S]

السلام عليكم و رحمة الله و بركاته

مشكور اخوي العزيز علي الكود الجميل و انا حقيقة رأيته في منتدي بي اتش بي و كان يوجد بصور و من غير صور . بس ارجو من حضرتك تشرح لنا تفصيل الكود بالنسبة لمبرمجين css حتي ندرسه و نحفظ طريقة كتابته مرة اخري بدون نسخ و لصق .

شكرا لك مقدما .

اخوك :
اسلام شحاته

و السلام عليكم و رحمة الله و بركاته

[hishamorg]

أشكرك عزيزي
لكن طبقت نفس اللي قلته وما اشتغل معايه
بل طلع لي شخابيط
أحس إن الكود حق الهيدر غلط
ياليت توضح لنا
أو تسويها في صفحة واحدة وترفقها
ولك عظيم شكري و تقديري و احترامي

[smart mind]

hishamorg
هل تستخدم ملف CSS هل تأكدت من أنك قمت بربطه بالملف الذي قمت بوضع الكود به ؟!

owner
الله يكثر من امثالك

[أبو فارس]

يعطيك ألف عافيه Owner

[owner]

اهلا.

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

الاخ : hishamorg
هل قمت بوضع الكود الاول في الوسم التالي في وسم الهيدر ؟

<style type="text/css">
</style>