آموزش گرادینت(gradient) خطی در CSS

 گرادینت های CSS (یا شیب رنگ) به ما امکان می دهند تا بین دو یا چند رنگ مشخص شده، تغییرات ملایمی را نمایش دهیم. CSS سه نوع گرادینت را تعریف می کند:

1. گرادینت های خطی(Linear) : که سمت پایین، بالا، چپ، راست، یا به صورت مورب انجام می شود.

2. گرادینت های شعاعی(Radial) : که توسط مرکز آن مشخص می شود.

3. گرادینت های مخروطی(Conic) : که به دور یک نقطه ی مرکزی می چرخد.

گرادینت های خطی در CSS

برای ایجاد یک گرادینت خطی، باید حداقل دو ایستگاه رنگ(color stop) را تعریف کنیم. ایستگاه های رنگ، رنگ هایی هستند که می خواهیم تغییرات ملایمی در میان آنها ایجاد شود. ما همچنین می توانیم یک نقطه ی شروع و یک جهت (یا یک زاویه) را همراه با افکت گرادینت تنظیم کنیم.

سینتکس یا شیوه ی نوشتاری گرادینت در CSS

 background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 

جهت: بالا به پایین(پیش فرض)

مثال زیر یک گرادینت خطی که از بالا شروع می شود را نشان می دهد که از رنگ قرمز شروع شده و به رنگ زرد تبدیل می شود:

#grad {
  background-image: linear-gradient(red, yellow);
}

جهت: چپ به راست(Left to Right)

مثال زیر یک گرادینت خطی را نشان می دهد که از سمت چپ شروع می شود. این گرادینت از رنگ قرمز شروع می شود و به رنگ زرد تغییر می کند:

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

جهت: مورب(Diagonal)

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

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

استفاده از زاویه ها در گرادینت

اگر می خواهید کنترل بیشتری روی جهت گرادینت داشته باشید، می توانید یک زاویه را به جای جهت های از پیش تعریف شده تعریف کنید(to bottom و to top و to right و to bottom right). مقدار 0deg معادل با to top است. مقدار 90deg معادل با to right است.  مقدار 180deg معادل با to bottom است.

سینتکس یا شیوه ی نوشتاری:

background-image: linear-gradient(angle, color-stop1, color-stop2); 

مثال زیر، نشان می دهد که چگونه از زاویه ها در گرادینت های خطی استفاده کنیم:

#grad {
  background-image: linear-gradient(180deg, red, yellow);
}

 استفاده از چندین ایستگاه رنگ در گرادینت

مثال زیر، یک گرادینت خطی را ( از بالا به پایین) نشان می دهد که در آن از چند ایستگاه رنگ(color stop) استفاده شده است:

#grad {
  background-image: linear-gradient(red, yellow, green);
}

مثال زیر نشان می دهد که چگونه می توانیم یک گرادینت خطی را (از چپ به راست) با رنگ رنگین کمان و مقداری متن ایجاد کنیم:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

استفاده از شفافیت(Transparency)

گرادینت های CSS از شفافیت نیز پشتیبانی می کنند؛ از شفافیت برای ایجاد افکت های محو شدگی استفاده می شود. برای اضافه کردن شفافیت، از تابع rgba() برای تعریف ایستگاه های رنگ(color stops) استفاده می شود. پارامتر آخر در تابع rgba() می تواند یک مقدار از 0 تا 1 داشته باشد و شفافیت را مشخص می کند؛ که اگر 0 باشد یعنی شفافیت کامل و اگر 1 باشد، یعنی کاملاً رنگی یا همان عدم شفافیت. مثال زیر، یک گرادینت خطی را نشان می دهد که از سمت چپ شروع می شود. این گرادینت در ابتدا کاملاً شفاف است و در انتها کاملاً به رنگ قرمز است:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

تکرار کردن یک گرادینت خطی

از تابع repeating-linear-gradient() برای تکرار گرادینت های خطی استفاده می شود:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}