Автор: Крис Койер
Перевод: Всеволод Козлов
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
Смотрите также:
- Вкладки css
- Сайт портфолио
- Footer
- Сборник иконок для рабочего стола
- Красивые таблицы css
- День рождения
- Семантическая разметка
- Css button
- Css конструктор
- Blockquote css
7 комментария(-ев)
Ага, действительно интересный эффект.
будем осваивать.
Спасибо!
Ааа .. где вы раньше были ? Огромное Спасибо!
В ие 7 не работает
Что то я не врубаюсь по непосредственной работе этого эффекта, на сайте оригинале посмотрел тож не понятно. Мож кроме перевода как нибудь от себя руководство афтар бы написал
«А теперь CSS-лекарство:»
что это за лекарство. Просто рамку скрыть. Не … это не лекарство. Это ампутация. Так не честно. Неужели для IE6 ничего придумать нельзя ? А что если вкладывать дивы друг в друга ?
#left
{
background: url(…) repeat-y;
}
#right
{
background: url(…) repeat-y 100% 0%;
}
#top
{
background: url(…) repeat-x;
}
#bottom
{
height: 100%;
background: url(…) repeat-y 0% 100%;
}
#main
{
}
тут контент… надо еще подумать. Что то не пляшет. А почему ?
Вот цсс для ие6:
body {
margin:0;
background: #f00;
height:100%;
}
#top, #bottom, #left, #right {
background: #a5ebff;
position: absolute;
}
#left, #right {
top: 0; bottom: 0;
width: 15px;
height:100%;
}
#left { left: 0; }
#right { right: 0; }
#top, #bottom {
left: 0; right: 0;
height: 15px;
width:100%;
}
#top { top: 0; }
#bottom { bottom: 0; }
yuleon>
Посмотрите оригинал статьи — там в конце пример рамки