pouya saadeghi
Active Member
این ترفند برای ساخت باکس هایی با گوشه گرد با استفاده از CSS استفاده میشه
این روش بدون استفاده از عکس یا جی کوئری و با استفاده از چهار Element با Margin های متفاوت انجام
میشه و در همه مرورگر ها ( حتی IE ) کار می کنه.
اول یک Div کلاس box ایجاد می کنیم تا همه محتویات رو در اون قرار بدیم. از 4 تگ (مثلا b ) استفاده
میکنیم و 4 کلاس به اونا اختصاص میدیم:
کد HTML:
حالا در CSS ، به کلاس های r3 ، r2 ، r1 و r4 مقادیر Margin رو به صورت زیر اضافه می کنیم:
کد CSS:
(این مارجین ها (5 و 3 و 2 و 1) گوشه های باکس ما رو به پیکسل به پیکسل کاهش میدن تا گرد به نظر
بیاد.)
همونطور که در کد HTML دیدید ، ما b ها رو در 2 تگ بالا و پایین (Rtop و Rbot ) قرار دادیم تا همون
Margin ها به صورت معکوس ،گوشه های پایین رو هم گرد کنند.
حالا کد های زیر رو به CSS اضافه می کنیم:
کد CSS:
(در کد های بالا، حاشیه ها و رنگ زمینه تنظیم می شوند)
باکس ما آماده است!
کد نهایی به این شکل خواهد بود:
کد CSS:
شما می تونید با تغییر دادن کد شکل های جدید هم درست کنید.
گوشه های مربع:
فقط گوشه های سمت راست گرد باشند:
یا می تونید با حذف المنت rbot و محتویاتش از کد HTML کاری کنید که فقط گوشه های بالا گرد باشند.
یا فقط یک گوشه گرد باشد
و....
__________________
اگه این آموزش براتون مفید بود از کلید
استفاده کنید.
این روش بدون استفاده از عکس یا جی کوئری و با استفاده از چهار Element با Margin های متفاوت انجام
میشه و در همه مرورگر ها ( حتی IE ) کار می کنه.
اول یک Div کلاس box ایجاد می کنیم تا همه محتویات رو در اون قرار بدیم. از 4 تگ (مثلا b ) استفاده
میکنیم و 4 کلاس به اونا اختصاص میدیم:
کد HTML:
کد:
<div class="box"><b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b></b>
<div>line one<br />line two</div>
<b class="rbot">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b></b>
</div>حالا در CSS ، به کلاس های r3 ، r2 ، r1 و r4 مقادیر Margin رو به صورت زیر اضافه می کنیم:
کد CSS:
کد:
.r1{margin:0 5px;}
.r2{margin:0 3px;}
.r3{margin:0 2px;}
.r4{margin:0 1px;}(این مارجین ها (5 و 3 و 2 و 1) گوشه های باکس ما رو به پیکسل به پیکسل کاهش میدن تا گرد به نظر
بیاد.)
همونطور که در کد HTML دیدید ، ما b ها رو در 2 تگ بالا و پایین (Rtop و Rbot ) قرار دادیم تا همون
Margin ها به صورت معکوس ،گوشه های پایین رو هم گرد کنند.
حالا کد های زیر رو به CSS اضافه می کنیم:
کد CSS:
کد:
.box{background:#67A9DE; margin:0 15px;}
.box div{margin:0 20px;}
.rtop, .rbot{display:block; background:#FFF;}
.rtop *, .rbot *{display:block; height:1px; background:#67A9DE;overflow:hidden;}(در کد های بالا، حاشیه ها و رنگ زمینه تنظیم می شوند)
باکس ما آماده است!
کد CSS:
کد:
.box{background:#67A9DE; margin:0 15px;}
.box div{margin:0 20px;}
.rtop, .rbot{display:block; background:#FFF;}
.rtop *, .rbot *{display:block; height:1px; background:#67A9DE;overflow:hidden;}
.r1{margin:0 5px;}
.r2{margin:0 3px;}
.r3{margin:0 2px;}
.r4{margin:0 1px; height:2px;}شما می تونید با تغییر دادن کد شکل های جدید هم درست کنید.
گوشه های مربع:
کد:
.box{background:#67A9DE; margin:0 15px;}
.box div{margin:0 20px;}
.rtop, .rbot{display:block; background:#FFF;}
.rtop *, .rbot *{display:block; height:1px; background:#67A9DE;overflow:hidden;}
.r1{margin:0 5px;}
.r2{margin:0 5px;}
.r3{margin:0 5px;}
.r4{margin:0 5px; height:2px;}فقط گوشه های سمت راست گرد باشند:
کد:
.box{background:#67A9DE; margin:0 15px;}
.box div{margin:0 20px;}
.rtop, .rbot{display:block; background:#FFF;}
.rtop *, .rbot *{display:block; height:1px; background:#67A9DE;overflow:hidden;}
.r1{margin:0 5px 0 0;}
.r2{margin:0 3px 0 0;}
.r3{margin:0 2px 0 0;}
.r4{margin:0 1px 0 0; height:2px;}یا می تونید با حذف المنت rbot و محتویاتش از کد HTML کاری کنید که فقط گوشه های بالا گرد باشند.
کد:
<div class="box"><b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b></b>
<div>line one<br />line two</div>
<!--rbot deleted-->
</div>یا فقط یک گوشه گرد باشد
و....
__________________
اگه این آموزش براتون مفید بود از کلید
آخرین ویرایش:
در فایل TXTی که پیوست کردم کد CSS و HTML موجوده که می تونید کپی کنید و در قالبتون بذارید...
