سی ایس ایس گریدینٹ

پس‌زمینه تدریجی

تغییر رنگ CSS به شما امکان می‌دهد تا تغییر پیوسته بین دو یا چند رنگ مشخص شده را نمایش دهید.

CSS دو نوع تغییر رنگ را تعریف کرده است:

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

تغییر خطی CSS

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

قواعد دستور زبان

background-image: linear-gradient(مقصد, color-stop1, color-stop2, ...);

تغییر خطی - از بالا به پایین (پیش‌فرض)

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

از بالا به پایین (پیش‌تعیین شده)

مثال

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

آپ خود سجاوٹ دیکھیئے

تدریجی خطی - از چپ به راست

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

از چپ به راست

مثال

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

آپ خود سجاوٹ دیکھیئے

تدریجی خطی - اقلیدسی

شما می‌توانید با معین کردن موقعیت افقی و عمودی شروع، تدریجی اقلیدسی ایجاد کنید.

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

از بالا چپ به پایین راست

مثال

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

آپ خود سجاوٹ دیکھیئے

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

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

180deg

قواعد دستور زبان

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);
}

آپ خود سجاوٹ دیکھیئے

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

پس‌زمینه تدریجی

مثال

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

آپ خود سجاوٹ دیکھیئے

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

CSS تدریجی نیز از شفافیت پشتیبانی می‌کند و می‌تواند برای ایجاد اثر تدریجی استفاده شود.

اگر شفافیت اضافه کنید، ما از کارکرد rgba() استفادہ می‌کنیم تا نماد رنگ را معین کنیم. آخرین پارامتر کارکرد 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%);
}

آپ خود سجاوٹ دیکھیئے