میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

radial-gradient در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی ، امیدوارم که حال همه دوستان خوب باشه. لطفا در ادامه با آموزش radial-gradient در CSS با من همراه باشید.

با استفاده از تابع radial-gradient ( در لغت به معنی شیب شعاعی ) در CSS می توان یک شیب شعاعی با استفاده از یک یا چندین رنگ ایجاد و یا تعریف نمود.

این تابع رنگ را بصورت شعاعی ( بصورت دایره ای – از مرکز ) ایجاد می کند، ولی تابع linear-gradient می تواند رنگ را بصورت صاف ( خطی – از راست و چپ ) ایجاد نماید.

با استفاده از جهت های بالا – راست – پایین و چپ و یا با استفاده از واحدهای اندازه گیری ( همچون PX یا % ) میتوان محل / موقعیت پاشیده شدن رنگ را مشخص و یا تعریف نمود.

با استفاده از یک مقدار درصدی ( از ۰% تا ۱۰۰% ) نیز میتوان مشخص کرد که یک رنگ تا چه اندازه از کل رنگ زمینه را تشکیل بدهد. ( مثال شماره ۴ )

مثال از تابع radial-gradient در CSS

در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از جهت ( از سمت راست به » چپ )

div{
width:200px;
height:200px;
background-image: radial-gradient(at right , black , orange , blue);
}

مثال شماره ۲ : استفاده از جهت ( از پایین سمت چپ به » بالا سمت راست )

div{
width:200px;
height:200px;
background-image: radial-gradient(at bottom left , black , orange , blue);
}

 

مثال شماره ۳ : استفاده از واحد اندازه گیری درصد ( % ) ( مقدار اول موقعیت افقی و مقدار دوم موقعیت عمودی را مشخص میکند )

div{
width:200px;
height:200px;
background-image: radial-gradient(at 50% 50% , black , orange , blue);
}

 

مثال شماره ۴ : تنظیم میزان پخش شدن رنگ ها ( یک مقدار از ۰% تا ۱۰۰% )

div{
width:200px;
height:200px;
background-image: radial-gradient( black 30% , orange 40% , blue 80%);
}

جدول مقادیر تابع 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رنگ شماره ۱ , رنگ شماره ۲ و…

 


امیدواریم آموزش radial-gradient در CSS نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با css را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
cssw3schoolsw3schools فارسیآموزش cssآموزش css از مقدماتی تا پیشرفتهآموزش css به زبان سادهآموزش css پروژه محورآموزش css پیشرفتهآموزش css حرفه ایآموزش css در htmlآموزش css رایگانآموزش css کاملآموزش css مبتدی تا پیشرفتهآموزش css مدرسه کدنویسیآموزش css مقدماتیآموزش css مقدماتی تا پیشرفتهآموزش css و htmlآموزش html css پروژه محور رایگانآموزش html css پیشرفتهآموزش html css مقدماتیآموزش ابتدایی cssآموزش برنامه cssآموزش برنامه نویسی cssآموزش تغییر cssآموزش تگ cssآموزش جامع cssآموزش دستورات cssآموزش زبان cssآموزش ساخت cssآموزش ساده cssآموزش سریع cssآموزش صفر تا صد cssآموزش طراحی وبآموزش طراحی وب با CSSآموزش قدم به قدم cssآموزش کامل css به زبان فارسیآموزش کامل css رایگانآموزش کامل css و htmlآموزش کامل تگ های cssآموزش کد cssآموزش کد های cssآموزش کدهای cssآموزش گام به گام cssآموزش نصب cssاموزش css خارجیاموزش css کلیک سایتاموزش css مبتدیاموزش افکت های cssاموزش انلاین cssاموزش پایه cssاموزش تگ های cssاموزش ساخت منو cssاموزش کدنویسی cssاموزش مقدماتی css pdfدانلود آموزش css به زبان فارسیدانلود آموزش css پیشرفتهساختار دستورات CSSسی اس اسفارسی w3schoolsکتاب آموزش css فارسی
ارسال دیدگاه

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

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