شیرجه عمیق CSS به گرادیان های شعاعی و مخروطی – مجله Smashing

گرادیان های CSS یک ویژگی مفید CSS است که می تواند برای ایجاد افکت های رابط کاربری جالب یا حتی به ما در ترسیم چیزی بدون نیاز به ایجاد عناصر HTML برای آن کمک کند. دو شیب که می خواهم در این مقاله روی آنها تمرکز کنم عبارتند از conic-gradient و radial-gradient. هر کدام متفاوت عمل می کنند (شیب های مخروطی منحنی هستند، در حالی که گرادیان های شعاعی یک خط مستقیم هستند).

برای دنبال کردن، نیازی به دانستن هیچ کدام ندارید radial-gradient یا conic-gradient. من تمام تلاشم را می کنم که آنها را به خوبی توضیح دهم.

بیایید شیرجه بزنیم!

گرادیان شعاعی چیست؟

از نام آنها، radial-gradients توانایی ترسیم عناصر شعاعی مانند دایره یا بیضی را به ما می دهد.

بیایید به ابتدایی ترین نحو نگاه کنیم.

ابتدایی ترین مثال

در این مثال، ما یک radial-gradient با دو استاپ رنگ این منجر به یک شیب بیضی شکل شد.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}

موارد فوق اساسی ترین هستند radial-gradient می توانیم در CSS انجام دهیم. ممکن است تعجب کنید که چرا به صورت پیش فرض بیضی شد؟ خب بذار توضیح بدم

اگر هیچ نام شکلی در شیب تعریف نشده باشد (دایره یا بیضی)، به طور پیش فرض بیضی خواهد بود در موارد زیر:

• هیچ اندازه تعیین نشده است.
• یا، دو مقدار (برای عرض و ارتفاع) وجود دارد.

گرادیان شعاعی چگونه کار می کند؟

من یک سری تصاویر بصری را مرور خواهم کرد که نحوه عملکرد یک گرادیان را با افزایش کلمات کلیدی و اضافات مختلف نشان می دهد.

ابتدا اجازه دهید به مثال اولیه برگردیم.

