در این قسمت قصد داریم به شما ویرایش روی عکسها را بدون نیاز به برنامه های مختلفی چون فتوشاپ/پینت و یا هر برنامه دیگری که این کار را انجام میدهد را آموزش دهیم. در واقع این عمل با استفاده از خود css3 انجام می شود.تا قبل از اینکه CSS3 وارد عرصه ی وب بشه ، خمیده کردن حاشیه ها توسط ویژگی های استاندارد CSS مقدور نبود . البته بعضی از مرورگر ها مثل Firefox برای خودشون یک سری ویژگی ها در CSS معرفی کردند که با استفاده از اونها ، تغیرات مد نظر ، از جمله گرد کردن حاشیه ها فقط در همون مرورگر قابل رویت بود !
:: ولی از زمانی که CSS3 رسما پا به دنیای وب گذاشت ، با قابلیت های جدید و کاربردی ای که از خودش نشون داد ، تقریبا همه ی کمبودهای ورژن های قبلی CSS رو جبران کرد . هر چند که هنوز هم جا برای اضافه کردن امکانات جدید هست .
:: امروز می خوایم در مورد گرد و خمیده کردن حاشیه ی تمامی اشیاء Html از جمله عکس ها (<img>)، تقسیم بندی ها (<div>) و … صحبت کنیم .
:: شما باید به هر تگی از صفحه ی Html که می خواید حاشیه ی دایره ای و خمیده داشته باشه ، یک ویژگی class اضافه کنید و نام سلکتور CSS مورد نظر رو که در اینجا rounded هست اضافه کنید . برای آگاهی بیشتر در مورد سلکتورهای CSS و چگونگی استفاده از اونها حتما مطلب “Syntax و قواعد نوشتاری زبان CSS” رو بخونید .
خوب اول از همه بزارید به صورت تصویری ببینیم می خوایم چیکار کنید . در این مطلب ، تگی که قراره حاشیه ی اون رو خمیده و گرد کنیم یک عکسه که به شکل زیره :
<img src=”http://7learn.com/imgs/roundedborders/flower0.jpg” />
که نمایش این تگ که یک عکس هستش به شکل زیره :
می خوایم بدون استفاده از نرم افزار های ویرایش تصویر مثل فتوشاپ و فقط با استفاده از ویژگی های جدید CSS3 حاشیه ها رو شبیه زیر گرد و خمیده کنیم
: خوب حتما منتظرید ببینید چطور می شه این کار رو انجام داد ؟ حاشیه های خمیده می تونه کمک بسیار زیادی به زیبایی صفحات وب کنه . و صفحات رو از اون حالت مرسوم مستطیلی قدیمی دربیاره . واقعا چنین خصوصیتی در CSS لازم بود . خوب برای اینکه برای شِئ خاصی حاشیه ی خمیده بزاریم اول باید کلاس CSS اونو در تگش مشخص کنیم . به طور خاص در این مطلب نام کلاسی که برای تگمون مشخص کردیم رو rounded می زاریم و اونو به تگ img که در بالا گفتیم می خوایم حاشیش رو گرد کنیم به صورت زیر اضافه می کنیم :
<img class=”rounded” src=”http://7learn.com/imgs/roundedborders/flower0.jpg” />
حالا باید سلکتور CSS خودمون (rounded.) رو بنویسیم و از اون استفاده کنیم :
:: برای گرد کردن حاشیه ها در CSS3 از ویژگی border-radius استفاده می کنیم . ویژگی border-radius چهار مقدار عددی رو که با یک space از هم جدا شده اند قبول میکنه که به ترتیب اندازه حاشیه خمیده شده برای گوشه ی بالا سمت چپ ، گوشه ی بالا سمت راست ، گوشه ی پایین سمت راست و گوشه ی پایین سمت چپ رو مشخص می کنه . در تصویر زیر این ترتیب رو بهتر میبینید که برای هر گوشه خمیدگی ۲۰ پیکسل تعیین شده :
البته ویژگی های جداگانه ای هم برای حاشیه ی هر کدام از گوشه ها هم وجود داره که به شکل زیرند :
;border-top-left-radius: 20px
;border-top-right-radius: 20px
;border-bottom-right-radius: 20px
;border-top-left-radius: 20px
خوب دیگه با مقدار دهی متفاوت به این ویژگی ها می تونید انواع حاشیه های خمیده رو درست کنید . به طور مثال عکسی رو که در اول این مطلب گذاشتیم ، با هم بهش حاشیه های خمیده ی متفاوت میدیم .
برای اینکه گوشه ی پایین سمت راست به اندازه ی ۵۰ پیکسل خمیده باشه سلکتور rounded. به دو شکل زیر می تونه باشه :
}rounded
; border-bottom-right-radius: 50px
{
}rounded
;border-radius:0 0 50px 0
{
برای اینکه گوشه های بالا به اندازه ی ۵۰ پیکسل خمیده باشند سلکتور rounded. باید به یکی از دو شکل زیر باشه
}rounded
; border-top-left-radius: 50px
; border-top-right-radius: 50px
{
} .rounded
;border-radius:50px 50px 0 0
{
برای داشتن حاشیه هایی به شکل زیر :
} .rounded
; border-radius:20px;
{
} .rounded
; border-radius:20px 20px 20px 20px
{
} .rounded
;border-top-left-radius: 20px
;border-top-right-radius: 20px
;border-bottom-left-radius: 20px
; border-bottom-right-radius: 20px
{
:: برای اینکه شئ شما حالت کاملا دایره ای بگیره باید مقدار حاشیه ها رو یک عدد بزرگ قرار برید ، که البته به اندازه ی تصویرتون بستگی داره . با توجه به اینکه اینجا عکسمون ۱۶۰x160 هست من مقدار ۲۰۰ پیکسل رو برای حاشیه ها انتخاب کردم .
می تونید به یکی از سه روش زیر سلکتورتون رو بنویسید که با هم فرقی ندارند از لحاظ عملکرد :
}.rounded
;۲ border-radius:200px
{
} .rounded
;۲ border-radius:200px 200px 200px 200px
{
}.rounded
;۲ border-top-left-radius: 200px
;۳ border-top-right-radius: 200px
;۴ border-bottom-left-radius: 200px
;۵ border-bottom-right-radius: 200px
{
