Gradientها

از موتو کد، دانشنامهٔ برنامه‌نویسی

پس زمینه Gradient (دارای درجات مختلف رنگ)

گرادیان‌ها (gradients) در CSS امکان نمایش انتقال ملایم بین دو یا چند رنگ مشخص شده را فراهم می‌کنند.[۱]

CSS دو نوع گرادیان تعریف می‌کند:

  • گرادیان‌های خطی (به سمت پایین/بالا/چپ/راست/مورب)
  • گرادیان‌های شعاعی (بوسیلهٔ مرکزشان مشخص می‌شوند)

گرادیان‌های خطی در CSS[ویرایش | ویرایش]

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

شیوه نوشتار[ویرایش | ویرایش]

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

گرادیان خطی - بالا به پایین (حالت پیش‌فرض)

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

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

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

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

گرادیان خطی - مورب (Diagonal)

با تعیین هر دو نقطه آغاز افقی و عمودی می‌توانید یک گرادیان مورب ایجاد کنید.

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

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

استفاده از زاویه‌ها[ویرایش | ویرایش]

اگر می‌خواهید کنترل بیشتری بر جهت گرادیان داشته باشید، می‌توانید بجای جهت‌های از پیش تعریف شده، یک زاویه تعریف کنید (به سمت پایین، به سمت بالا، به سمت راست، به سمت چپ، به سمت بالا-راست و غیره).

شیوه نوشتار[ویرایش | ویرایش]

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

زاویه بصورت زاویه ای بین خط افقی و خط گرادیان تعیین می‌شود.

مثال زیر نحوه استفاده از زوایا در گرادیان‌های خطی را نشان می‌دهد:

مثال
#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

استفاده از چند ایستگاه رنگ[ویرایش | ویرایش]

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

مثال[ویرایش | ویرایش]

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

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

استفاده از شفافیت[ویرایش | ویرایش]

گرادیان‌های CSS شفافیت را هم پشتیبانی می‌کنند، که می‌توان آن را برای ایجاد اثرات محو شدن به کار برد.

برای اضافه‌کردن شفافیت، از تابع rgba() برای تعریف ایستگاه‌های رنگ استفاده می‌کنیم. آخرین پارامتر در تابع rgba() می‌تواند مقداری بین ۰ تا ۱ باشد، و شفافیت رنگ را تعریف می‌کند: ۰ نشان دهنده شفافیت کامل است، ۱ نشان دهنده رنگ کامل است (بدون شفافیت).

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

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

تکرار کردن یک linear-gradient[ویرایش | ویرایش]

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

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

یک گرادیان خطی تکرار شونده:

گرادیان‌های شعاعی (Radial) در CSS[ویرایش | ویرایش]

گرادیان شعاعی بوسیلهٔ مرکز آن تعریف می‌شود.

همچنین برای ایجاد یک گرادیان شعاعی باید حداقل دو ایستگاه رنگ تعریف کنید.

شیوه نوشتار[ویرایش | ویرایش]

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

بطور پیش‌فرض، شکل آن بیضی (Ellipse)، اندازه آن تا دورترین گوشه (Farthest-corner) و محل آن در مرکز است.

گرادیان شعاعی - ایستگاه‌های رنگ با فضای برابر (حالت پیش‌فرض)

مثال زیر یک گرادیان شعاعی با ایستگاه‌های رنگ دارای فضای برابر را نشان می‌دهد:

مثال
#grad {
  background-image: radial-gradient(red, yellow, green);
}

گرادیان شعاعی - ایستگاه‌های رنگ با فضای متفاوت

مثال زیر یک گرادیان شعاعی با ایستگاه‌های رنگ دارای فضای متفاوت را نشان می‌دهد:

مثال
#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

تنظیم شکل[ویرایش | ویرایش]

پارامتر shape، شکل را تعریف می‌کند. مقدار این پارامتر می‌تواند دایره (circle) یا بیضی (ellipse) باشد. مقدار پیش‌فرض، بیضی است.

مثال زیر یک گرادیان شعاعی به شکل دایره را نشان می‌دهد:

مثال
#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

استفاده از کلیدواژه‌های اندازه متفاوت[ویرایش | ویرایش]

پارامتر size، اندازه گرادیان را تعیین می‌کند. این پارامتر می‌تواند چهار مقدار داشته باشد:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
مثال
#grad1 {
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

یک گرادیان با کلیدواژه‌های اندازه متفاوت:

تکرار یک radial-gradient[ویرایش | ویرایش]

تابع repeating-radial-gradient() برای تکرار کردن گرادیان‌های شعاعی بکار می‌رود:

مثال
#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

یک گرادیان شعاعی تکرار شونده:

خود را با تمرین‌ها بیازمایید![ویرایش | ویرایش]

ویژگی های گرادیان در CSS[ویرایش | ویرایش]

جدول زیر ویژگی‌های گرادیان در CSS را لیست می‌کند:

ویژگی تعریف
background-image یک یا چند تصویر پس زمینه برای یک عنصر تنظیم می‌کند

منابع آموزشی[ویرایش]