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

owner · 07-01-2008, 08:54 PM

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

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

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

كود:

.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 بدون اي مشاكل .

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

الثلج · 07-01-2008, 11:58 PM

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

AMiSHKA · 08-01-2008, 03:15 PM

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

owner · 08-01-2008, 08:15 PM

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

MRb3 - Powered By OwnerUpload

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

smart mind · 12-01-2008, 10:22 AM

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

hishamorg · 12-01-2008, 04:48 PM

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

smart mind · 13-01-2008, 12:03 PM

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

owner · 13-01-2008, 01:42 PM

إقتباس:

المشاركة الأصلية بواسطة smart mind

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

اهلا ..

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

بالنسبة الى التحكم بال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 · 13-01-2008, 04:02 PM

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

owner · 13-01-2008, 06:13 PM

اهلا ..

استخدم الوسم
<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 · 13-01-2008, 06:19 PM

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

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

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

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

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

hishamorg · 13-01-2008, 11:13 PM

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

smart mind · 14-01-2008, 09:28 AM

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

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

أبو فارس · 14-01-2008, 12:10 PM

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

owner · 14-01-2008, 01:52 PM

اهلا.

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

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

كود:

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

hishamorg · 14-01-2008, 02:19 PM

أشكرك من أعماق قلبي
بصراحة أنا أحب CSS
لكن ما عرف الكثير عنا
وحركاتها الجميلة هي التي جعلتني أبحث عنها كثيرا
اشكرك
بالفعل زبطت معايه
وياليت لو فيه مواقع فيها نماذج من مثل هذه اللغة تحطونها لنا هنا
وشكرا لك عزيزي الغالي

smart mind · 14-01-2008, 08:24 PM

hishamorg
اكتب في القوقل
CSS
أو
CSS CODES
وراح تلقى اشياء حركات كثيره من هاللغه

منصور الدويغري · 12-06-2011, 12:34 PM

قمت بتنظيف الكود واضافة وسم contentb_warp لتتحكم في المربع

لـ css /

كود:

/* round box */
.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;}
.contentb_warp { width: 200px; margin: 0 auto; } /* use float: right; or float: left; or use margin: 0 auto for center */
.contentb {background: #C6ECFF; border-right: 1px solid #0FB1FF; border-left: 1px solid #0FB1FF; font: normal 12px Tahoma; text-align: center;}
.contentb div {margin-left: 5px;}

لـ html

كود:

<div id="ifooter">
<div class="contentb_warp">
<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 /></div>
    </div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>

مودتي

risalh clup · 17-06-2011, 11:47 PM

بارك الله فيك

المواضيع المشابهه
الموضوع	كاتب الموضوع	القسم	الردود	آخر مشاركة
شبكة الوعد الترفيهيه ذو محتوى ضخم للبيع باعلى سعر	عربي 2	عروض البيع وطلبات الشراء في البرمجة والتصميم وبناء المحتوى وتبادل الاعلانات	12	14-01-2008 03:14 PM
واجهة رومااانسية بدون صور نساء روووعة	شبكة طيبة	عروض البيع وطلبات الشراء في البرمجة والتصميم وبناء المحتوى وتبادل الاعلانات	20	19-08-2004 04:48 AM
مطلوووب ملف استايل VB3 بدون صور ..؟	jalal	الإصلاح والصيانة	3	08-08-2004 04:28 AM
مطلوب تصميم اسكربت صور بهذه المواصفات	zuhair mashat	عروض البيع وطلبات الشراء في البرمجة والتصميم وبناء المحتوى وتبادل الاعلانات	4	17-03-2004 08:04 AM
تفضلوا لمن أراد ألبوم صور مميز بدون قاعدة بيانات	Farasan.org	الويب والويب 2.0 والـ Semantic Web	5	23-06-2002 06:16 PM

أدوات الموضوع
مشاهدة نسخة مطبوعة إرسال هذه الصفحة