Войти на сайт
Регистрация
Обратная связьНаш магазинБлог администрации
Российская школа CSS - Справочник CSS, уроки CSS, jQuery
Оптимизатор CSS Конструктор CSS
Российская школа CSS » Уроки CSS вёрстки » Урок CSS вёрстки 5. Градиентный фон
Не нравится(-) 73 Нравится(+)
Урок CSS вёрстки 5. Градиентный фон

Здравствуйте, Уважаемые посетители Российской школы 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.


Уважаемый посетитель Российской школы CSS! Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Спасибо за внимание!



---------------------------------------
---------------------------------------

Похожие публикации

Публикацию посмотрели 33623 раз(а) и написали 11 комментариев.
Подписаться на канал RSS Добавить сайт в закладки

«    Август 2017    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
© 2008-2017 Copyright, Российская школа CSS. CSS-School.RU. Все права защищены.
Designed by GZ Design, OniX © 2010 - 2017
Valid XHTML 1.0 Transitional Правильный CSS!