Створення подвійних рамок у CSS: посібник для веб-дизайнерів
Рамки відіграють ключову роль у веб-дизайні, допомагаючи акцентувати увагу користувачів або розмежовувати розділи вебсторінки. Якщо ви прагнете одноманітності, можна застосувати загальні налаштування для всіх чотирьох сторін HTML-елемента. Проте, для створення індивідуального стилю кожної рамки, використовуються параметри кольору, стилю та товщини.
Зокрема, для налаштування кольору використовується властивість `border-color`, для визначення товщини – `border-width`, а `border-style` дозволяє обрати вигляд лінії: пунктирний, подвійний або суцільний. Для окремого налаштування конкретних рамок, наприклад, верхньої або лівої, існують такі властивості, як `border-block-start` та `border-top`.
Подвійна рамка – це візуальний ефект, де елемент оточений двома паралельними лініями, розділеними проміжком, який може залишатися прозорим або бути заповненим фоновим кольором чи зображенням. Такий стиль часто використовується для оформлення кнопок реєстрації або входу на сайтах.
Переваги використання подвійної рамки
- Поділ вмісту: Подвійні рамки покращують структуру сторінки, розмежовуючи блоки контенту, такі як верхній, основний та нижній колонтитули.
- Візуальна привабливість: Застосування контрастних кольорів для подвійних рамок робить елементи більш привабливими для ока.
- Визначення ієрархії: За допомогою рамок різної товщини та кольору можна підкреслити важливість певних елементів на сторінці.
- Персоналізація: Можливість змінювати колір та ширину кожної лінії подвійної рамки дозволяє створювати унікальний дизайн.
- Акцентування уваги: Подвійні рамки ефективно привертають увагу до ключових елементів, таких як посилання або кнопки.
Далі розглянемо різні способи створення подвійних рамок за допомогою CSS:
Застосування властивості border-style
Властивість `border-style` дозволяє визначити стиль всіх чотирьох сторін рамки. Для створення подвійної рамки використовується ключове слово `double`, яке автоматично створює відступ між двома лініями. Наприклад, встановимо товщину рамки 15 пікселів, колір – червоний, а стиль – подвійний.
Приклад HTML коду:
<div class="box"> <h2> Border Property</h2> </div>
Приклад CSS коду:
.box{
border-width: 15px;
border-color: red;
border-style: double;
}
Результат буде виглядати так:
Застосування функції linear-gradient()
Функція `linear-gradient()` створює градієнтний фон з плавним переходом між двома кольорами по прямій лінії. Ключове слово `to` вказує напрямок градієнта. За замовчуванням, градієнт починається знизу.
В прикладі нижче, товщина рамки 7 пікселів, а градієнт застосовується до кожної сторони прямокутника.
Приклад HTML коду:
<div class="box"> <h2>linear-gradient() function</h2> </div>
Приклад CSS коду:
.box{
border: 7px solid rgb(36, 85, 7);
background: linear-gradient(to top, #8f0404 7px, transparent 1px),
linear-gradient(to bottom, #8f0404 7px, transparent 1px),
linear-gradient(to left, #8f0404 7px, transparent 1px),
linear-gradient(to right, #8f0404 7px, transparent 1px);
}
Результат буде виглядати так:
Використання властивості Outline
Властивість `outline` створює лінію за межами елемента, що дозволяє досягти ефекту подвійної рамки, поєднуючи контур та звичайну рамку. Для створення проміжку між контуром та рамкою використовується `outline-offset`.
Приклад HTML коду:
<div class="box"> <h2>Outline Property</h2> </div>
Приклад CSS коду:
.box{
border: 5px solid red;
outline: 5px solid blue;
outline-offset: -20px;
}
Результат буде виглядати так:
Використання властивості box-shadow
Властивість `box-shadow` створює тінь навколо елемента. Для створення подвійної рамки, параметри зсуву та розмиття тіні встановлюються на нуль, а розміри тіней створюють ефект подвійної рамки.
Приклад HTML коду:
<div class="box"> <h2>Box Shadow Property</h2> </div>
Приклад CSS коду:
.box{
box-shadow:
0 0 0 5px red,
0 0 0 10px green;
}
Результат буде виглядати так:
Використання властивості background-clip
Властивість `background-clip` визначає, наскільки далеко фон має простягатися всередині елемента, охоплюючи область рамки, відступу чи контенту.
Приклад HTML коду:
<div class="box"> <h2>Background-Clip Property</h2> </div>
Приклад CSS коду:
.box{
border: 7px solid rgb(36, 85, 7);
padding: 5px;
background-clip: content-box;
background-color: rgb(238, 152, 130);
}
Результат буде виглядати так:
Використання псевдоелементів
Псевдоелементи `::before` та `::after` дозволяють стилізувати частини HTML-документа, не додаючи розмітку. Використовуючи їх, можна створити подвійну рамку, додавши додатковий шар навколо основного елемента.
Приклад HTML коду:
<div class="box"> <h2>pseudo property</h2> </div>
Приклад CSS коду:
.box{
background-color: rebeccapurple;
position: relative;
border: 8px solid red;
}
.box::before{
content: " ";
position: absolute;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 8px solid green;
border-width: 6px;
border-color: green white green white;
}
Результат буде виглядати так:
Реальні приклади CSS з подвійними рамками
Ефект подвійної рамки широко використовується в веб-дизайні. Ось кілька прикладів:
Кнопка «Кошик» на Amazon
Amazon використовує подвійну рамку для кнопки “Кошик”, щоб привернути увагу користувача та стимулювати до дії.
Подвійні рамки з’являються при наведенні курсора на кнопку “Кошик”, а також на елементи навігаційного меню.
Кнопки Mailchimp
Mailchimp використовує подвійні рамки для кнопок реєстрації та входу, створюючи відчуття терміновості.
Товщина рамки на нижній частині цих кнопок збільшується при наведенні курсора.
Рекомендації щодо застосування ефекту подвійної рамки
Використовуючи подвійні рамки, важливо дотримуватися таких рекомендацій:
- Стилістична єдність: Застосовуйте однаковий стиль подвійних рамок для всіх елементів на сайті.
- Адаптивність: Переконайтеся, що подвійні рамки відображаються правильно на різних пристроях та екранах.
- Помірність: Використовуйте подвійні рамки лише в тих місцях, де це виправдано дизайном.
Висновок
У статті розглянуто різноманітні методи створення подвійних рамок у CSS. Вибір конкретного методу залежить від бажаного ефекту та індивідуальних вподобань. Можна використовувати один або комбінацію різних стилів на одній сторінці.
Для глибшого розуміння CSS, рекомендуємо ознайомитися з додатковими ресурсами.