آشنایی با Conic Gradient در CSS

تا الان توی CSS به‌راحتی می‌تونستیم از Linear Gradient و Radial Gradient استفاده کنیم. حالا یه نوع سوم گرادینت هم به CSS اضافه شده به اسم Conic Gradient.

Conic Gradient از نظر ظاهری یه کم شبیه Radial Gradient هست، اما یه تفاوت مهم داره: در Radial Gradient تغییر رنگ از مرکز به سمت بیرون انجام میشه، ولی در Conic Gradient رنگ‌ها دور تا دور یک دایره و روی محیط اون پخش می‌شن.

مثلاً در کد زیر، هر دو گرادینت از رنگ‌های یکسانی استفاده می‌کنن، اما نتیجه کاملاً متفاوته:

.gradient {
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.radial {
  background: radial-gradient(#FAE042, #4AAE9B);
}

.conic {
  background: conic-gradient(#FAE042, #4AAE9B);
}

و HTML مربوط به اون:

<div class="gradient radial"></div>
<div class="gradient conic"></div>

استفاده از چند رنگ در Conic Gradient

مثل سایر گرادینت‌ها، می‌تونید چندین رنگ مختلف رو تعریف کنید:

.conic {
  background: conic-gradient(cyan, magenta, yellow, black);
}

در این حالت رنگ‌ها به ترتیب دور دایره قرار می‌گیرن و به هم تبدیل می‌شن.

تعیین موقعیت رنگ‌ها

برای هر رنگ می‌تونید مشخص کنید که در چه نقطه‌ای از دایره قرار بگیره. این مقدار می‌تونه بر اساس درجه (deg)، درصد (%) یا حتی واحد turn باشه.

.conic {
  background: conic-gradient(red 180deg, #4AAE9B);
}

یا:

.conic-2 {
  background: conic-gradient(red 180deg 90%, #4AAE9B);
}

نکته جالب اینجاست که اگر برای یک رنگ دو مقدار مشخص کنید، مقدار دوم نحوه انتقال رنگ به رنگ بعدی رو تعیین می‌کنه.

ایجاد مرزهای تیز (Hard Stops)

اگر نخواهید بین دو رنگ حالت محو شدن یا انتقال نرم وجود داشته باشه، می‌تونید از Hard Stop استفاده کنید تا رنگ‌ها ناگهانی تغییر کنن:

.conic-4 {
  background: conic-gradient(
    cyan 25%,
    magenta 0 50%,
    yellow 0 75%,
    black 0
  );
}

این تکنیک برای ساخت نمودارهای دایره‌ای، بخش‌بندی رنگی و طرح‌های گرافیکی خیلی کاربردیه.

استفاده از from و at

تعیین زاویه شروع

با استفاده از کلمه from می‌تونید مشخص کنید گرادینت از چه زاویه‌ای شروع بشه:

.conic {
  background: conic-gradient(
    from 45deg,
    cyan,
    magenta,
    yellow
  );
}

در این مثال، گرادینت از زاویه ۴۵ درجه آغاز می‌شه.

تغییر مرکز گرادینت

با استفاده از at هم می‌تونید محل مرکز گرادینت رو جابه‌جا کنید:

.conic {
  background: conic-gradient(
    from 45deg at 65% 35%,
    cyan,
    magenta,
    yellow
  );
}

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

ایجاد انتقال نرم بین ابتدا و انتهای گرادینت

اگر می‌خواهید ابتدا و انتهای گرادینت بدون ایجاد خط یا شکست به هم متصل بشن، کافیه آخرین رنگ رو با اولین رنگ یکسان قرار بدید:

.conic {
  background: conic-gradient(
    cyan,
    magenta,
    yellow,
    cyan
  );
}

این کار باعث می‌شه حلقه رنگی کاملاً یکدست و روان به نظر برسه.

Repeating Conic Gradient

علاوه بر conic-gradient، تابع دیگری به نام repeating-conic-gradient هم وجود داره که الگوهای تکرارشونده ایجاد می‌کنه:

.conic-repeating {
  background: repeating-conic-gradient(
    red 10%,
    #4AAE9B 20%
  );
}

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

پشتیبانی مرورگرها و Polyfill

در سال ۲۰۲۰ حدود ۸۵٪ دستگاه‌ها از conic-gradient پشتیبانی می‌کردند. برای مرورگرهایی که هنوز از این قابلیت پشتیبانی نمی‌کنند، می‌توان از Polyfill ساخته‌شده توسط Lea Verou استفاده کرد.

برای فعال‌سازی Polyfill کافی است فایل‌های زیر را قبل از بسته شدن تگ body در صفحه خود قرار دهید:

<script src="/assets/polyfills/prefixfree.min.js"></script>
<script src="/assets/polyfills/conic-gradient.js"></script>

جمع‌بندی

Conic Gradient یکی از قابلیت‌های جذاب CSS است که امکان ایجاد گرادینت‌های دایره‌ای و چرخشی را فراهم می‌کند. این ویژگی برای ساخت نمودارهای دایره‌ای، پس‌زمینه‌های خلاقانه، المان‌های تزئینی و طراحی‌های مدرن بسیار کاربردی است و در کنار Linear و Radial Gradient ابزار قدرتمند دیگری را در اختیار طراحان رابط کاربری قرار می‌دهد.

از همراهی شما با پارمین کلود متشکریم.