Document

Двойная рамка с использованием CSS

Одним из занятных приложений свойства CSS3 box-shadow является создание двойной рамки вокруг элемента. Очень интересный эффект для оформления страниц, Но работать он будет только в новых версиях браузеров, которые поддерживают box-shadow .

Однако существует еще несколько методов для создания такого эффекта. Причем очевидное использование фонового изображения является весьма далеким от идеала.

В данном уроке представлены пять методов для создания двойной рамки вокруг элемента. Причем только один из них требует изображение, а все остальные используют чистый код CSS с отличной поддержкой в браузерах.

Метод 1: border и outline

Данный метод работает только в тех браузерах, которые поддерживают свойство outline (все, кроме IE6/7). Вы добавляете элементу оба свойства border и outline .

Причина по которой данный метод работает заключается в том, что рамка outline всегда выводится с внешней стороны прямоугольника. Проблема свойства outline проявляется при использовании плавающих элементов, так как рамка перекрывается с соседними элементами.

Метод 2: псевдо элемент

Данный метод требует абсолютного позиционирования рамки:

Ключевыми моментами являются установка свойства z-index (чтобы псевдо элемент перекрывал содержание), позиционирование и значение min-height . Последнее свойство сохраняет эластичность рамки.

Метод 3: тень

Самый лучший метод, так как требуется только одна строчка кода с установками свойства box-shadow .

Для появления двойной рамки используются две тени. Они определяются через запятую. Размытие устанавливается в 0. Так как вторая тень перекрывается первой, то она имеет вдвое большую ширину. Ключевой момент — использование непрозрачных цветов, что создает четкую границу между рамками.

Как и свойство outline , box-shadow не влияет на соседние элементы и может перекрывать их. Поэтому надо установить поле для формирования внешнего вида композиции.

Естественно, поддержка свойства box-shadow ограничена новыми браузерами.

Метод 4: Дополнительный элемент div

В данном методе используется внешний элемент для вывода двойной рамки. Единственный метод, который работает везде:

Внешний элемент имеет немного больший размер, что создает иллюзию двойной рамки.

Метод 5: свойство border-image

Еще одним новым методом является часто забываемое свойство CSS3 border-image :

Знаете другой метод?

Конечно, здесь собраны давно известные и широко используемые методы. Но может быть вам известен какой-нибудь трюк. Поделитесь с читателями в комментариях.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.impressivewebs.com/multiple-borders-css/
Перевел: Сергей Фастунов
Урок создан: 17 Ноября 2011
Просмотров: 86813
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

6 способов создать двойную рамку в CSS

Границы имеют решающее значение в веб-дизайне/разработке, поскольку они могут привлечь внимание пользователей или отделить контент на веб-странице. Вы можете использовать сокращение границы, если хотите, чтобы все четыре границы HTML-элемента были одинаковыми.

С другой стороны, вы также можете использовать свойства цвета границы, стиля границы и ширины границы, чтобы сделать каждую границу уникальной. Когда вы хотите указать цвет границы, мы используем цвет границы, используем ширину границы, чтобы определить ширину границы, и указываем, будет ли граница пунктирной, двойной или сплошной, используя свойство border-style.

Вы также можете настроить таргетинг на отдельные границы, используя такие свойства, как border-block-start и border-top.

Двойная рамка — это когда две параллельные линии окружают HTML-элемент. Две строки разделены промежутком, который можно оставить прозрачным или заполнить изображением или цветом фона.

Например, у нас может быть кнопка регистрации/входа, окруженная двойной рамкой.

Почему двойная граница?

• Разделение: вы можете использовать двойную рамку, чтобы повысить удобочитаемость и сканируемость веб-страницы, разделив различные элементы HTML. Например, у вас могут быть двойные границы для разделения таких элементов, как заголовки, тело и нижние колонтитулы на веб-странице.
• Визуальная привлекательность: вы можете использовать разные/контрастные цвета на двойных границах, чтобы сделать различные элементы более привлекательными.
• Показать иерархию: вы можете четко различать важные и менее важные элементы на веб-странице, используя двойные рамки.
• Простота настройки: вы можете создавать персонализированные и уникальные дизайны с помощью двойных рамок. Например, вы можете изменить цвет или толщину каждой линии.
• Акцент: используя свойство двойной границы, вы можете привлечь внимание к определенным ссылкам или кнопкам на веб-странице.

Вы можете использовать следующие способы создания двойной границы в CSS.

Использование свойства в стиле границы

Свойство border-style задает стиль четырех границ элемента. В этом случае мы используем ключевое слово double для установки стиля. Когда мы используем ключевое слово double, между двумя границами создается автоматический отступ.

В демонстрационных целях мы установим ширину границы 15 пикселей. Мы также выберем красный цвет границы и укажем двойной стиль границы.

         
 
