bodyborder

Создание Body-Border на CSS

Давайте попробуем украсить ваш сайт с помощью техники body-border. Что делает эта техника? Ответ прост — эта CSS техника добавляет по краям вашего сайта цветовые полоски (бордюры). Все это выглядит симпатично и помогает пользователю лучше ориентироваться на сайте. И так, давайте разберемся, как это работает...

Пример

Код

Нужны четыре уникальных элемента. Очень хорошо подойдут DIV:

На очереди CSS. Вот вам памятка о том, какой должен быть CSS код. Некоторые свойства элементов являются одинаковыми, некоторые совпадают только для top/bottom и left/right, а некоторые являются уникальными. Не будем повторять свойства и значения свойств для элементов.

Совместимость с браузерами

Великолепно работает c
firefox safari opera IE 7+

Работает ли эта техника с IE6 (или ниже)? Конечно, нет!
В основном, из-за позиционирования. IE6 не любит fixed позиционирование, и для наших нужд нет нормальных хаков. Решение в том, чтобы избавится от этих границ для IE:
Прописываем в header HTML:

CSS для удаления body border:


Оставить комментарий