Урок CSS верстки.Градиентный фон.

SLITE

[attachment=1]1247860954_tutor.jpg[/attachment]
Здравствуйте, Уважаемые посетители Российской школы CSS! В этом, достаточно простом уроке вёрстки, я расскажу Вам как создать вертикальный градиентный фон, качество которого не звисит от высоты блока. Итак, начнём....

Для примера такой конструкции - возьмём форму последних сообщений форма из нового шаблона GZweb.RU. Эта форма может быть растянута на любую высоту при фиксированной ширине. Сложность состоит в том, что помимо градиента и обводки - в фоне присутствует внутреннее свечение, что заставляет нас прибегать к небольшой хитрости. Но, по порядку:
1) Скачиваем, или создаём 4 изображения - заголовок, подвал и 2 фона центра. После этого, по традиции, создаём файлы index.html и style.css.
В код html страницы записываем стандартный начальный код для HTML 4.01:

Код: Выделить всё

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=cp-1251">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Российская школа CSS. Урок CSS верстки 5</title>
</head>
<body>

Зададим начала блоков для заголовка, нижнего слоя фона (mfor) и верхнего слоя фона (menum3):

Код: Выделить всё

<div class="mtop2">Тестовый блок</div>
<div class="mfor"><div class="menum3">
Наполним блок содержанием, закроем блоки и поставим "подвал":
Здравствуйте, Уважаемые посетители Российской школы CSS!<br><br><br><br><br>
В этом, достаточно простом уроке вёрстки, я расскажу Вам как создать вертикальный градиентный фон,<br><br><br><br><br>
качество которого не звисит от высоты блока.<br><br><br><br>
Итак, начнём...<br><br>
</div></div>
<div class="mbot3"> </div>
</body>
</html>

С HTML - всё. Теперь запишем в CSS такие стили:

Код: Выделить всё

/*
=============================================================
© 2008 - 2009 Российская школа CSS (Russian CSS School)
http://www.css-school.ru
Урок CSS вёрстки №5. Градиентный фон
style.css - Набор стилей для урока
=============================================================
*/

/* Задание стилей страницы */
html, body {
    color:#fff;  
    font:11px Verdana;
    background:#195d83;
}

/* Задание стилей заголовка блока */
.mtop2 {
   width:562px;
   padding:10px 0 11px 30px;
   font-weight:bold;
   font-size:14px;
   background:#2080c4 url(1.png) no-repeat;
}

/* Задание стилей подложки */
.mfor {
background:#056eac url(2.png) repeat-y;
width:592px;
}

/* Задание стилей верхнего градиента */
.menum3 {
   background:url(3.png) no-repeat;
   padding:10px;
   width:572px;
}


/* Задание стилей окончания блока */
.mbot3 {
   width:592px;
   height:18px;
   background:url(4.png) no-repeat;
}

Стоит заметить, что метод подходит только для конструкций с известной шириной. Если ширина не установлена, столь сложные структуры делать не придётся, да и не получится.
Маленькая хитрость состоит в том, что мы используем для нижнего слоя фона кртинку высотой 1 пиксель и структуры идиентичной последнему пикселю верхнего фона.

Вот и всё. Надеюсь урок оказался полезным и понятным для Вас. Спасибо за внимание!

Автор урока: Григорий Загребельный, Российская школа CSS
Совместимость: Internet Explorer 5 - 7; Mozilla Firefox 1.xx - 3.xx Opera 7.хх - 9.xx.

verst5.zip 4.96 КБ • 100 скачиваний