این آموزش در تاریخ ۱۴۰۰/۱۰/۲۰ آپدیت شده است.
آموزش تابع radial-gradient در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع radial-gradient در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع radial-gradient در CSS
با استفاده از تابع radial-gradient
( در لغت به معنی شیب شعاعی ) در CSS میتوان یک شیب شعاعی ( دایره ای ) که از چندین رنگ ایجاد شده، مشخص و یا تعریف نمود.
این تابع رنگ را بصورت شعاعی ( یاهم دایره ای – از مرکز ) ایجاد میکند، ولی تابع linear-gradient میتواند رنگ را بصورت خطی ( مثلا از سمت راست به چپ و.. ) ایجاد نماید.
با استفاده از جهت های بالا – راست – پایین و چپ و یا با استفاده از واحدهای اندازه گیری ( همچون PX یا % ) میتوان محل / موقعیت پاشیده شدن رنگ را مشخص و یا تعریف نمود.
نسخه | CSS3 |
---|
Free-Learn
مثال از تابع radial-gradient در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : پاشیده شدن رنگ های قرمز ، زرد و سبز از مرکز
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(red, yellow, green); width:180px; height:180px; } </style> |
مثال شماره ۲ : استفاده از جهت ( پاشیده شدن رنگ از جهت بالا سمت راست )
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(circle at top right, yellow, #f06d06); width:180px; height:180px; } </style> |
مثال شماره ۳ : مشخص کردن موقعیت قرارگیری رنگ ( مثلا گفتیم بصورت افقی ۱۰درصد و بصورت عمودی ۵۰ درصد )
1 2 3 4 5 6 7 8 9 |
<style> div{ width:200px; height:200px; background-image: radial-gradient(at 50% 50% , black , orange , blue); } </style> |
مثال شماره ۴ : مشخص کردن نحوه پاشیده شدن رنگ ( نزدیک اطراف باکس )
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(circle closest-side, yellow,black, #673AB7); width:180px; height:180px; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع radial-gradient
در CSS پشتیبانی میکنند یا خیر.
نام تابع | Chrome | Firefox | Opera | Safari | Edge |
()radial-gradient | ۲۶ | ۱۶ | ۱۲٫۱ | ۷ | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
1 |
radial-gradient( shape size at position , start_color , ... , end_color ); |
Free-Learn
جدول مقادیر تابع radial-gradient در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
مقدار | توضیح | ||||
---|---|---|---|---|---|
shape | شکل شیب شعاعی را مشخص میکند ellipse ( بیضی – بصورت پیش فرض ) circle ( دایره ای ) |
||||
size | سایز / اندازه نمایشی شکل شیب شعاعی را مشخص میکند – مشاهده مثال farthest-corner ( پیش فرض – دور از گوشه ها ) closest-side ( نزدیک اطراف ) closest-corner ( نزدیک گوشه ها ) farthest-side ( دور از اطراف ) |
||||
position | موقعیت یا محل قرار گیری را مشخص میکند ( پیش فرض مقدار center می باشد، یا هم بصورت ۵۰% ۵۰% ) استفاده از کلمات کلیدی مجاز زیر : at top at bottom at left at right at top right at top left at bottom right at bottom left یا استفاده از واحدهای اندازه گیری همچون پیکسل یا درصد : مثال ( مقدار اول بصورت افقی و مقدار دوم عمودی را مشخص میکند )
|
||||
start_color , … , end_color | رنگ شماره ۱ , رنگ شماره ۲ و… |
Free-Learn
نکات و توضیحات
- برای تولید انواع رنگ های گریدینت میتوانید از ابزار آنلاین فری لرن استفاده نمایید. [ مشاهده ابزار ]