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

مقدمه

یک گرادیان (gradient) یا شیب رنگ به تغییر تدریجی و نرم یک رنگ به رنگ دیگر گفته می‌شود. در CSS علاوه بر رنگ‌های یکنواخت و تصاویر، امکان استفاده از گرادیان‌ها نیز به عنوان پس‌زمینه‌ی عناصر وجود دارد. در گذشته برای استفاده از یک پس‌زمینه‌ی گرادیانی، باید گرادیان را با استفاده از نرم‌افزارهای گرافیکی به صورت یک تصویر ایجاد می‌کردیم اما امروزه مرورگرهای مدرن از گرادیان‌ها به طور بومی پشتیبانی می‌کنند. در همه‌ی مرورگرها از دو نوع گرادیان پشتیبانی می‌شود: یکی گرادیان‌های خطی که تغییر رنگ را در امتداد یک خط راست انجام می‌دهند و می‌توانند از چپ به راست، بالا به پایین یا هر جهت دیگر باشند و دیگری گرادیان‌های شعاعی که از یک نقطه‌ی مرکزی شروع شده و در امتداد شعاع به سمت بیرون حرکت می‌کنند. پراپرتی مجزایی برای گرادیانء‌ها وجود ندارد و با آنها مانند تصاویر پس‌زمینه رفتار می‌شود. در واقع توابع linear-gradient() و radial-gradient() به عنوان مقدار پراپرتی background-image تعیین می‌شوند.

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

برای ایجاد یک گرادیان خطی (linear gradient) در CSS از تابعی به نام linear-gradient() استفاده می‌شود و با تخصیص این تابع به عنوان مقدار پراپرتی background-image گرادیان ایجاد شده به عنوان پس‌زمینه‌ی عنصر تعیین می‌شود.

یک گرادیان خطی در ساده‌ترین حالت از دو رنگ تشکیل شده که تغییر تدریجی رنگ از بالا به پایین در آن صورت می‌گیرد:

CSS

.gradient{
  background-image: linear-gradient(red, blue);
  width: 10rem;
  height: 5rem;
}

برای اشاره به رنگ‌های تشکیل‌دهنده‌ی یک گرادیان از اصطلاح رنگ توقف (color stop) استفاده می‌شود. در مثال ساده‌ی بالا، گرادیان ما از دو رنگ توقف تشکیل شده است اما محدودیتی در این مورد وجود ندارد و می‌توانیم از رنگ‌های بیشتری استفاده کنیم. مثال زیر را ببینید.

CSS

.gradient{
  background-image: linear-gradient(red, green, blue);
  width: 10rem;
  height: 5rem;
}

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

در یک گرادیان می‌توان از عبارت transparent به عنوان یک رنگ توقف استفاده کرد. مثال زیر را اجرا کنید و نتیجه را ببینید:

CSS

.gradient{
  background-image: linear-gradient(transparent, blue, transparent);
  width: 10rem;
  height: 5rem;
}

تغییر مسیر گرادیان

همانطور که در مثال‌های بالا هم دیدیم، جهت پیش‌فرض گرادیان از بالا به پایین است اما اگر بخواهیم برای گرادیان زاویه‌ی دلخواهی را تعیین کنیم، می‌توانیم از فرمت to استفاده کنیم و جهت پایانی گرادیان را با استفاده از کلمات کلیدی top، bottom، right و left تعیین کنیم. مثال زیر را ببینید:

CSS

.gradient{
  background-image: linear-gradient(to right, red, blue);
  width: 10rem;
  height: 5rem;
}

البته می‌توانیم با استفاده از واحد deg یا درجه زاویه‌های دقیق‌تری را نیز انتخاب کنیم. در این صورت، صفر درجه مشابه کلمه کلیدی top است و سنجش زاویه در جهت خلاف حرکت عقربه‌های ساعت خواهد بود و در ضمن، مقادیر منفی نیز مجاز است. مثال زیر را ببینید:

CSS

.gradient{
  background-image: linear-gradient(45deg, red, blue);
  width: 10rem;
  height: 5rem;
}

سفارشی‌سازی رنگ‌های توقف

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

CSS

.gradient{
  background-image: linear-gradient(to right, red 0%, blue 25%);
  width: 10rem;
  height: 5rem;
}

اگر کد بالا را اجرا کنید، خواهید دید که گرادیان با رنگ قرمز شروع شده و به‌تدریج تا رسیدن به 25% به آبی تغییر می‌کند.

دو رنگ مجاور یکسان یک ناحیه‌ی رنگی یکنواخت ایجاد می‌کنند. مثال زیر را ببینید:

CSS

.gradient{
  background-image: linear-gradient(to right, red 0%, green 25%, green 75%, blue 100%);
  width: 10rem;
  height: 5rem;
}

