شخصی سازی انحنای عناصر در CSS۳ به وسیله قابلیت جدید آن

قبلا در اینجا توضیح دادیم که چگونه میتوان گوشه های عناصر را انحنا داد. اما اخیرا قابلیت جدیدی به CSS۳ اضافه شده است که با استفاده از آن میتوانید انحنای هر گوشه را به طور جداگانه و با امکاناتی جدید تعیین کنید.
از امکانات جدید میتوان به انحنای افقی و عمودی اشاره کرد که با استفاده از آن میتوانید یک بیضی را با استفاده از CSS۳ طراحی کنید. کاری که قبل از این امکان پذیر نبود.borders-redius.jpg


در قابلیت جدید CSS۳ برای ایجاد و شخصی سازی میزان انحنای گوشه عناصر کدهای زیر اضافه شده اند:
border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius
که با شخصی سازی کدهای بالا میتوانید به نتیجه دلخواه خود برسید. برای درک بیشتر به مثال های زیر توجه کنید:
faroxa - Web2
البته اگر مقادیری برای میزان انحنا وارد نکنید، هیچگونه انحنایی نخواهید داشت.
نیازی به توضیح اضافی نیست و فقط با توجه به کدهای زیر میتوانید به راحتی از کدها استفاده کنید:
faroxa - Web2
برای ایجاد منحنی های بالا از کدهای زیر استفاده شده است:

#Example_A {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius-bottomright: ۵۰px;
border-bottom-right-radius: ۵۰px;
}
#Example_B {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius-bottomright: ۵۰px ۲۵px;
border-bottom-right-radius: ۵۰px ۲۵px;
}
#Example_C {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius-bottomright: ۲۵px ۵۰px;
border-bottom-right-radius: ۲۵px ۵۰px;
}
#Example_D {
height: ۵em;
width: ۱۲em;
-moz-border-radius: ۱em ۴em ۱em ۴em;
border-radius: ۱em ۴em ۱em ۴em;
}
#Example_E {
height: ۶۵px;
width:۱۶۰px;
-moz-border-radius: ۲۵px ۱۰px / ۱۰px ۲۵px;
border-radius: ۲۵px ۱۰px / ۱۰px ۲۵px;
}
#Example_F {
height: ۷۰px;
width: ۷۰px;
-moz-border-radius: ۳۵px;
border-radius: ۳۵px;
}

البته فعلا فقط مرورگرهای Safari و Google Chrome از نسخه ۵ به بعد و Opera ۱۰ از این قابلیت پشتیبانی میکنند و مرورگر فایرفاکس فقط از دستورهایی که با -moz شروع میشوند پشتیبانی میکند. اگر متوجه شده باشید دستورهای مرورگر فایرفاکس کمی با دستورهای استاندارد متفاوت است پس در هنگام پیاده سازی دقت داشته باشید.
موفق و پیروز باشید.

9 دیدگاه برای «شخصی سازی انحنای عناصر در CSS۳ به وسیله قابلیت جدید آن»

  1. سلام
    روی فایرفاکس ، اپرا ، سافاری و کروم درست نشون میده اما روی IE گوشه هارو گرد نمیکنه مشکل از چیه؟

  2. تشکر می کنم از همه عوامل ، برای مطالبی که ارائه می دهید.

  3. ممنون دوست عزیز
    حتما در آینده ای نزدیک درباره این ویژگی خواهم نوشت.
    موفق و پیروز باشید

امکان ثبت دیدگاه وجود ندارد.