Як додати градієнт кордону в CSS [+3 Tools]

Автор

Застосування Градієнтної Межі у CSS: Повний Посібник

У світі веб-дизайну CSS пропонує безліч інструментів для стилізації елементів, і властивість `border` є одним з ключових. Вона дозволяє точно налаштувати вигляд меж елементів, задаючи їх стиль, товщину та колір. Однак, можливості CSS на цьому не закінчуються.

Градієнти в CSS відкривають перед дизайнерами нові горизонти, дозволяючи створювати плавну зміну між кількома кольорами. Завдяки градієнтам можна досягти різноманітних візуальних ефектів, таких як тіні, м’яке змішування кольорів та текстури, що додає глибини і виразності елементам веб-сторінки.

Саме тут на сцену виходить градієнтна межа — CSS-властивість, яка дає можливість застосовувати градієнт до контуру елемента. Це дозволяє створювати ефект переходу кольорів, роблячи межу більш динамічною та привабливою.

Градієнтна межа трансформує звичайну лінію контуру в візуально захоплюючий елемент, де кольори плавно змінюються, створюючи ефект глибини та руху.

Чому Варто Використовувати Градієнтну Рамку?

З’явившись в CSS3, градієнтні рамки стали потужним інструментом стилізації. Ось декілька причин, чому вони варті уваги у вашому наступному веб-проекті:

  • Гнучкість та багатошаровість: Градієнтні рамки дозволяють створювати складні ефекти, на відміну від однотонних рамок. Це особливо корисно при роботі зі складними макетами, де потрібні нюанси у візуальному оформленні.
  • Привабливість для погляду: Застосування градієнтних меж додає візуальної привабливості дизайну. Яскраві контрасти кольорів допоможуть привернути увагу до певного елемента на веб-сторінці.
  • Плавна інтеграція: Градієнтні рамки створюють плавний перехід між межею і фоном елемента, надаючи дизайну цілісності та продуманого вигляду.

Як Застосувати Градієнтну Рамку в CSS?

Перш ніж перейти до створення градієнтних рамок, розглянемо, як створити просту рамку для HTML-елемента.

Ось приклад коду для створення базової рамки:

HTML:

<div class="box contains-border">
  Як додати рамку - наочний приклад!
</div>

CSS:

.box {
  width: 400px;
  height: 50px;
  max-width: 80%;
  font-size: 1.5rem;
}

.contains-border {
  border-color: rebeccapurple;
  border-style: solid;
  border-width: 5px;
}

Результатом буде проста рамка фіолетового кольору навколо елемента.

Хоча цей код демонструє створення рамки, вона не надто приваблива. Давайте зробимо її цікавішою за допомогою градієнта. Існує декілька методів створення градієнтної рамки, ось найпопулярніші:

Використання Градієнтів: Лінійний, Радіальний та Конічний

Розглянемо, як застосувати градієнтні рамки трьома різними способами:

Лінійний Градієнт

Лінійний градієнт створює плавний перехід кольорів по прямій лінії. Приклад коду:

HTML:

<div class="box linear-gradient">
    Приклад лінійного градієнта
</div>

CSS:

.box {
  width: 350px;
  height: 50px;
  max-width: 80%;
  font-size: 1.5rem;
}

.linear-gradient {
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(45deg, rgb(143, 55, 0), rgb(66, 228, 250)) 1;
}

У цьому коді ми задали суцільну рамку товщиною 10 пікселів. Лінійний градієнт переходить від rgb(143, 55, 0) до rgb(66, 228, 250) під кутом 45 градусів. Ширина зображення рамки встановлена на 1.

Результат:

Радіальний Градієнт

Радіальний градієнт створює круговий градієнт, що випромінюється з центру. Приклад коду:

HTML:

<div class="box radial-gradient">
  Приклад радіального градієнта
</div>

CSS:

.box {
  width: 350px;
  height: 50px;
  max-width: 80%;
  font-size: 1.5rem;
}

.radial-gradient {
  border-style: solid;
  border-width: 5px;
  border-image: radial-gradient(rgb(0,143,104), rgb(250,224,66)) 1;
}