با اجرای کد بالا خواهید دید که بین 25% و 75% رنگ یکنواخت سبز قرار دارد. به همین ترتیب، اگر اولین رنگ بعد از 0% باشد یا آخرین رنگ قبل از 100% باشد، فضای باقیمانده‌ی قبل یا بعد دارای رنگی یکنواخت خواهد بود.

علاوه بر واحد درصد، امکان استفاده از واحدهای طولی مانند px، em و rem هم وجود دارد.

گرادیان‌های شعاعی

همانطور که دیدیم، یک گرادیان خطی تغییر تدریجی و نرم رنگ را در راستای خطی که زاویه‌ی آن قابل تعیین است، انجام می‌دهد. اما نوع دیگری از گرادیان‌ها نیز وجود دارد که کار تغییر رنگ را از یک نقطه‌ی مرکزی به سمت بیرون انجام می‌دهند. این گرادیان‌ها را گرادیان‌های شعاعی (radial gradients) می‌نامند. در CSS برای خلق یک گرادیان شعاعی از تابعی به نام radial-gradient() استفاده می‌شود. برای ایجاد یک گرادیان شعاعی حداقل به دو رنگ به عنوان color stop یا رنگ توقف نیاز داریم.

CSS

.gradient{
  background-image: radial-gradient(red, blue);
  width: 10rem;
  height: 5rem;
}

تعیین شکل و مکان گرادیان‌های شعاعی

یک گرادیان شعاعی در حالت پیش‌فرض به شکل یک بیضی است که در مرکز عنصر قرار دارد اما هم شکل و هم مکان آن را می‌توان تغییر داد.

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

CSS

radial-gradient(circle, black 25%, white, black 75%);

دو مقدار طولی برای بیضی و یک مقدار برای دایره برای تنظیم شعاع‌های افقی و عمودی گرادیان لازم است. در مورد بیضی، استفاده از مقادیر درصد نسبت به ابعاد عنصر نیز امکانپذیر است. مثال زیر را ببینید.

CSS

radial-gradient(75% 25%, gray, black);

در مواردی که به دقت بالایی نیاز نداریم، می توانیم از مقادیر از پیش تعریف‌شده‌ی closest-side، closest-corner، farthest-side و farthest-corner استفاده کنیم.

مثال زیر را ببینید.

CSS

radial-gradient(farthest-side, gray, black);

برای یک گرادیان شعاعی مبدأ (origin) به طور پیش‌فرض در مرکز قرار دارد اما می‌توانیم با استفاده از کلمه کلیدی at که بعد از آن مکان با همان روشی که در مورد پراپرتی background-position دیدیم، تعیین شده است، اقدام به تغییر آن بنماییم. ابتدا موقعیت افقی و در ادامه موقعیت عمودی به طور اختیاری تعیین می‌شود. مثال زیر را ببینید.

CSS

radial-gradient(at right bottom, gray, black);

تکرار گرادیان‌ها

گرادیان‌های خطی و شعاعی به گونه‌ای هستند که امکان تکرار الگوهای گرادیانی را نمی دهند، زیرا گرادیان‌ها ماهیتاً باید کشیده شوند تا عنصری را که در آن تعریف شده‌اند، پر کنند. اما در CSS دو تابع دیگر با نام‌های repeating-linear-gradient() و repeating-radial-gradient() وجود دارد که به ترتیب، برای خلق گرادیان‌های خطی تکرارشونده و گرادیان‌های شعاعی تکرارشونده کاربرد دارند. بنابراین، برای ایجاد یک گرادیان خطی تکرارشونده باید از تابع repeating-linear-gradient() استفاده کنیم. آرگومان‌های این تابع مشابه تابع linear-gradient() است. مثال زیر را ببینید.

CSS

repeating-linear-gradient(-45deg, white 0, black 10%, white 20%);

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

CSS

repeating-linear-gradient(-45deg, white 0, black 10%, white 20%);

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

CSS

          repeating-radial-gradient(black, black 5%, white 5%, white 10%);

همانطور که احتمالاً متوجه شده‌اید، سینتکس تعریف گرادیان‌ها در CSS نسبت به سایر ویژگی های CSS به شکل قابل ملاحظه‌ای پیچیده‌تر است. به همین دلیل، برخی ترجیح می‌دهند از یک ابزار آنلاین برای خلق گرادیان‌های مورد نظرشان استفاده کنند. یک نمونه از این ابزارها از طریق وبسایت colorzilla.com در دسترس است. این ابزار آنلاین به ما امکان می‌دهد که گرادیان مورد نظر خود را به طور گرافیکی ایجاد کنیم و در نهایت کد CSS متناظر را در اختیار ما قرار می‌دهد. در ضمن، این ابزار پیشوندهای لازم برای پشتیبانی در مرورگرهای قدیمی‌تر را نیز ارائه می‌دهد تا حداکثر پشتیبانی حاصل شود.