.element {
    background: radial-gradient(#9c27b0, #ff9800);
}

هنگامی که دو رنگ بدون مشخص کردن شکل وجود دارد، گرادیان به صورت پیش‌فرض بیضی می‌شود، مانند:

بیضی عرض و ارتفاع ظرف خود را پر می کند. تار به نظر می رسد زیرا مرورگر فرض کرده است که نقطه شروع و توقف هستند 0% و 100%، به ترتیب.

در اینجا نحوه مشاهده گرادیان توسط مرورگر آمده است:

.element {
    background: radial-gradient(#9c27b0 0%, #ff9800 100%);
}

اگر اضافه کنیم circle قبل از اولین توقف رنگ، اینگونه به نظر می رسد:

.element {
    background: radial-gradient(circle, #9c27b0, #ff9800);
}

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

به طور پیش فرض، هر دوی آنها به صورت افقی و عمودی در ظرف خود در مرکز قرار دارند. به عبارت دیگر، در 50% 50%:

نکته مهمی که در اینجا باید به آن توجه کرد این است که موقعیت از مرکز دایره یا بیضی اتفاق می افتد، بنابراین یک دایره را در top left، آنچه قرار خواهد گرفت نقطه مرکزی است.

بیایید نگاهی دقیق تر به چند مثال بیندازیم.

.element {
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
}

ما همچنین می توانیم آن را در سمت راست وسط قرار دهیم. فقط اضافه کردن right دایره را در مرکز قرار می دهد right 50%:

.element {
    background: radial-gradient(circle at right, #9c27b0, #ff9800);
}

در اینجا به نظر می رسد:

گرادیان مخروطی چیست؟

در conic-gradient() تابع CSS یک گرادیان ایجاد می کند که به دور مرکز عنصر می چرخد. بیایید یک مثال اساسی را ببینیم.

.element {
    background: conic-gradient(#9c27b0, #ff9800);
}

نگاه کنید که چگونه گرادیان از نقطه مرکزی عنصر شروع می شود. از آن می چرخد 0deg به 360 به صورت پیش فرض.

بیایید ببینیم چه اتفاقی می‌افتد وقتی یک مقدار توقف سخت برای رنگ اول اضافه می‌کنیم.

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800);
}

حالا اولین رنگ پر می شود 50% عنصر، در حالی که دومی به تدریج نشان داده می شود 100%.

اگر روی رنگ دوم هم یک استاپ سخت اعمال کنیم چه اتفاقی می‌افتد؟ در قطعه زیر، اولین رنگ پر می شود 50% از عنصر، دومی از آن شروع خواهد شد 50% تا آخر (100%).

.element {
    background: conic-gradient(#9c27b0 50%, #ff9800 0);
}

با افزایش اولین مقدار توقف رنگ، پر شدن زاویه ای ایجاد می شود:

.element {
    background: conic-gradient(#9c27b0 65%, #ff9800 0);
}

نه تنها این، بلکه می‌توانیم با استفاده از تابع CSS یک گرادیان تکراری ایجاد کنیم repeating-conic-gradient() همانطور که در زیر نشان داده شده است.

.element {
    background: repeating-conic-gradient(
    #9c27b0 0 15deg,
    #ff9800 15deg 30deg
    );
}

تکه های بالا اولین رنگ را پر می کنند 0deg به 15deg، سپس رنگ دوم از پر می شود 15deg به 30deg. با تکرار، مانند شکل زیر می شود:

استفاده از موارد برای گرادیان شعاعی

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

radial-gradient در بخش قهرمان

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

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

در اینجا بخش قهرمان با بیضی (رنگی خاکستری، فقط برای اهداف نمایشی) است:

در اینجا نحوه انعکاس آن در CSS آمده است:

.hero {
    background-color: #fbfafa;
    background-image: radial-gradient(#fbfafa, rgba(0,0,0,0) center/70% 70% no-repeat, url("hero-bg.svg");
    background-position: center;
    background-size: 70% 70%, cover;
    background-repeat: no-repeat;
}

به این ترتیب، ما الگو را در زیر محتوا پوشش دادیم، اکنون خواندن آن بسیار ساده تر است.

جلوه الگوی نقطه‌ای

برای ایجاد جلوه ای از الگوی نقطه چین می توانیم استفاده کنیم radial-gradient. در اینجا به نظر می رسد:

برای رسیدن به آن، می توانیم یک دایره کوچک ایجاد کنیم و بقیه گرادیان شفاف خواهد بود.

در اینجا این است که چگونه به خودی خود به نظر می رسد:

هنگامی که این الگو تکرار می شود، در اینجا به نظر می رسد:

برای منعکس کردن آن در CSS، باید یک عرض و ارتفاع برای گرادیان اضافه کنیم. از آنجایی که گرادیان ها به طور پیش فرض تکرار می شوند، به الگوی بالا منجر می شود.

.dot-pattern {
  --color-1: #9c27b0;
  --color-2: rgba(0,0,0,0);
  background-image: radial-gradient(circle at 2px 2px, var(--color-1) 1px, var(--color-2) 0);
  background-size: 15px 15px;
}

جلوه های تصویری

ترکیب شده با mix-blend-mode، گرادیان های شعاعی می توانند جلوه های رابط کاربری جالبی برای تصاویر ایجاد کنند. در مثال زیر، به نحوه قرارگیری دایره در گوشه بالا سمت چپ توجه کنید. ما می توانیم با بازی با حالت های ترکیبی برای رسیدن به یک اثر خاص از آن بهره ببریم.

.thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top left, #9c27b0, #ff9800);
    mix-blend-mode: hard-light;
    opacity: 0.4;
}

موارد استفاده برای گرادیان مخروطی

نمودارهای پای

اولین مورد استفاده ای که می توانم برای شیب مخروطی فکر کنم نمودارهای دایره ای ساده است. چندی پیش این کاری بود که می‌خواستیم در CSS انجام دهیم، و اکنون به راحتی امکان‌پذیر است.

.pie-chart {
    width: 100px;
    height: 100px;
    background: conic-gradient(from 0deg, #b2daf9 128deg, #2096f3 0);
    border-radius: 50%;
}

پس زمینه ها و الگوها

هزاران امکان برای ایجاد الگوی با شیب مخروطی وجود دارد. برای این مثال، من روی الگوی شطرنجی تمرکز خواهم کرد.

در اینجا چیزی است که در گرادیان زیر اتفاق می افتد:

• در #fff رنگ پوشاننده است 90deg از عنصر؛
• سپس آن را به دنبال دارد #000 به 180deg;
• سپس آن را به دنبال دارد #fff به 270deg;
• در نهایت، #000 پر شده تا انتهای زاویه (360deg).

.checkerboard {
    --size: 25px;
    width: 200px;
    height: 100px;
    background-image: conic-gradient(#fff 90deg, #000 0 180deg, #fff 0 270deg, #000 0);
    background-size: var(--size) var(--size);
}

هنگامی که تکرار و کنترل از طریق background-size، شبیه این خواهد شد:

نه تنها این، بلکه می‌توانیم با چرخاندن برخی از مقادیر به روشی متفاوت، به جلوه‌های واقعاً جالبی برسیم. به عنوان مثال:

.element {
    background-image: conic-gradient(#fff 90deg, #000 0 136deg, #fff 0 313deg, #000 0);
}

الگوهای رابط کاربری

گاهی اوقات، ممکن است نیاز داشته باشیم که یک الگوی رابط کاربری تصادفی ایجاد کنیم که اشکال مختلفی دارد. می توانیم استفاده کنیم conic-gradient برای رسیدن به آن ایده این است که ما اندازه گرادیان را از طریق کنترل می کنیم background-size، و سپس تغییر دهید conic-gradient زاویه برای دستیابی به اثرات مختلف.

ما یک عنصر با عرض و ارتفاع داریم 200px. در این عنصر، پس زمینه را تکرار می کنیم.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background-size: var(--size) var(--size);
}

برای تصور بهتر، هر پس‌زمینه اندازه‌ای دارد 20px هم برای عرض و هم برای ارتفاع و به صورت افقی و عمودی تکرار خواهد شد.

حال، هر مربعی که می بینید حاوی یک است conic-gradient. در حال حاضر، من دو سایه آبی اضافه می کنم تا مفهوم را بهتر نشان دهم.

.element {
    --size: 20px;
    width: 200px;
    height: 200px;
    background: conic-gradient(#2296F3 0.13turn, rgba(255,255,255,0) 0);
    background-size: var(--size) var(--size);
}

شیب مخروطی بدون تکرار آن به این صورت به نظر می رسد:

با تکرار، به نظر می رسد این است. حال نکته این است که رنگ دوم را شفاف کنید که به شکل مثلث در می آید.

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

متحرک سازی گرادیان های مخروطی با @property

ما می توانیم جلوه های انیمیشن جالبی ایجاد کنیم conic-gradient. با این حال، این به طور پیش فرض امکان پذیر نیست. ما باید از @property تعریف برای تعریف یک ویژگی سفارشی که برای انیمیشن استفاده خواهیم کرد.

@property --conic-mask {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.conic-mask {
    --conic-mask: 0%;
    -webkit-mask: conic-gradient(from 0deg at 50% 50%, #000 var(--conic-mask), #0000);
    transition: --conic-mask 1s ease-out;
}

.conic-mask: hover {
    --conic-mask: 100%;
}

برش گوشه ها با اشکال سفارشی

این نسخه ی نمایشی توسط عفیف را همراهی کنید. ایده این است که استفاده کنید conic-gradient به عنوان ماسک برای ایجاد افکت های برش:

گرادیان های مخروطی

می توانیم استفاده کنیم conic-gradient برای ایجاد افکت‌های گرادیان ظریف که گوشه‌هایی تیره‌تر یا روشن‌تر با رنگ‌های دیگر دارند. Conic.css یک کتابخانه کوچک CSS توسط آدام آرگیل است که دارای شیب های مخروطی دوست داشتنی زیادی است.

استفاده از گرادیان های مخروطی برای پس زمینه بخش

من این را در نسخه ی نمایشی به اشتراک گذاشته شده توسط اسکات کلوم دیدم. روش کار این تکنیک برای افزودن رنگ جزئی به پاورقی و در عین حال صاف به نظر می رسد را بسیار دوست داشتم.

.footer {
    background: conic-gradient(from 0.25turn at 25% 0%, #FFD9CE, rgba(#FFD9CE, 0) 50%);
}

نتیجه

همانطور که دیدید، با استفاده از CSS radial-gradient و conic-gradient توابع می توانند باعث ایجاد رابط های کاربری بسیار جالب (و مفید) شوند. با این حال، در مورد زمان استفاده از هر کدام، هیچ سیاه و سفیدی وجود ندارد. بیشتر اوقات، این بستگی به مورد استفاده در دست دارد.

امیدوارم مقاله برای شما مفید واقع شود. با تشکر فراوان برای خواندن!

خواندن بیشتر در مجله Smashing

(vf، yk، او)