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



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

• Используем градиент вместо обычной заливки.


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

[400x298]

Шаг 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.

Скачать архив

Пример

Оригинал