سرخط خبرها

آموزش border-radius در CSS

آموزش border-radius در CSS

در این قسمت دستور border radius در زبان css3 مورد بررسی قرار می دهیم .دستور border-radius که در ورژن ۳ از نسخه زبان css معرفی شد برای گرد کردن اشیاء درون صفحه استفاده می شود البته این دستور از مرورگر های IE ورژن ۹ به بالا و اکثر مرورگر های دیگر پشتیبانی می شود . در ادامه نحوه استفاده از این دستور را بررسی می کنیم .

یکی از بزرگترین نیاز های طراحان و برنامه نویسان،تصاویر زیبا است.که این تصاویر برای گرافیکی تر و زیبا تر شدن کار،معمولا دارای گوشه های گرد هستند.یعنی امروزه گوشه های گرد کاربرد و زیبایی بیشتری نسبت به گوشه های مربع و شکسته دارد.این گوشه ها را میتوان به راحتی و با استفاده از فتوشاپ برروی تصاویر اعمال کرد. اما کل قالب ها و چیزهایی که میسازیم که تصویر نیست.ما در آنها از لایه ها و تگ های حاشیه دار استفاده میکنیم.چیزهایی که نمیتوانیم با استفاده از فتوشاپ گوشه هایشان را گرد کنیم.برای مثال Table ها.

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

 آموزش border-radius در CSS

گرد کردن گوشه ها در CSS3

اضافه کردن گوشه ھای گرد در CSS2 بسیار وقت گیر بود . ما باید برای ھر گوشه از یک تصویر استفاده میکردیم .

در CSS3 ایجاد گوشه ھای گرد آسان است . برای اینکار از ویژگی border-radius استفاده می کنیم.

 

با استفاده از CSS3 شما میتوانید گوشه ھای اجزا ( مثل تصاویر و یا کادر ھا ) را گرد کنید بدون آنکه نیاز به برنامه جانبی دیگری مثل فوتوشاپ داشته باشید . در این جلسه نحوه گرد کردن گوشه ها با استفاده از CSS را میآموزیم.

در این مطلب شما با خواص زیر در سی اس اس آشنا می شوید:

  • border-radius

با استفاده از تگ border-radius میتوانیم گوشه های لایه ها،تصاویر و… را گرد کنیم.

پشتیبانی در مرورگر های مختلف :

این خاصیت در تمام مرورگر های مطرح پشتیبانی می شود . مرورگر IE از نسخه ۹ به بعد ، مرورگر فایرفاکس از نسخه ۴ به بعد و مرورگر های کروم و اپرا نیز از این خاصیت پشتیبانی می کنند .

توجه:این کد در مرورگر اینترنت اکسپلورر ، نسخه ی ۸ به پایین کار نمیکند

شکل کلی تگ border-radius :

border-radius : length;
مثال : border-radius : 25px ;

به وسیله پارامتر length می توانید میزان و درجه انحنای گوشه های خطوط حاشیه را تعیین نمایید . هر چه مقدار این پارامتر بیشتر باشد ، انحنای گوشه ها نیز بیشتر خواهد بود .

مقادیر border-radius :

مقادیری که صفت border-radius به خود میگیرد اعداد هستند.یکای این اعداد نیز مانند تمامی اعداد دیگر در CSS ، واحد های px،em،pt،% است.

پارامتر length را می توانید به دو روش مقدار دهی کنید :

  1. مقدار دهی بر حسب اندازه : در این حالت باید مقدار پارامتر را بر حسب واحدی مثال px یا em تعیین کنید . مثلا px10.
  2. مقدار دهی بر حسب درصد % : در این حالت باید مقدار انحنای گوشه ها را بر حسب درصد تعیین کنید . مثلا % ۱۰ .

 

