گوشه های گرد با css

pouya saadeghi

Active Member
این ترفند برای ساخت باکس هایی با گوشه گرد با استفاده از CSS استفاده میشه
chase.gif

این روش بدون استفاده از عکس یا جی کوئری و با استفاده از چهار Element با Margin های متفاوت انجام
میشه و در همه مرورگر ها ( حتی IE ) کار می کنه.
128fs318181.gif

اول یک 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;}

(در کد های بالا، حاشیه ها و رنگ زمینه تنظیم می شوند)

simple.gif

باکس ما آماده است!
91.gif
کد نهایی به این شکل خواهد بود:

کد 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;}

شما می تونید با تغییر دادن کد شکل های جدید هم درست کنید.

گوشه های مربع:

square.gif

کد:
.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;}

فقط گوشه های سمت راست گرد باشند:

chapsade.gif

کد:
.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 کاری کنید که فقط گوشه های بالا گرد باشند.

painsade.gif

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

یا فقط یک گوشه گرد باشد
90.gif


onecorner.gif

و....

__________________
:wink:اگه این آموزش براتون مفید بود از کلید
post_thanks.gif
استفاده کنید.
 
آخرین ویرایش:

pouya saadeghi

Active Member
فکر میکردم خیلی ساده توضیح دادم! :-?در فایل TXTی که پیوست کردم کد CSS و HTML موجوده که می تونید کپی کنید و در قالبتون بذارید...
164.gif
 

Amenocy

Member
به نظر من :

استفاده از خاصیت موزیلا , خاصیت گرد کردن در css3 و استفاده از جی کوئری میتواند همه مشکلات را حل کند (البته هم زمان استفاده کنید)
 

Amenocy

Member
فکر نمیکنم مشکل حجم باشه . اگه هم باشه مشکل حجم کار هست :green:

چون الان سایتی که توش از جی کوری و امثالهم استفاده نشه خب زیاد جالب نیست . حجم جی کوئری با پلاگینش هم 30 کیلو بیشتر نیست که حجم یه عکس معمولیه .
 

k2-4u

Well-Known Member
استفاده از خاصیت موزیلا , خاصیت گرد کردن در css3 و استفاده از جی کوئری میتواند همه مشکلات را حل کند (البته هم زمان استفاده کنید)
استفاده از css3 کلی با استاندارد های w3c مشکل درست میکنه . مثلا موزیلا واسه خودش کد گذاشته
moz گذاشته اولش safari هم واسه خودش webkit گذاشته اولش اینترنت اکسپلورر هم که از دنیا پرته !!
-----------------
جی کوئری . برای یک گرد کردن نسبت به این کد خیلی سنگین تره
------------------
حجم جی کوئری با پلاگینش هم 30 کیلو بیشتر نیست که حجم یه عکس معمولیه
30 کیلوبایت با سرعت 10 کیلوبایت در ثانیه
3 ثانیه و با dial-up
6 تا 12 ثانیه طول میکشه
(با توجه به اینکه گرد کردن گوشته تنها کد نیست)

در کل بسیار هک جالب و مفید پر استفاده ای بود
 
آخرین ویرایش:

E-Boy

کاربر فعال انجمن طراحی وب سایت
سلام به همه اساتید .
به نظر بنده هم این روش بسیار بهتر از سی اس اس 3 و یا جاوا اسکریپت هست .
متاسفانه هنوز بیش از نیمی از کاربران اینترنت از مروگر های قدیمی استفاده می کنند و استفاده از سی اس اس 3 صحیح نمی باشد .
بعضی از کاربران هم به دلیل مشکلات امنیتی قابلیت نمایش جاوا اسکریپت مرورگر خود رو غیر فعال می کنند .
پس بهتره که از جاوا اسکریپت یا سی اس اس 3 استفاده نشه .
دوستانی هم که این این مطلب رو متوجه نشدن می تونند به صفحه 340 کتاب " 101 نکته و ترفند برای استفاده از css در طراحی وب " ترجمه جناب " امیر عباس عبدالعلی " مراجعه نمایند .
البته یک روش دیگر هم برای ایجاد گوشه های گرد به وسیله تصاویر وجود داره که اگر امتحان ها گذاشتند و وقت اضافی پیدا کردم حتما دربارش توضیح میدم .
موفق باشید .
 
آموزشهای زیادی برای این کار هست ولی هیچ کدوم با ie سازگار نیستند . آیا این آموزش تو ie جواب میده ...؟
 

جدیدترین ارسال ها

بالا