این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع linear-gradient در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع linear-gradient در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع linear-gradient در CSS
با استفاده از تابع linear-gradient ( در لغت به معنی شیب خطی ) در CSS میتوان یک شیب خطی که از چندین رنگ ایجاد شده، مشخص و یا تعریف نمود، مثلا میتونیم رنگ زمینه یه باکس رو همزمان هم آبی و هم قرمز کنیم ، یعنی ترکیب این ۲تا رنگ باهمدیگه میشه یه رنگ Gradient ، به همین سادگی
این تابع رنگ را بصورت خطی ( مثلا از راست به چپ یا از چپ به راست و.. ) ایجاد میکند، ولی تابع ()radial-gradient میتواند رنگ را بصورت دایره ای ( شعاعی ) ایجاد نماید.
با استفاده از جهت های بالا – راست – پایین و چپ و یا با استفاده از زوایه مثلا ۴۵deg ( یعنی در زاویه ۴۵ درجه ) میتوان جهت پاشیده شدن رنگ را مشخص و یا تعریف نمود.
با استفاده از یک مقدار درصدی ( از ۰% تا ۱۰۰% ) نیز میتوان مشخص کرد که یک رنگ تا چه اندازه از کل رنگ زمینه را تشکیل بدهد. ( مثال شماره ۴ )
| نسخه | CSS3 |
|---|
Free-Learn
مثال از تابع linear-gradient در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : استفاده از جهت ( به سمت راست )
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to right,red,blue); height:70px; } </style> |
مثال شماره ۲ : استفاده از جهت ( به سمت پایین گوشه چپ )
|
1 2 3 4 5 6 7 8 |
<style> div { background-image: linear-gradient(to bottom left,red,yellow); height:70px; } </style> |
مثال شماره ۳ : استفاده از چندین رنگ بصورت همزمان
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to right, #673AB7, #2196F3, #87C540, #EA4335, #202340, #F4A521); height:70px; } </style> |
مثال شماره ۴ : استفاده از درصد در کنار رنگ ها ( مثلا میگیم رنگ قرمز ۲۰ درصد از رنگ زمینه را تشکیل دهد و رنگ نارنجی هم ۵۰ درصد )
|
1 2 3 4 5 6 7 8 |
<style> div { background-image: linear-gradient(to right, red 20%, orange 50%); height:70px; } </style> |
مثال شماره ۵ : استفاده از زوایه ( یعنی در مثال پایین داره میگه رنگ رو در زاویه ۹۰ درجه بپاش )
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image: linear-gradient(90deg, red, yellow); height:70px; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع linear-gradient در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()linear-gradient | ۲۶ | ۱۶ | ۱۲٫۱ | ۷ | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
linear-gradient( direction, color1, color2, color3, color4 ,... ); |
Free-Learn
جدول مقادیر تابع linear-gradient در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح | ||||||
|---|---|---|---|---|---|---|---|
| direction | جهت پاشیده شدن رنگ را مشخص میکند استفاده از کلمات کلیدی زیر مجاز می باشد to top
to right
to bottom
to left
to top left
to top right
to bottom left
to bottom right
یا استفاده از درجه / زاویه ( همانند مقادیر زیر )
|
||||||
| … , color1 , color2 |
رنگ شماره ۱ , رنگ شماره ۲ و… ( یک مقدار از %۰ تا %۱۰۰ در کنار رنگ میتواند میزان پخش شدن رنگ را مشخص کند )
|
Free-Learn
نکات و توضیحات
- در یک آموزش جداگانه ( بصورت کامل ) در مورد رنگ گریدینت ( Gradient ) صحبت کردم که پیشنهاد میکنم این آموزش رو حتما مشاهده نمایید. ( آموزش رنگ گریدینت یا Gradient در CSS )
- برای تولید انواع رنگ های گریدینت میتوانید از ابزار آنلاین فری لرن استفاده نمایید. [ مشاهده ابزار ]
