Автор: Крис Койер
Перевод: Всеволод Козлов

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

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

Сперва HTML-код:

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>

ВНИМАНИЕ! Для успешного функционирования необходимо сохранить 4 уникальных элемента веб-страницы, как показано в коде выше.

CSS-код выглядит так:

#top, #bottom, #left, #right {
background: #a5ebff;
position: fixed;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 15px;
}
#top { top: 0; }
#bottom { bottom: 0; }

Совместимость с браузерами

Данный css-трюк отлично работает в Firefox, Safari, Opera, IE7. Но не работает в IE6. Излечить это недоразумение можно путем добавления нижеследующих HTML и CSS кодов:

<!--[if lte IE 6]>
<link href="/ie6.css" type="text/css" rel="stylesheet" media="screen" />
<![endif]-->

HTML-код добавляется в код веб-страницы и указывает на место расположения css-стиля для IE6.

А теперь CSS-лекарство:

#top, #bottom, #left, #right { display: none; }

Все готово! Наслаждаемся рамкой!

Оригинал статьи: CSS Trick: Creating a Body-Border

























Смотрите также:

Понравилась статья? Поделитесь ей в социальных сетях: