Здравствуйте, Уважаемые посетители Российской школы 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">
Наполним блок содержанием, закроем блоки и поставим "подвал":
Здравствуйте, Уважаемые посетители!<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 такие стили:
/* Задание стилей страницы */
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 пиксель и структуры идиентичной последнему пикселю верхнего фона.
Совместимость: Internet Explorer 5 - 7; Mozilla Firefox 1.xx - 3.xx Opera 7.хх - 9.xx.
ДемоПо материалам сайта:
Российская школа CSS, автор статьи Григорий Загребельный
