X
تبلیغات
رایتل
آموزش گردبر کردن گوشه های کادر - کدهای حرفه ای وبلاگ و سایت
کدهای Css3 , JavaScript, PHP و HTML
آموزش گردبر کردن گوشه های کادر
شنبه 13 فروردین 1390 ساعت 14:13 | نوشته ‌شده به دست ایمان فـخــار

تا همین چند وقت پیش اگر می خواستیم در روی یک سند HTML یک کادر مربع شکل که گوشه های اون گرد شده باشند رو ترسیم کنیم باید شکل مورد نظر رو در محیط هایی مانند فتوشاپ رسم می کردیم و بصورت عکس، بعد از آپلود  از اون استفاده می کردیم البته مسئله حجم فایل و لود صفحه هم همیشه مطرح بوده
در CSS3 این مشکل با استفاده از کد radius حل شده به کادرهای زیر نگاه کنید

6
5
4
3
2
1

10
9
8
7

تمامی این کادرها در واقعه یک لایه (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 عدد  می گذاریم برای دو ظلع بالا و چپ اندازه شعاع را تعریف می کنیم اگر یک اندازه تعریف کنیم نمایشگر طول دو شعاع رو برابر تشخیص داده و دایره ای  مورد نظر را ترسیم می کند ولی با گذاردن اعداد نا برابر نمایشگر شکلی شبیه به بیضی نمایش می دهد

 نمونه ی  1  و 2 را با دقت ببینید :

کد نمونه 1

border-top-left-radius: 50px 100px;

کد نمونه 2

border-top-left-radius: 100px;

وبسایت آموزشی http://www.w3schools.com  امکان تمرین آنلاین با این کد را برای عموم قرار داده برای استفاده از این امکان کلیک کنید

همچنین می توانید با مراجعه به آدرس 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;
}
چاپ این مطلب: کلیک کنید

(4 لایک)
نظرات (2)
شنبه 24 دی 1390 ساعت 11:37
سلام
من از وردپرس استفاده میکنم؛ هر کدوم از این کدها رو که توی پستهای سایتم میذارم، کار نمیکنه!!
میشه یک کد کامل بهم بدید که یک کادر با گوشه های منحنی داشته باشه
ممنون
امتیاز: 0 0
پاسخ:
سلام کدها کاملند و به موتور سایت مرتبط نمی شوند نمایشگرهای گوگل کروم - فایر فاکس - اپرا و از خانواده آنها این کدها را پشتیبانی می کنند
دوشنبه 13 شهریور 1391 ساعت 16:56
سلام :)
مطالب وبلاگتون خیلی کاربردی هستن
مرسی از زحماتتون
ی سوال داشتم ؟
این کد رو باید کجای وبلاگ قرار داد ؟
پاسخ:
سلام ببخشید که دیر به دیر به اینجا سر می زنم
کد را در بخش style و هرجای وبلاگ که دوست داریدئ قرار بدید هر کادری که می خواهید گوشه هایش گردبر بشه
برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
نام :
پست الکترونیک :
وب/وبلاگ :
ایمیل شما بعد از ثبت نمایش داده نخواهد شد
 
ابر برجسب
آمار
بازدیدکنندگان : 304151