Филенки

Содержание

Филенка – это узенькая полоска, которая идет по верхнему краю обоев либо разделяет по-разному окрашенные участки стены. Для отделения одних участков текста от других в HTML используется горизонтальная линия, которая задается тегом <hr> Для горизонтальной линии можно задать толщину и цвет. К сожалению, этот простой элемент различным образом отображается браузерами. В IE линия внизу красная, в Опере – бесцветная.

Есть и другие причины, которые заставляют искать иные средства для работы с линиями или, как мы их будем называть, филенками. Благо это несложно. Воспользуемся для отображения филенки тегом параграфа. Здесь тоже не все гладко. Трудно, например, получить тонкую линию. В IE для получения тонкой линии мы должны задать высоту height:2px; (один пиксель не выходит) и высоту шрифта FONT-SIZE: 0px; (или один, все равно).

Если вы смотрите на эту линию через IE, то видите линию, как и было задумано, в два пикселя толщиной красного цвета. В Опере ухищрения с толщиной не проходят и мы видим широкую полосу.

Поэтому, если непременно нужна тоненькая полоска красного, или любого другого цвета, можно в параграф вставить в качестве фона картинку, состоящую из одного пикселя красного цвета. Размер такой картинки всего 40 байт и она не затормозит просмотр страницы. Результат, который вы видите внизу, получается одинаковым и в IE и в Опере.

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

Вставка фоновой картинки в параграф позволяет получить и более интересные примеры филенок, чем простая горизонтальная линия. В качестве фоновой картинки может быть использована любая маленькая картинка. Можно, конечно вставить и большую, но ее проще вставить просто как картинку. Если же мы маленькую картинку вставляем в качестве фона, то браузер ее сам повторит нужное количество раз. Для фоновой картинки хорошо найти какй-нибудь орнамент. Благо этого добра в Интернете можно найти достаточно. В результате мы получаем следующие впечатляющие примеры.

Можно к картинке добавить тень, которая почти всегда хорошо смотрится.

В качестве фона можно использовать даже анимированные картинки, если крайне необходимо к какому-то фрагменту текста привлечь особое внимание.

Мне такие эксперименты не по нраву, но внимание они точно привлекают.

Если в качестве фоновой картинки выбрана прозрачная картинка, то можно установить еще и цвет фона, который будет через такую картинку просвечивать. Конечно, можно сразу сделать картинку с нужным цветом фона, но если цвет фона можно подбирать, иногда это оказывается полезно.

Можно для разнообразия для параграфа задать и объемную рамку.

А вот несколько вариантов в архитектурном стиле.

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

Сайт управляется системой uCoz