Как сделать градиентный фон на Вашей странице

на страницах сайта

www.electrosad.ru

Раньше я использовал для украшения страниц моего сайта подстилающий фон имеющий некоторый контраст по отношению к фону страницы. сейчас мне захотелось сделать страницы моего сайта более динамичными. Это позволяет сделать градиентный подстилающий фон. Но как его сделать?
К сожалению, из имеющихся рекомендаций одни не работали, другие работали только в отдельных браузерах, а другие были громоздки.
Ниже дано подробное описание. Думаю, при необходимости, Вы сможете это повторить и украсить свой сайт.

Равномерный фон можно легко задать с помощью атрибутов тега "body", как в нем самом, так и в таблице стилей.

На странице	В файле стилей ****.css
<body bgcolor="#CCFFCC"	BODY { background-color: #CCF0D2; ......................

При использовании для форматировании страниц - таблиц, последние будут находиться над фоном. А внутри них фот может быть другим, поскольку его можно определить в свойствах таблицы (тега table и сопутствующих ему tbody, td, th и др). Этот прием расширяет оформительские возможности при создании страниц.

Но еще красивее когда фон имеет градиент.

Тогда при прокрутке длинных страниц сформированных с помощью таблиц имеющих размер немного меньше экрана, обрамление вокруг них будет менять цвет при прокрутке. Создается эффект динамичности страницы.

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

Старое и простое решение

Но похоже мы забыли простое и заложенное во все современные браузеры решение.

Существует хорошо всем известный тег - <DIV>.

Он осуществляет логическое разделение документа, создавая фрагменты внутри него.

В соответствии со стандартом HTML 3.2 он предназначен для "задания части страницы или фрагмента текста". Все что лежит между открывающим и закрывающим элементами этого тега, воспринимается браузером как один объект. Тег <DIV> не форматирует текст, а только помечает его часть. Вместе с атрибутом "class" и "style" , он может задать параметры теста, только той части документа которая лежит внутри тега <DIV>.

Главная особенность тега <DIV> то, что он имеет гибкое позиционирование на странице и он работает со слоями. В Dynamic HTML это называют 2,5 мерное пространство.

Но теперь по существу.

Привожу фрагмент кода:

<body>
<div style="position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; visibility:visible">
<img src="images/backgr.jpg" width="100%" alt="">
</div>
<div style="position: absolute; width:100%; height: 200px; z-index: 3; left: 0; top: 0; right: 0; bottom: 0; background-color: #FF9900; visibility:visible">
<h1 align="center"><font color="#FF0000" size="7">Это заголовок! На слое 3.</font></h1>
<p align="center"><b>Это просто текст.</b></p>
</div>
<div style="position:absolute; top:0; left:0; right:0; width:100%; height:100%; z-index:2; visibility:visible">
<p>Это текст на слое 2</p>

Здесь расположены данные () Вашей страницы.

</div>
</body></html>

Разбор данного фрагмента:

После тега "body" следует первый тег "div" - открывающий, который описывает подстилающий слой и содержит в своем составе свойство рассматриваемого тега "style" с атрибутами:

- position:absolute; - абсолютное позиционирование в окне с координатами:

- top:0; left:0; width:100%; height:100%; - вверху и слева отступ =0, размер поля 100% по ширине и высоте (здесь возможны варианты),

- visibility:visible - дает команду сделать данный тег div видимым,

- z-index:-1 - определяет положение тега div в так называемом 2,5 мерном пространстве страницы, как самый нижний.

Следует обратить внимание на атрибут z-index который, в данном случае, определяет положения участка страницы описанное данным тегом на -1 слое (здесь может быть любое значение меньшее значений следующих слоев). Просто для меня подстилающий слой ассоциируется с отрицательным измерением, и это более наглядно.

Далее следует ссылка на фоновую картинку с градиентом, шириной 2 пикселя и высотой 500 (у меня в данном случае, хотя может быть и меньше) <img src="images/backgr.jpg" width="100%" alt=""> растянутый на высоту Вашей страницы.

Далее тег div закрывается, заканчивая конструкцию определяющую подстилающий градиентный слой.

Следующий тег "div" дан для примера организации шапки страницы с помощь этого тега. Он имеет размеры по ширине страницы, высотой 200 px и окрашен в указанный цвет.

style="position: absolute; width:100%; height: 200px; z-index: 3; left: 0; top: 0; right: 0; bottom: 0; background-color: #FF9900; visibility:visible"

На этом фрагменте имеется заголовок и текст. z-index для этого тега указан - 3, что размещает тег над основным полем страницы.

Как это выглядит:

Рисунок 1.

Последний тег "div" содержит информацию Вашей страницы.

В разных браузерах все описанное работает по разному, пробуйте.

P.S.

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

Литература:

Dynamic HTML, Справочник, Алекс Хоумер и Крис Улмен, Питер, 2000 г.

Часть 1 - Часть 2 - Часть 3 - Часть 4 - Часть 5 - Часть 6 - Часть 7

А.Сорокин, октябрь 2010 года.

<<назад>> <<в начало>> <<на главную>>

Попасть прямо в разделы сайта можно здесь:

При полном или частичном использовании материалов ссылка на "www.electrosad.ru" обязательна.
Ваши замечания, предложения, вопросы можно отправить автору почтой.

2002 - 2020