—»     —»   Множественные границы посредством CSS
  Раздел: CSS/Style Sheets   Комментариев: 2  

Множественные границы посредством CSS



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

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

Сегодня мы подготовили для вас 5 различных методов реализации. И только один из них требует применение изображения, остальные же основаны на чистом коде CSS (к тому же, браузерная поддержка очень впечатляет). Дабы оптимизировать коды, мы исключили основные параметры их примеров (типа ширина, высота, фон и так далее). Вы можете ознакомиться с примерами на демо-странице:

Посмотреть демо

Способ 1: Граница + внешняя линия (border + outline)

Данный способ будет работать лишь в тех браузерах, где есть поддержка параметра outline, т.е. во всех, кроме IE6/7. В целом, вы добавляете границу, используя как параметр border, так и outline. Вот CSS-код, который не включает в себя основные параметры, о которых мы говорили выше:

.one {
    border: solid 6px #fff;
    outline: solid 6px #888;
}

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

Способ 2: Псевдо-класс

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

.two {
    border: solid 6px #fff;
    position: relative;
    z-index: 1;
}

.two:before {
    content: "";
    display: block;
    position: absolute;
    top: -12px;
    left: -12px;
    border: solid 6px #888;
    width: 312px;
    padding-bottom: 12px;
    min-height: 100%;
    z-index: 10;
}

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

Способ 3: box-shadow

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

.three {
    box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888;
}

Для того чтобы тень выглядела как вторая граница, мы будем использовать две тени (параметры разделены через запятую), параметры смещения и размытия которых равны нулю, что делает тень почти как границу. Ключевой момент здесь заключается в том, чтобы тень была совсем не размыта, тогда она будет похожа на полосу.

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

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

Способ 4: Дополнительный DIV

Этот способ подразумевает под собой создание дополнительного div’а для того, чтобы создавать видимость двойной границы. Это единственный из перечисленных здесь способ, который будет работать во всех браузерах (хотя даже он выглядит немного коряво в демо через браузеры IE6/7 из-за настроек полей, но это поправимо). Об этом способе много можно и не говорить, так как тут естественное применение границ и фона:

.four {
    border: solid 6px #888;
    background: #fff;
    width: 312px;
    min-height: 312px;
}

.four div {
    width: 300px;
    min-height: 300px;
    background: #222;
    margin: 6px auto;
    overflow: hidden;
}

Стили в этом способе могут отличаться в зависимости размера и наполнения блока, но, как вы можете видеть, внешний блок на 12 пикселей больше, чем внутренний – это и создает иллюзию двойной границы.

Способ 5: Фоновое изображение

Еще один способ, рассчитанный на современные браузеры, в котором используется часто упущенный параметр CSS3 – border-image:

.five {
    border-width: 12px;
    -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
    -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repeat;
    border-image: url(multiple-borders) 12 12 12 12 repeat; /* for Opera */
}

Чтобы подробнее узнать о данном параметре, ознакомьтесь со статьей на сайте SitePoint.

Знаете еще какие-либо способы? Нам в голову пока что ничего не приходит, поэтому, если у вас есть что показать, не медлите, ждем вас в комментариях!

Все данные методы отображены на демо-странице вместе с некоторым кодом javascript, который позволит вам добавить или убрать содержимое каждого блока, чтобы вы могли удостовериться, что блок не закреплен за конкретной строкой.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 7892   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 сентября 2011 @ 13:24
Написал: guest — группа: Читатели  
На сайте с: 7.02.2011   |   Публикаций: 0   |   Комментариев: 52
ICQ: --- не указано ---
В опере 11.51 бордак. :)


--------------------
А знаете ли Вы, что что 90% людей не замечают в этом тексте повторение слова «что» в самом начале.
Комментарий #2: 2 сентября 2011 @ 14:27
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3304   |   Комментариев: 500
ICQ: --- не указано ---
guest, да, 2 из 5 примеров глючат ...
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30