انواع-مختلف گرد و خمیده کردن حاشیه ها در css3

 

:: تا قبل از اینکه CSS3 وارد عرصه ی وب بشه ، خمیده کردن حاشیه ها توسط ویژگی های استاندارد CSS مقدور نبود . البته بعضی از مرورگر ها مثل Firefox برای خودشون یک سری ویژگی ها در CSS معرفی کردند که با استفاده از اونها ، تغیرات مد نظر ، از جمله گرد کردن حاشیه ها فقط در همون مرورگر قابل رویت بود !

:: ولی از زمانی که CSS3 رسما پا به دنیای وب گذاشت ، با قابلیت های جدید و کاربردی ای که از خودش نشون داد ، تقریبا همه ی کمبودهای ورژن های قبلی CSS رو جبران کرد . هر چند که هنوز هم جا برای اضافه کردن امکانات جدید هست .

:: امروز می خوایم در مورد گرد و خمیده کردن حاشیه ی تمامی اشیاء Html از جمله عکس ها (<img>)، تقسیم بندی ها (<div>) و ... صحبت کنیم .

:: شما باید به هر تگی از صفحه ی Html که می خواید حاشیه ی دایره ای و خمیده داشته باشه ، یک ویژگی class اضافه کنید و نام سلکتور CSS مورد نظر رو که در اینجا rounded هست اضافه کنید . برای آگاهی بیشتر در مورد سلکتورهای CSS و چگونگی استفاده از اونها حتما مطلب "Syntax و قواعد نوشتاری زبان CSS" رو بخونید .

خوب اول از همه بزارید به صورت تصویری ببینیم می خوایم چیکار کنید . در این مطلب ، تگی که قراره حاشیه ی اون رو خمیده و گرد کنیم یک عکسه که به شکل زیره :

1 <img src="http://7learn.com/imgs/roundedborders/flower0.jpg" />

:: که نمایش این تگ که یک عکس هستش به شکل زیره :

flower0 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

:: می خوایم بدون استفاده از نرم افزار های ویرایش تصویر مثل فتوشاپ و فقط با استفاده از ویژگی های جدید CSS3 حاشیه ها رو شبیه زیر گرد و خمیده کنیم :

flower1 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3     flower2 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3     flower3 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
flower4 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3     flower5 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

:: خوب حتما منتظرید ببینید چطور می شه این کار رو انجام داد ؟ حاشیه های خمیده می تونه کمک بسیار زیادی به زیبایی صفحات وب کنه . و صفحات رو از اون حالت مرسوم مستطیلی قدیمی دربیاره . واقعا چنین خصوصیتی در CSS لازم بود . خوب برای اینکه برای شِئ خاصی حاشیه ی خمیده بزاریم اول باید کلاس CSS اونو در تگش مشخص کنیم . به طور خاص در این مطلب نام کلاسی که برای تگمون مشخص کردیم رو rounded می زاریم و اونو به تگ img که در بالا گفتیم می خوایم حاشیش رو گرد کنیم به صورت زیر اضافه می کنیم :

1 <img class="rounded" src="http://7learn.com/imgs/roundedborders/flower0.jpg" />

حالا باید سلکتور CSS خودمون (rounded.) رو بنویسیم و از اون استفاده کنیم :

:: برای گرد کردن حاشیه ها در CSS3 از ویژگی border-radius استفاده می کنیم . ویژگی border-radius چهار مقدار عددی رو که با یک space از هم جدا شده اند قبول میکنه که به ترتیب اندازه حاشیه خمیده شده برای گوشه ی بالا سمت چپ ، گوشه ی بالا سمت راست ، گوشه ی پایین سمت راست و گوشه ی پایین سمت چپ رو مشخص می کنه . در تصویر زیر این ترتیب رو بهتر میبینید که برای هر گوشه خمیدگی 20 پیکسل تعیین شده :

1 border-radius:20px 20px 20px 20px;

radiusOrder انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

 البته ویژگی های جداگانه ای هم برای حاشیه ی هر کدام از گوشه ها هم وجود داره که به شکل زیرند :

1 border-top-left-radius: 20px;
2 border-top-right-radius: 20px;
3 border-bottom-right-radius: 20px;
4 border-top-left-radius: 20px;

خوب دیگه با مقدار دهی متفاوت به این ویژگی ها می تونید انواع حاشیه های خمیده رو درست کنید . به طور مثال عکسی رو که در اول این مطلب گذاشتیم ، با هم بهش حاشیه های خمیده ی متفاوت میدیم .

:: برای اینکه گوشه ی پایین سمت راست به اندازه ی 50 پیکسل خمیده باشه سلکتور rounded. به دو شکل زیر می تونه باشه :

flower1 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

1 .rounded{
2     border-bottom-right-radius: 50px;
3 }
1 .rounded{
2     border-radius:0 0 50px 0;
3 }

:: برای اینکه گوشه های بالا به اندازه ی 50 پیکسل خمیده باشند سلکتور rounded. باید به  یکی از دو شکل زیر باشه :

flower2 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

1 .rounded{
2     border-top-left-radius: 50px;
3     border-top-right-radius: 50px;
4 }
1 .rounded{
2     border-radius:50px 50px 0 0;
3 }

:: برای داشتن حاشیه هایی به شکل زیر :

flower3 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

1 .rounded{
2     border-radius:50px 0 50px 0;
3 }
1 .rounded{
2     border-top-left-radius: 50px;
3     border-bottom-right-radius: 50px;
4 }

::برای اینکه تمام گوشه ها دارای حاشیه ی خمیده به اندازه ی 20 پیکسل باشند ، یکی از 3 حالت زیر رو باید استفاده کنید:

flower4 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

1 .rounded{
2     border-radius:20px;
3 }
1 .rounded{
2     border-radius:20px 20px 20px 20px;
3 }
1 .rounded{
2     border-top-left-radius: 20px;
3     border-top-right-radius: 20px;
4     border-bottom-left-radius: 20px;
5     border-bottom-right-radius: 20px;
6 }

:: برای اینکه شئ شما حالت کاملا دایره ای بگیره باید مقدار حاشیه ها رو یک عدد بزرگ قرار برید ، که البته به اندازه ی تصویرتون بستگی داره . با توجه به اینکه اینجا عکسمون 160x160 هست من مقدار 200 پیکسل رو برای حاشیه ها انتخاب کردم .

flower5 انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3

می تونید به یکی از سه روش زیر سلکتورتون رو بنویسید که با هم فرقی ندارند از لحاظ عملکرد :

1 .rounded{
2     border-radius:200px ;
3 }
1 .rounded{
2     border-radius:200px 200px 200px 200px ;
3 }
1 .rounded{
2     border-top-left-radius: 200px;
3     border-top-right-radius: 200px;
4     border-bottom-left-radius: 200px;
5     border-bottom-right-radius: 200px;
6 }

این نکته رو اضافه کنم که فقط مرورگرهایی که CSS3 رو پشتیبانی می کنند این حاشیه های گرد شده رو نمایش میدند .
امیدوارم که این آموزش هم مورد توجه شما قرار گرفته باشه .

ارسال نظر