PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش گردبر کردن گوشه های کادر



Patch Master
2012/12/04, 03:56 PM
تا همین چند وقت پیش اگر می خواستیم در روی یک سند HTML یک کادر مربع شکل که گوشه های اون گرد شده باشند رو ترسیم کنیم باید شکل مورد نظر رو در محیط هایی مانند فتوشاپ رسم می کردیم و بصورت عکس، بعد از آپلود از اون استفاده می کردیم البته مسئله حجم فایل و لود صفحه هم همیشه مطرح بوده
در CSS3 این مشکل با استفاده از کد radius حل شده به کادرهای زیر نگاه کنید
http://cdn.vbiran.ir/images/imported/2012/12/borderradiusdiagram12-1.png

تمامی این کادرها در واقعه یک لایه (DIV) معمولی می باشند که با استفاده از پارامتر radius و قرار دادن اعداد مختلف بدست اومدند
ما برای radius چهار گزینه داریم :

border-top-left-radius: Apx Bpx;
border-top-right-radius: Apx Bpx;
border-bottom-right-radius: Apx Bpx;
border-bottom-left-radius: Apx Bpx;
توجه داشته باشید که در فرم بالا گزینه های Apx و Bpx در واقع اندازه شعاع دایره مورد نظر در روی هر ظلع هستند وقتی برای پارامتر border-top-left-radius عدد می گذاریم برای دو ظلع بالا و چپ اندازه شعاع را تعریف می کنیم اگر یک اندازه تعریف کنیم نمایشگر طول دو شعاع رو برابر تشخیص داده و دایره ای مورد نظر را ترسیم می کند ولی با گذاردن اعداد نا برابر نمایشگر شکلی شبیه به بیضی نمایش می دهد

http://cdn.vbiran.ir/images/imported/2012/12/borderradiusdiagram12-1.png
نمونه ی 1 و 2 را با دقت ببینید :
کد نمونه 1
border-top-left-radius: 50px 100px; کد نمونه 2
border-top-left-radius: 100px; وبسایت آموزشی W3Schools Online Web Tutorials (http://www.w3schools.com) امکان تمرین آنلاین با این کد را برای عموم قرار داده برای استفاده از این امکان کلیک (http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-bottom-left-radius) کنید
همچنین می توانید با مراجعه به آدرس CSS Border Radius Generator (http://border-radius.com/) بصورت آنلاین و با جابجا کردن چند عدد یک کادر با لبه های گرد ترسیم کنید و کد رو از سایت گرفته و در وبلاگ خودتون قرار بدید
من به ترتیب یک سری کد رو هم براتون می نویسم :


3:
#cade3 {
border-top-left-radius: 100px;
border-top-right-radius: 15px 15px;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 15px 15px;
}
4:
#cade4 {
border-top-right-radius:100px;
border-bottom-right-radius:100px;
} 5:
#cade5 {
border-radius: 100px;
} 6:
#cade6 {
border-radius: 15px;
} 7:
#cade7 {
border-radius:100px
} 8:
#cade8 {
border-radius:80px;
} 9:
#cade9 {
border-radius:50px;
} 10:
#cade103 {
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}

jcs.w
2012/12/04, 08:07 PM
تاييد شد ..