div {
border-radius:25px;
-moz-border-radius:25px; /* Firefox /* یا قدیمی تر ۳٫۶
}

نحوه استفاده از این دستور در زبان CSS به صورت زیر می باشد :

 

.selector {

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;

-ms-border-radius:10px;

}

 

دستور بالا تگی با خاصیت کلاس selector را گوشه های این المنت رو به میزان ۱۰ پیکسل گرد خواهد کرد . توجه داشته باشید که در خط های بعدی دستور border radius دستوراتی برای اعمال این دستور در مرورگر های مختلف می باشد که اگر حتما می خواهید صفحه شما در تمامی مرورگر ها به یک شکل باشند باید از این دستور ها استفاده کنید .

تغییر جز به جزء گوشه ها

جهت تغییر هر یک از گوشه های المنت در این دستور به صورت زیر تنظیم می شود :

.selector {

border-radius:1 2 3 4;

}

یعنی به ترتیب:
۱بالا چپ – ۲بالا راست – ۳پایین راست – ۴پایین چپ

تعیین میزان انحنای هر گوشه در خاصیت چند مقداری border-radius . به ترتیب تعیین شده برای هر جهت دقت نمایید :

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

مثال : border-radius : 25px 20px 25px 20px ;

در دستور بالا با توجه به شکل ترتیب گرد کردن گوشه اشیاء مشخص شده است که در واقع عدد هایی که در دستور border-radius به کار رفته اند دقیقا باید مطابق شکل تنظیم شوند

مانند دستور زیر :

.selector {

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

}

نکته : برای گرد کردن شئ و تبدیل آن به یک دایره باید میزان border radius را برابر %۱۰۰ قرار دهیم

 

 مثال 

مثال : اضافه کردن گوشه های گرد به عنصر div

div
{
border:2px solid;
border-radius:25px;
}

کد زیر گوشه های قسمت مورد نظرمان مثلا عکس مورد نظر را به اندازه ی ۱۰px گرد میکند.

.myclass{
border-top-right-radius:10px;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}

خلاصه نویسی کد border-radius:

میتوانید تمام چهار خط بالا را در یک خط کد خلاصه کنید.
برای مثال این کد:

.myclass{
border-top-right-radius:50px;
border-bottom-right-radius:40px;
border-top-left-radius:30px;
border-bottom-left-radius:20px;
}

به این تبدیل میشود:

.myclass{
border-radius:30px 50px 40px 20px;
}

 

یعنی به ترتیب:
بالا چپ – بالا راست – پایین راست – پایین چپ

 مثال : 

Img {
Border-top-left-radius: 50px;
Border-bottom-left-radius: 40px;
Border-top-right-radius: 30px;
Border-bottom-right-radius: 0px;
}
 کد بالا را به صورت زیر خلاصه نویسی می کنیم :
Img {Border-radius: 50px ۳۰px 0px 40px; }

تمرین: ایجاد یک لیمو

<html>
<head>
<style>
.limoo{width: 200px; height: 200px;
background: #F5F240;
border: 1px solid #F0D900;
border-radius: 10px 150px 30px 150px;
}
</style>
</head>
<body>
<div class=”limoo”></div>
</body>
</html>

ایجاد یک دایره قرمز:

<html>
<head>
<style>
.gerdi{background:#FF0000;
height:200px;width:200px;
border-radius:100%;
}
</style>
</head>
<body>
<div class=”gerdi”></div>
</body>
</html>

در مثال اول یک تگ < div > داریم که ابتدا توسط خاصیت border برای آن خطوط حاشیه تعریف کرده ایم . سپس با استفاده از خاصیت border-radius میزان انحنای تمام گوشه های آن را به یک اندازه یکسان ۲۵px تعیین کرده ایم :

< html >
< head >
< style >
div
{
border : solid 2px blue ;
border-radius : 25px ;
}
< /style >
</head>
<body>
< div > border radius example < /div >
</body>
</html> کد

مثال قبل را بازنویسی کرده ایم . با این تفاوت که میزان انحنای هر یک از گوشه ها را به صورت مجزا و برحسب درصد در خاصیت چند مقداری border-radius تعیین کرده ایم . در این مثال برای گوشه های سمت راست مقدار %۱۰ و برای گوشه های چپ %۳۰ را در نظر گرفته ایم :

< html >
  < head >
    < style >
div
{
border : solid 2px blue ;
border-radius: 30% 10% 10% 30% ;
}
< /style >

  </head>
<body>
    < div >   < br /> border radius example   < br /> < br /> < /div >
</body>
</html>

به این ترتیب به پایان این قسمت از سری آموزش های دوران طراحی وب رسیدیم , امیدوارم از این آموزش لذت کافی رو ببرید ! در ضمن نکته ای دیگر این که نظرات مقداری کم رنگ شده امیدوارم با دیدگاه های خوبتون پر رنگ تر بشه

موفق و پیروز و سربلند باشید

QR Code For: آموزش border-radius در CSS

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.