Від автора: у цьому уроці ви дізнаєтеся, як використовувати градієнт 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. Він дуже тонкий, але ви тільки подивіться на лінійний градієнт від синього до фіолетового на рамках цих кнопок:
Домогтися такого ефекту можна різними способами. Перший вимагає спочатку задати елементу прозору рамку. Далі застосовується градієнт через властивість 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 градієнтів показав вам, з чого почати, а також, як використовувати градієнти в вебі. Якщо бачили інші креативні способи застосування в мережі, залишайте їх у коментарях.
