Gradientها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
< CSS:Advanced/CSS 3‏ | Gradients(تغییرمسیر از CSS:Gradients)
پرش به ناوبری پرش به جستجو

پس زمینه 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 یک یا چند تصویر پس زمینه برای یک عنصر تنظیم می‌کند


منابع آموزشی