Я уже писал о том, как можно сделать по краям видимой части сайта бордеры. С того времени появились некоторые новшества и дополнения.

Итак, что было придумано:

• Используем градиент вместо обычной заливки.
• Теперь бордеры не висят постоянно, а появляются только при наведении на какой-либо(определённый нами) элемент.

Шаг 1: HTML

Вставляем пустые (следовательно не семантичныо) DIV‘ы, перед закрывающимся тэгом . Вот так:

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

Заметьте, что мы добавляем к ним класс (edge), а так же ID. ID нужны нам для CSS, а класс для JavaScrit’a.

Шаг 2: CSS

Изначально, мы скрываем наши div‘ы. Поэтому, применяем к ним display:none.

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

Впринципе, можно и к классу это применять. Меньше писать, и читабельнее.

div.edge{display:none;}

С основным разобрались. Теперь пройдемся по блокам. Тут мы поступаем хитро. Для каждой пары блоков мы выносим отдельно общие свойства, и затем уже применяем индивидуальные.

#left, #right {
		position: fixed;
		top: 0; bottom: 0;
		width: 88px;
		}
		#left { left: 0;  background: url(images/left.png) left center repeat-y;}
		#right { right: 0; background: url(images/right.png) right center repeat-y;}

#top, #bottom {
	position: fixed;
	left: 0; right: 0;
	height: 88px;
	}
	#top { top: 0px; background: url(images/top.png) top center repeat-x; }
	#bottom { bottom: 0px; background: url(images/bottom.png) bottom center repeat-x; }

Все, это все наши стили. Изображения, которые мы используем тут буду лежать в архиве с исходниками в конце статьи.

Шаг 3: JavaScript

Последняя стадия-делаем появление наших бордеров. Делаем это при помощи jQuery. Все очень просто. По наведению на элемент с классом home мы показываем наши бордеры. Убираем мышку с элемента-убираются и бордеры.

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".home").hover(function(){
			$(".edge").stop().fadeIn();
		}, function() {
			$(".edge").stop().fadeOut();
		});
	});
</script>

Примечание

Хотите кроссбраузерность? Нет, не выйдет. В ИЕ6 вы не сможете ничего поделать с position:fixed Все существующие хаки весьма кривые. Так что просто смиритесь с тем, что пользователи данного браузера не увидят этой красоты. Уберите JS от ИЕ6.

Скачать архив
Пример
Оригинал