ایجاد گوشه های خم با CSS

خاصیت border-radius در طراحی به شما این امکان را می دهد تا بدون نیاز به طراحی و استفاده از تصویر ، گوشه های خم را ایجاد کنید و نیازی به استفاده از چندین برچسب div و یا جدول نخواهد بود. این آموزش بر اساس استاندارد CSS3 نوشته شده است. که این استاندارد نیاز به ، به روز بودن مرورگر شما دارد تا بتوانید از آن استفاده کنید.

اولین بار در سال 2005 بود که خاصیت border-radius شنیده شد تا دنیای وب را متحول کند ، البته اختلاف هایی هم در تعریف این ویژگی در مرورگرهای مختلف وجود داشت و وجود دارد البته سهولت استفاده از این تکنیک در مقایسه با سایر روش هایی همچون استفاده از جداول و تصاویر باعث شد تا طراحان دنیای وب ، سریعتر از قبل از این ویژگی استقبال کنند و شاهکارهای خود را با استفاده از این ویژگی به نمایش بگذارند.

به عنوان مثال :

این جعبه متن بایستی با گوشه های خم در مرورگر های فایرفاکس ، کروم ، اپرا و اینترنت اکسپلورر 9 دیده می شود.

این کد در تئوری خیلی ساده است :

#example1 {
 border-radius: 15px;
 }

اگر چه ، در اینجا ، شما نیاز دارید تا از پیشوندی که فایرفاکس پشتیبانی می کند نیز استفاده کنید (البته همین الان که من دارم این مطلب رو مینویسیم و از فایرفاکس 7 بتا استفاده می کنم نیازی به این پیشوند نیست و ظاهرا این مشکل در فایرفاکس حل شده!) ، این پسوند -moz- هست ، در قسمت دیگری از همین مطلب پیشوندهای تمام مرورگرها را بیان خواهم کرد می توانید به ادامه مقاله مراجعه کنید.

#example1 {
 -moz-border-radius: 15px;
 border-radius: 15px;
 }

نحوه عملکرد کد

خم های ایجاد شده در 4 گوشه را همچنین می توان توسط 4 دستور جداگانه به وجود آورد یعنی اینگه برای ایجاد خم در هر یک از گوشه ها یک دستور می توان نوشت مثلاً برای اینکه تنها گوشه سمت راست و بالا دارای خم باشد می توان از ویژگی border-top-right-radius استفاده کرد یا مثلاً اگر بخواهیم تنها دو گوشه بالا دارای خم باشند می توان نوشت border-top-radius و سایر حالت ها نیز با تغییر کلمات بین border و radius قابل دستیابی هستند پس در واقع می توان یک کادر داشت که هر یک از گوشه های آن با یک شعاع متفاوت خم شده باشند و برای اینکار باید 4 خط نوشته شود.

برای شروع من ابتدا مقدار خم را برای هر گوشه از 4 گوشه ی موجود بررسی می کنم.

border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius:

ویژگی border-*-radius می تواند دارای یک یا دو مقدار باشد که به صورت طول و یا درصد بیان می شود ترکیب اصلی به این شکل است :

border-*-*-radius: [  | <%> ] [  | <%> ]?  

به عنوان مثال:

border-top-left-radius: 10px 5px;
 border-bottom-right-radius: 10% 5%;
 border-top-right-radius: 10px;

اینجا 2 مقدار برای یک خم داده شده است که در واقع به منظور مشخص کردن مقدار شعاع افقی و عمودی یک چهارم دایره (خم) می باشند که آن را به یک چهارم بیضی تبدیل می کند. وقتی شما یک مقدار را برای شعاع وارد کنید در واقع شعاع افقی و عمودی به صورت پیش فرض یکسان در نظر گرفته می شود و یک چهارم دایره شما دیگر تبدیل به یک چهارم بیضی نمی شود. در شکل های زیر می توانید این موضوع را بهتر درک کنید :

مثالی برای ایجاد گوشه های خم

توجه کنید در صورتی که مقدار را 0 قرار دهید گوشه به شکل مربعی می باشد و دیگر خم نمی باشد.

border-radius:

این خاصیت که کوتاه شده است برای تعریف همزمان خم 4 گوشه استفاده می شود بنابراین می توان بیش از یک مقدار برای این خاصیت تعریف کرد که می تواند تا 4 مقدار (برای 4 گوشه) به صورت پیکسل و یا درصد تعریف کرد، ترکیب اصلی آن به این شکل است:

[  |  ]{1,4} [ / [  |  ]{1,4} ]?

به عنوان مثال

border-radius: 5px 10px 5px 10px / 10px 5px 10px 5px;
 border-radius: 5px;
 border-radius: 5px 10px / 10px;

سری اول مقادیر در واقع مشخص کننده شعاع افقی خم هست و مقادیر دوم بعد از علامت / مشخص کننده مقدار شعاع عمودی هستند ، اگر شما فقط یکسری مقدار را مشخص کنید به صورت پیش فرض مقدار شعاع افقی و عمودی برابر در نظر گرفته می شوند. ترتیب مقادیر به این شکل است :

  1. مقدار اول برای شعاع بالا گوشه چپ
  2. مقدار دوم برای شعاع بالا گوشه راست
  3. مقدار سوم برای شعاع پایین گوشه راست
  4. مقدار چهارم برای شعاع پایین گوشه چپ

می باشند.

توجه کنید اگر یک مقدار را وارد کنید یعنی فقط یک عدد این عدد به عنوان مقدار شعاع برای چهار گوشه در نظر گرفته می شود.

پیشوند -moz- در فایرفاکس :

فایرفاکس در نسخه های قبلی خود از این خاصیت تنها زمانی پشتیبانی می کند که کد را با پیشوند moz در کد های سایت خود قرار دهید در جدول زیر مقادیر معادل را برای فایرفاکس مشاهده می کنید

معادل در فایرفاکسW3C Specification

-moz-border-radius

-moz-border-radius-topleft

-moz-border-radius-topright

-moz-border-radius-bottomright

-moz-border-radius-bottomleft

border-radius

border-top-left-radius

border-top-right-radius

border-bottom-right-radius

border-bottom-left-radius

در پایان برای شما 9 حالت آماده را در نظر گرفتم که می توانید بر اساس شکل ها از کدهای آن استفاده کنید :

ایجاد خم تنها با css

#Example_A {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}

#Example_B {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#Example_C {
height: 65px;
width:160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#Example_D {
height: 5em;
width: 12em;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#Example_E {
height: 65px;
width:160px;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

#Example_F {
height: 70px;
width: 70px;
-moz-border-radius: 35px;
border-radius: 35px;
}

ناحیه کاربری