Тут ми задали суцільну рамку шириною 5 пікселів. Радіальний градієнт переходить від rgb(0,143,104) до rgb(250,224,66). Значення ‘1’ вказує, що зображення рамки повинно повторюватися один раз навколо елемента.

Результат:

Конічний Градієнт

Конічний градієнт створює круговий перехід кольорів, який починається з центру і поширюється назовні. Приклад коду:

HTML:

<div class="box conic-gradient">
    Приклад конічного градієнта
</div>

CSS:

.box {
  width: 350px;
  height: 50px;
  max-width: 80%;
  font-size: 1.5rem;
}

.conic-gradient {
  border-style: solid;
  border-width: 7.5px;
  border-image: conic-gradient(red, rgb(0, 255, 47), rgb(255, 60, 0), rgb(13, 255, 0), blue, rgb(0, 255, 4), rgb(255, 0, 38)) 1;
}

У цьому випадку ми задали суцільну рамку товщиною 7.5 пікселів, а також встановили конічний градієнт з сімома кольорами. Значення “1” визначає ширину межі.

Результат:

Використання Зображень Рамки

Зображення рамки дозволяють створювати складні дизайни, замінюючи звичайну рамку зображенням. Приклад коду:

HTML:

<div class="box border-images">
    Приклад зображення рамки
</div>

CSS:

.box {
    width: 350px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.border-images {
    border-style: solid;
    border-width: 15px;
    border-image-source: url(/images/elephant-2910293_1920.jpg);
    border-image-slice: 60 30;
}

Ми встановили ширину рамки 15 пікселів, стиль рамки – суцільний. Властивість `border-image-slice` задає ширину та висоту рамки на 60% та 30% відповідно.

Результат:

Використання Скороченої Властивості

Скорочена властивість дозволяє задавати кілька CSS властивостей в одному рядку коду. Ось приклад застосування `border-image`:

HTML:

<div class="box shorthand">
    Приклад скороченої властивості
</div>

CSS:

.box {
    width: 350px;
    height: 50px;
    max-width: 80%;
    font-size: 1.5rem;
}

.shorthand {
    border-style: solid;
    border-width: 15px;
    border-image: url(/images/elephant-2910293_1920.jpg) 60 30;
}

Результат:

Генератори Градієнтних Рамок CSS

Генератори градієнтів допомагають створювати стилі градієнтних рамок без написання складного коду. Вони дозволяють експериментувати з різними параметрами. Ось декілька інструментів, які варто спробувати:

#1. Генератор градієнтів CSS від Converting Colors

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

Можливості інструмента:

  • Вибір до п’яти кольорів для градієнта.
  • Налаштування напрямку градієнта (лінійний або радіальний).
  • Визначення переходу кольорів за допомогою функції зупинок.

Згенерований код можна скопіювати та використовувати на своєму веб-сайті.

#2. Генератор градієнтної рамки CSS від Unused-CSS

Unused-CSS дозволяє створювати градієнтні рамки для блокових елементів без додаткових псевдоелементів.

Можливості інструмента:

  • Вибір типу градієнта (лінійний або радіальний).
  • Попередній перегляд градієнта в реальному часі.
  • Налаштування зупинок кольору.
  • Регулювання розміру та радіуса рамки.

Згенерований код можна скопіювати та використовувати у своєму проекті.

#3. Генератор градієнтних рамок – Аміт Шин

Цей інструмент має вісім різних фонових областей для створення градієнтних рамок, включаючи закруглені.

Можливості інструмента:

  • Створення градієнтної анімації.
  • Включення коду JavaScript.
  • Попередній перегляд змін в реальному часі.

Згенерований код можна скопіювати та вставити у свій проєкт.

Висновок

Градієнтна рамка – це потужний інструмент для веб-дизайнерів, що дозволяє створювати унікальні та привабливі елементи. Ви можете вибрати будь-який з описаних підходів залежно від своїх навичок та вимог проекту.

Не соромтеся експериментувати з різними підходами, щоб досягти найкращого візуального ефекту на вашому веб-сайті.

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