Создаем границу у сайта

На сайте http://hicksdesign.co.uk/ впервые был применен эффект, который мы сегодня будем создавать. Суть эффекта такова: по краям окна браузера создается граница вокруг всего сайта, которая при прокрутке страницы не исчезает, а контент находиться внутри границы. В этой статье мы рассмотрим несколько разных техник создания такого эффекта.

Посмотреть демо

Техника первая: 4 блока div

Этот метод примечателен своей кроссбраузерностью. Нам понадобиться 4 элемента для создания этого эффекта. На сайте Hicksdesign эффект реализован именно с помощью этого метода. HTML разметка будет выглядеть следующим образом:

Далее мы стилизуем div‘ы с помощью CSS. Некоторые свойства подойдут для всех элементов, некоторые для каждого элемента свои. Вот такой 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; }

Такой код будет работать в IE7 и выше и во всех остальных браузерах. Для IE6 мы используем условные комментарии в head чтобы отключить отображение блоков div:

Нам так же стоит подумать о маленьких экранах, к примеру, мобильные устройства. Мы так же отключим этот эффект. Код будет выглядеть вот так:

@media

/* Маленькие экраны, в том числе iPhone */
only screen and (max-width: 500px),

/* iPad */
only screen and (min-device-width: 768px) and (max-device-width: 1024px)

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

Теперь мы увидим нужный нам эффект там, где мы хотим и не увидим там, где мы не хотим его видеть.

Техника два: псевдо-элементы

В примере, приведенном выше, нам потребовалось четыре уникальных элемента чтобы добиться нужного эффекта. Сейчас же мы повторим тот же самый эффект. Только вот нам не понадобиться создавать новые элементы вообще. У нас уже и так есть два элемента, которые охватывают все окно браузера. Это html и body. А если использовать псевдо-элементы :before и :after мы получим четыре необходимых нам элемента.
В CSS мы используем те же самые свойства, только вот зададим немного по-другому:

html:before, html:after, body:before, body:after {
    content: "";
    position: fixed;
    background: #a5ebff;

    html:before{
	height:10px;
	left:0;
	right:0;
	top:0;
    }
    html:after{
	width:10px;
	top:0;
	right:0;
	bottom:0;
    }
    body:before{
	height:10px;
	right:0;
	bottom:0;
	left:0;
    }
    body:after{
	width:10px;
	top:0;
	bottom:0;
	left:0;
    }
}

Так как поддержка псевдо-элементов не совсем полная (IE 8 и выше, Firefox 3.5 и выше) использовать или не использовать второй метод — решать вам. Так же существует баг в WebKit браузерах — они не правильно обрабатывают псевдо-элементы у тега html. Поэтому использование html:before и html:after стоит пока отложить.
Но есть решение! Нам не требуется 4 уникальных элемента. Нам вполне достаточно двух. Верхний и нижний элементы должны быть уникальными, дабы сделать из закрепленными (fixed). Для левого и правого краев мы можем просто применить свойство border к тегу body.

body:before, body:after {
    content: "";
    position: fixed;
    background: #900;
    left: 0;
    right: 0;
    height: 10px;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}
body {
    border-left: 10px solid #900;
    border-right: 10px solid #900;
}

Тот же самый эффект, неплохая поддержка браузерами, семантика лучше.

Посмотреть демо