Border Property
 
  

Использование функции линейного градиента()

Эта функция устанавливает линейный градиент в качестве фонового изображения. В результате получается постепенный переход между двумя цветами по прямой линии. Мы используем ключевое слово to, чтобы отметить начальную точку линии градиента. Если порядок не указан, значение по умолчанию — вниз.

Код ниже дает нашему блоку ширину границы 7px. Затем мы можем указать линейный градиент в свойстве фона каждой стороны блока.

         
linear-gradient() function
 
  

Использование свойства контура

Контур — это линия, нарисованная за границей элемента. Таким образом достигается эффект двойной границы, и мы можем использовать контур и одинарную рамку. Мы должны использовать смещение контура, чтобы добавить пробел между свойствами границы и контура.

         
Outline Property
 
  

Визуализированная страница будет выглядеть следующим образом:

Использование свойства box-shadow

Свойство box-shadow добавляет эффект тени вокруг рамки элемента. У вас может быть несколько эффектов box-shadow, разделенных запятыми. Начните с того, что убедитесь, что настройки смещения и размытия равны нулю, а затем установите правильные размеры теней.

         
Box Shadow Property
 
  

Визуализированная страница будет выглядеть следующим образом:

Использование свойства background-clip

Свойство background-clip определяет, насколько фон должен простираться внутри элемента. Расширение может быть в рамочном поле, поле заполнения или поле содержимого.

         
Background-Clip Property
 
  

Визуализированная страница будет выглядеть следующим образом:

Использование псевдоэлементов

Псевдоэлементы, представленные селекторами ::before и ::after, позволяют веб-дизайнерам стилизовать части HTML-документа без добавления разметки в код.

Мы можем проиллюстрировать, как использовать псевдоэлементы для создания двойной границы, используя этот код:

         
pseudo property
 
  

* < padding: 0; margin: 0; box-sizing: border-box; >body < display: flex; justify-content: flex-start; gap: 25px; padding: 15px; >div < width: 150px; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; >.box < background-color: brown; >box < background-color: rebeccapurple; position: relative; border: 8px solid red; >.box::before

Визуализированная страница будет выглядеть следующим образом:

Реальные примеры CSS с двойной рамкой

Свойство CSS с двойной рамкой используется на многих веб-сайтах. Вы должны комбинировать свойство двойной границы с другими свойствами CSS, чтобы извлечь из этого максимальную пользу. Ниже приведены два примера двойной границы в действии.

Кнопка «Корзина» на Amazon

Amazon — одно из крупнейших имен в сфере электронной коммерции. Кнопка корзины имеет CSS с двойной рамкой для визуальной эстетики и побуждает пользователей к действию.

Двойные границы появляются, когда пользователь наводит курсор на кнопку «Корзина». Границы также видны при наведении курсора на меню навигации Amazon.

Кнопки мейлчимпа

Mailchimp – это сервис электронного маркетинга, который позволяет пользователям создавать, запускать и отслеживать кампании. Его веб-сайт использует эффекты двойной границы в различных разделах. Кнопки регистрации и входа имеют двойную рамку, чтобы «создавать» ощущение срочности при просмотре страницы.

Граница в нижней части этих кнопок утолщается, когда пользователь проводит через них курсором.

Рекомендации по использованию CSS-эффекта с двойной рамкой

При использовании двойного CSS легко увлечься. Конечная цель — обеспечить пользователям легкую навигацию и выделить основные области вашего сайта. Следуйте этим рекомендациям:

• Используйте единый стиль: если вы используете двойные границы, убедитесь, что стиль одинаков для всех элементов. Например, двойные рамки можно использовать для кнопок навигации, призыва к действию и регистрации/входа. Если возможно, убедитесь, что у элементов с двойной рамкой одинаковые цвета и толщина полей.
• Убедитесь, что эти двойные границы работают на разных устройствах: мы живем в мире, где люди просматривают веб-сайты со смартфонов, компьютеров и планшетов. Проверьте, чтобы двойные границы отображались должным образом на экранах разного размера.
• Используйте их с осторожностью: у вас может возникнуть соблазн злоупотребить определенным эффектом CSS после того, как вы впервые обнаружите его. Однако двойной CSS подходит для различных элементов веб-страницы. Используйте это свойство только в тех областях, где оно повышает ценность дизайна.

Заключение

Мы выделили основные подходы, которые вы можете использовать для создания двойной границы в CSS. Выбор подхода будет зависеть от того, чего вы хотите добиться с помощью двойной рамки, и ваших предпочтений. Вы можете выбрать один или несколько стилей двойной рамки на одной странице.

Вы можете ознакомиться с этими ресурсами CSS, чтобы подробно разобраться в каскадных таблицах стилей.

Источник