Как использовать несколько рамок одновременно

Оцените материал
(0 голосов)

Проблема

В стародавние времена, когда спецификация Backgrounds & Borders Level 3 была еще на стадии черновика, в рабочей группе CSS велось активное обсуждение вопроса, нужно ли разрешать использование сразу нескольких рамок — нескольких фоновых изображений. К сожалению, тогда все сошлись на том, что вариантов использования нескольких рамок слишком мало и разработчики всегда могут прибегнуть к помощи  border-image для достижения того же эффекта. Однако рабочая группа упустила из виду важность наличия возможности гибко настраивать рамки в CSS-коде, из-за чего разработчикам для имитации нескольких рамок пришлось прибегать к корявым трюкам вроде наложения друг на друга множества элементов. И все же существуют более удачные способы решения этой задачи, не приводящие к загрязнению кода бесполезными лишними элементами.

Решение с использованием box-shadow

К настоящему моменту большинство из нас уже имеет (слишком большой) опыт использования  box-shadow для создания теней. Однако мало кто знает, что это свойство принимает четвертый параметр (называемый радиусом размазывания, spread radius), который делает тень больше (положительные значения) или меньше (отрицательные значения) на указанную величину. Положительный радиус размазывания в сочетании с нулевым смещением и нулевым размыванием создает «тень»,больше похожую на сплошную рамку:

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

Не слишком впечатляет, ведь точно такую же рамку можно создать с использованием свойства  border . Но хорошая новость в том, что благодаря свойству  box-shadow мы можем создать сколько угодно рамок, просто разделив наборы значений запятой. То есть добавить к предыдущему примеру вторую рамку ярко-розового цвета  deeppink совсем несложно:

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;


Единственное, о чем необходимо помнить, — что рамки, создаваемые свойством  box-shadow , накладываются друг на друга, причем наверху оказывается та, которая в строке значений указана первой. Например, в предыдущем коде нам нужна была внешняя рамка шириной  5px , поэтому мы указали радиус размазывания  15px ( 10px +  5px ). При необходимости после «контуров» можно добавить еще один набор значений для обычной тени:

background: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink, 0 2px 5px 15px rgba(0,0,0,.6);

Решение с тенью хорошо работает в большинстве случаев, но существует несколько тонкостей, о которых не стоит забывать:
‰ тени работают не совсем так, как рамки: они не влияют на макет и на них не распространяется действие свойства  box-sizing . Однако имитировать дополнительное пространство, которое заняла бы рамка, можно с помощью забивки или полей (в зависимости от того, определена тень как  inset или нет);‰ продемонстрированный выше метод позволяет создавать фальшивые «рамки» снаружи элементов. Подобные рамки не умеют перехватывать события мыши, такие как наведение или щелчок. Если это важно для вас, то можно добавлять ключевое слово  inset , чтобы тени рисовались внутри элемента. Помните только, что вам придется добавить больше забивки, чтобы обеспечить необходимое пространство.
ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/multiple-borders

 

Решение с исgользованием outline

В некоторых случаях, если нам требуются только две рамки, можно определить обычную рамку, а эффект внешнего контура создать с помощью свойства outline. Это обеспечивает гибкость в выборе стиля рамки (а вдруг мы захотим, чтобы вторая рамка была пунктирной?), тогда как метод с  box-shadow позволяет создавать только сплошные рамки. Вот как в данном случае будет выглядеть код для создания эффекта

background: yellowgreen;
border: 10px solid #655;
outline: 15px solid deeppink;


Что еще хорошо в контурах, так это то, что расстояние от границ элемента можно менять путем определения свойства  outline-offset, которое способно принимать даже отрицательные значения. Это может быть полезно для создания целого ряда интересных эффектов.  Однако у данного метода есть несколько ограничений:
‰ как уже упоминалось выше, он подходит для определения только двух «рамок», так как свойство  outline не принимает список значений, разделенных запятой. Если вам требуется больше, то единственный вариант — прибегнуть к технике, описанной в предыдущем разделе;


‰ Контуры не обязаны подчиняться свойству  border-radius, поэтому даже если углы рамки скруглены, контур может оказаться прямоугольным. Обратите внимание, что рабочая группа CSS считает такое поведение ошибкой, и вбудущем, скорее всего, поведение контуров будет изменено, для того чтобы действие  border-radius распространялось и на них тоже;
согласно спецификации CSS User Interface Level 3, «контуры могут быть не прямоугольными». Хотя в большинстве случаев они получаются прямоугольными, если вы собираетесь пользоваться этим методом, мысленно отметьте, что результат следует тщательно
протестировать в разных браузерах.

 Десерт на сегодня - видео о веселом поединке боксера с кенгуру

Прочитано 584 раз Последнее изменение Воскресенье, 22 января 2017 12:56
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+