Gradientها

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها


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

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

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

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

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

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

شیوه نوشتار

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


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

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

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

گرادیان خطی - چپ به راست

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

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

گرادیان خطی - مورب (به انگلیسی: Diagonal)

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

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

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

استفاده از زاویه‌ها

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

شیوه نوشتار

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


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

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

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

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

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

مثال

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

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

استفاده از شفافیت

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

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

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

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

تکرار کردن یک linear-gradient

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

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

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

گرادیان‌های شعاعی (به انگلیسی: Radial) در CSS

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

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

شیوه نوشتار

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


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

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

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

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

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

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

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

تنظیم شکل

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

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

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

استفاده از کلیدواژه‌های اندازه متفاوت

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

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
مثال
1 #grad1 {
2   background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
3 }
4 
5 #grad2 {
6   background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
7 }


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

تکرار یک radial-gradient

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

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

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

خود را با تمرین‌ها بیازمایید!

ویژگی های گرادیان در CSS

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

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


منابع آموزشی