Як використовувати CSS градієнти в інтернеті

12

Від автора: у цьому уроці ви дізнаєтеся, як використовувати градієнт CSS в вебі. Я дам декілька прикладів уроків (наприклад, як створити градієнт рамки) і подкину парочку корисних посилань, які сильно спрощують створення градієнтів.

Дивіться урок на сайті статті.

Основи градієнтів

Раніше градієнти можна було використовувати без зображень, але CSS розвивається, і тепер за допомогою стилів дуже легко створювати надійні градієнти.

У найпростішій формі градієнти являють собою фонові зображення. Встановлюється фонове зображення (за допомогою скорочення background) значення linear-gradient або radial a-gradient. Всередину значення передається початковий і кінцевий колір:

.box {
background: linear-gradient(#000046, #1cb5e0);
}

За замовчуванням лінійний градієнт спрямований зверху вниз, і ми отримуємо приблизно ось це:

Ми можемо змінити напрямок, якщо додамо новий параметр перед квітами:

.box {
background: linear-gradient(to right, #000046, #1cb5e0);
}

Якщо змінити параметр to top right, вийде діагональний градієнт. Діагональ можна створити і по-іншому, якщо встановити 45deg (або будь-який інший кут).

Трохи ускладнимо, необов’язково використовувати 2 кольори. Можна використовувати назви кольорів:

.box {
background: linear-gradient(to right, orange, #ec38bc, #7303c0, cyan);
}

В цьому випадку всі 4 кольори займуть рівну площу, створюючи плавний і збалансований градієнт.

Якщо необхідно, щоб один колір займав більше місця, ніж інші, то після кольору можна вказати відсоткове значення:

.box {
background: linear-gradient(to right, #f05053 80%, #e1eec3);
}

І ми отримаємо:

Радіальні градієнти

Ми можемо скористатися отриманими знаннями і змінити градієнт на radial. Потрібно лише замінити linear-gradient на radial-gradient.

.box {
background: radial-gradient(#fdbb2d, #22c1c3);
}

Радіальний градієнт розтягується до батьківського блоку, тому цей прямокутник закінчується эллипсоидным градієнтом. Градієнт можна обмежити, щоб його форма не залежали від пропорцій батьків. Для цього необхідно додати ключове слово circle:

.box {
background: radial-gradient(circle, #fdbb2d, #22c1c3);
}

Можна вказати джерело радіального градієнта. Наприклад, щоб він починався у верхньому лівому куті батьків.

.box {
background: radial-gradient(circle at top left, #fdbb2d, #22c1c3);
}

Ефект непомітний, але, можливо, саме це вам і потрібно замість лінійного градієнта.

Реальне застосування

Де ж можна використовувати градієнти таким цікавим чином?

1. Перекриває банерний шар

Приклад перекриття, коли градієнт злегка прозорий (з допомогою rgba значень) і розташований поверх фото.

Властивість background може приймати кілька значень, що формують стек, де перше значення саме верхнє, а останнє розташоване в самому низу. Якщо спочатку задати градієнт, то він буде розташований поверх всього, що йде слідом. Подивіться на приклад нижче:

.hero {
background: linear-gradient(to right, rgba(75, 123, 211, 0.5), rgba(22, 215, 177, 0.3)), url(https://bg.jpg);
}

Результат:

2. Градієнт на тексті

Градієнт на тексті – крутий ефект, але він не повністю підтримується. Замість цього ми використовуємо властивість background-clip (і префиксную версію -webkit-background-cli), яке є хаком, але відмінно працює.

Спочатку беремо текст (h1) і застосовуємо градієнт до його background. Потім властивість background-clip зі значенням text видаляє фон з усього блоку крім області під текстом. Color тексту загороджує фон, тому робимо колір transparent, щоб було видно градієнт:

h1 {
background-image: linear-gradient(to right, #0cebeb, #20e3b2, #29ffc6);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}

3. Градієнтні рамки

Градієнтні рамки ви могли бачити на Envato Elements – відмінний спосіб візуально приправити ваш UI. Він дуже тонкий, але ви тільки подивіться на лінійний градієнт від синього до фіолетового на рамках цих кнопок:

Як використовувати CSS градієнти в інтернеті

Домогтися такого ефекту можна різними способами. Перший вимагає спочатку задати елементу прозору рамку. Далі застосовується градієнт через властивість border-image. В кінці border-image-slice задається в 1, щоб градієнт використав всю обведення рамки.

.card1 {
border: 5px solid transparent;
border-image: linear-gradient(to bottom, #22c1c3, #fdbb2d);
border-image-slice: 1;
}

Результат:

В підходу кілька проблем. По-перше, border-image не однаково підтримується у всіх браузерах. В основному це стосується старих версій IE. По-друге, цей підхід не дозволить додати border-radius, як на UI Envato Elements. Давайте розглянемо інший спосіб.

Спочатку div задається position: relative. Далі до блоку додається псевдоэлемент з негативним абсолютним позиціонуванням для ширини рамки (5px у нас):

.card2::after {
content: «;
position: absolute;
top: -5px;
bottom: -5px;
left: -5px;
right: -5px;
}

Так ми отримаємо суцільний градієнтний блок поверх нашого div. Додавши z-index -1, ми перемістимо його під div.

Далі (фух, цього разу багато кроків) ми додаємо border-radius до псевдоэлементу, рівний своєму батькові (нехай буде 10px). Далі задаємо фон батьків. Якщо задати колір фону сторінки, то він буде прозорим.

Нарешті, застосовуємо нашого друга background-clip до батьків, але в цей раз зі значенням padding-box. Так div буде залитий до краю рамки, але не далі.

Останній спосіб не зовсім рамка, але ефект схожий.

Є і третій спосіб, box-shadow. Раджу подивитися Border-gradient mixin від John Grishin на сайті CodePen.

Висновок

От і все! Цей приклад CSS градієнтів показав вам, з чого почати, а також, як використовувати градієнти в вебі. Якщо бачили інші креативні способи застосування в мережі, залишайте їх у коментарях.