Властивість border у CSS дозволяє веб-дизайнерам вказувати стиль, ширину та колір меж елемента.
У CSS градієнт дозволяє дизайнеру застосовувати плавний перехід між двома або більше кольорами. Ви можете використовувати градієнти для створення візуальних ефектів, таких як затінення, змішування кольорів і текстури на елементах вашої веб-сторінки.
Градієнт межі — це властивість CSS, яка дозволяє розробникам застосовувати градієнт до межі елемента.
Градієнтна межа створює візуальний ефект, коли колір межі змінюється з одного кольору на інший.
Навіщо використовувати градієнтну рамку?
Градієнти меж були серед різноманітних функцій стилю, які були представлені в CSS3. Ось деякі з причин, чому ви повинні мати його у своїй наступній веб-програмі:
- Градієнт меж є гнучким: ви можете створювати складні та багатошарові ефекти за допомогою градієнтних меж. Це на відміну від однотонних рамок, які є жорсткими. Таким чином, градієнтні межі корисні під час роботи зі складними макетами або формами, які потребують нюансів візуального дизайну.
- Створіть візуальну привабливість: використовуючи ефект градієнтної межі, ви можете додати до своїх дизайнів привабливі візуальні ефекти. Наприклад, ви можете використовувати яскраві кольорові контрасти, щоб привернути увагу до певного елемента на вашій веб-сторінці.
- Забезпечте плавну інтеграцію: градієнтні рамки дозволяють легко інтегрувати рамку у фон вашого елемента. Такий підхід надає вашій веб-сторінці цілісний і цілісний вигляд, демонструючи добре продуманий дизайн.
Як додати градієнт кордону в CSS
Перш ніж продемонструвати, як додати градієнт рамки, ми можемо проілюструвати, як додати рамку до елемента HTML.
Ми можемо використовувати цей код;
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> <title>Document</title> </head> <body> <div class="box contains-border"> How to add a Border illustrated!!! </div> </body> </html>
CSS
.box {
width: 400px;
height: 50px;
max-width: 80%;
font-size: 1.5rem;
}
.contains-border {
border-color: rebeccapurple;
border-style: solid;
border-width: 5px;
}
Відтворена сторінка виглядатиме так:
Незважаючи на те, що наведений вище код має рамку, він не настільки привабливий для очей, оскільки є порожнім. У нас лише 5 пікселів суцільна фіолетова рамка Rebecca навколо нашого div.
Ми можемо зробити наш кордон привабливим за допомогою градієнтів кордону. Існують різні підходи до додавання межового градієнта. Нижче наведено деякі з основних:
Використання градієнтних меж (лінійний градієнт, радіальний градієнт, конічний градієнт)
Ми проілюструємо, як використовувати градієнтні рамки трьома різними способами:
Лінійний градієнт
Лінійний градієнт створює плавний перехід між двома або більше кольорами по прямій лінії. Ми можемо використати наступний код для демонстрації:
HTML
<!DOCTYPE html> <html> <head> <title>Linear Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box linear-gradient"> Linear Gradient Illustration </div> </body> </html>
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
<!DOCTYPE html> <html> <head> <title>Radial Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box radial-gradient"> Radial Gradient Illustration </div> </body> </html>
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» у кінці коду представляє властивість border-image-repeat. Це значення вказує браузеру повторювати зображення межі лише один раз навколо межі елемента.
Відтворена сторінка виглядатиме так:
Конічний градієнт
Конічний градієнт створює круговий перехід кольорів. У цьому ефекті перехід починається з центральної точки, а потім поширюється назовні, утворюючи ефект кола.
HTML
<!DOCTYPE html> <html> <head> <title>Conic Gradient Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box conic-gradient"> Conic Gradient Illustration </div> </body> </html>
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 пікселів. Властивість border-image встановлює межовий градієнт. Є сім кольорів, починаючи з червоного і закінчуючи rgb(255, 0, 38).
Цифра «1» у кінці коду дає ширину межі 1 піксель.
Відтворена сторінка виглядатиме так:
Використання зображень рамки
Зображення рамок замінюють стандартні суцільні рамки елементів HTML. Зображення рамки використовуються для створення складних дизайнів замість комбінування кольорів для створення градієнта рамки.
HTML
<!DOCTYPE html> <html> <head> <title>Border Images Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box border-images"> Border Images Illustration </div> </body> </html>
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;
}
Ми надали нашій властивості border-width ширину 15 пікселів і встановили стиль border-style як суцільний.
Фрагмент border-image-slice встановлює ширину та висоту рамки на 60% та 30% відповідно.
Відтворена сторінка виглядатиме так:
Використання властивості скорочення
Скорочена властивість дозволяє розробникам стилізувати кілька окремих властивостей CSS за допомогою одного рядка коду. У цьому випадку ми використовуємо border-image, щоб вказати border-image-source і border-image-slice.
HTML
<!DOCTYPE html> <html> <head> <title>Shorthand Property Example</title> <link rel="stylesheet" type="text/css" href="https://wilku.top/how-to-add-border-gradient-in-css-3-tools/style.css"> </head> <body> <div class="box shorthand"> Shorthand Property Illustration </div> </body> </html>
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
Генератори градієнтів меж CSS допомагають розробникам додавати ефекти градієнта до елементів на веб-сторінці. Ці генератори дозволяють регулювати параметри, тобто вам не потрібно створювати все з нуля. Нижче наведено деякі інструменти, якими ви можете скористатися:
#1. Генератор градієнтів CSS для перетворення кольорів
Перетворення кольорів дозволяє генерувати CSS-код лінійного або радіального градієнта до п’яти кольорів. Згенерований вами код градієнта CSS можна використовувати як рамку або фонове зображення елемента.
За допомогою цього генератора ви можете робити наступне;
- Виберіть до п’яти кольорів і використовуйте їх у градієнті рамки.
- Виберіть напрямок градієнта. Інструмент має як лінійні, так і радіальні градієнти.
- Ви можете вирішити, як відбувається перехід кольорів, використовуючи функцію зупинки кольору.
Коли ви закінчите експериментувати та створити код, ви можете скопіювати та використовувати його на своєму веб-сайті.
#2. Генератор градієнта кордону CSS – невикористаний CSS
Unused-CSS допомагає розробникам генерувати градієнтні межі, які вони можуть застосовувати до блокових елементів, не створюючи псевдоелементів або додаткових елементів.
Ви можете зробити наступне;
- Виберіть між різними типами градієнта. Ви можете легко перемикатися між радіальним і лінійним градієнтами під час роботи з цим інструментом.
- Вкладка попереднього перегляду. Інструмент дозволяє попередньо переглянути, як градієнт межі буде виглядати на вашій веб-сторінці під час її налаштування.
- Кольорові зупинки. Цей інструмент дозволяє легко вирішити, як відбуватимуться переходи для різних кольорів.
- Налаштування розміру рамки. За допомогою цього інструменту ви можете легко налаштувати розмір і радіус межі.
Коли ви будете задоволені згенерованим кодом, ви можете скопіювати його та використовувати у своєму проекті.
#3. Генератор градієнтних меж – Аміт Шин
Цей інструмент має вісім різних фонових областей, що дозволяє розробникам створювати округлі градієнтні межі.
Ви можете досягти наступного;
- Створення градієнтної анімації. Інструмент дозволяє створювати градієнтні анімації, які переходять між двома або більше кольорами.
- Ви можете включити код JavaScript. Якщо ваш настроюваний елемент потребує коду JS, ви завжди можете знайти та налаштувати його на панелі керування.
- Попередній перегляд. Ви можете переглядати зміни у своєму коді під час його налаштування.
Ви можете скопіювати та вставити код після налаштування ефектів градієнта кордону на свій смак.
Висновок
Під час розробки веб-сторінок ви можете використовувати будь-який із наведених вище підходів, щоб додати градієнтну рамку до своїх елементів. Вибір підходу може відрізнятися залежно від уподобань, рівня навичок і характеру елемента, який ви створюєте.
Ви також можете використовувати різні підходи для різних елементів на одній веб-сторінці.
Перевірте, як створити подвійну рамку в CSS, щоб покращити візуальну привабливість вашої веб-сторінки.