Важно! Создание прибыльных веб сайтов и поисковое продвижение сайтов в Москве: веб-компания StudioForYou!
Стили CSS - создаем рамку вокруг видимой области веб-браузера
Опубликовано Март 4th, 2008 в CSS |
Автор: Крис Койер
Перевод: Всеволод Козлов
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
Похожие статьи по блогингу и веб-местерингу:
Fatal error: Call to undefined function: similar_posts() in /home/u82003/w3school.ru/www/blog/wp-content/themes/w3school-blog/single.php on line 35