Добавление тени к блоку
На многих страницах можно встретить элементы, отбрасывающие тень, – чаще всего это область размещения основного контента. Добавим такую тень к макету фиксированной ширины, подобному тому, с кото- рым мы работали в разделе «Создание колонки, занимающей все до- ступное пространство по высоте».
Решение
Для добавления тени к краям блока нам потребуется два изображения: одно послужит в качестве фона, другое создаст тень внизу. На рис. 9.41 показан создаваемый эффект.
Рис. 9.41. Блок, отбрасывающий тень
Для создания такого эффекта нужно добавить в разметку документа до- полнительный код, который послужит каркасом для размещения изо- бражений.
Первое изображение с именем shadow-bg.jpg, показанное на рис. 9.42, послужит в качестве фонового изображения для блока div c ID wrapper. Оно будет создавать тень по бокам по всей высоте страницы. Второе изо- бражение, shadow-bottom.jpg, будет использовано для создания тени в нижней части блока.
Рис. 9.42. Файлы для создания эффекта тени
Ширина блока wrapper увеличена на 20 пикселов, поскольку я хочу, что- бы размер области с контентом оставался прежним, но сам контент не соприкасался с ее краями. Кроме того, я добавила первое изображение в качестве фонового для данного элемента:
chapter09/2col-fixedwidth-shadow.css (фрагмент)
#wrapper {
position: relative; text-align: left; width: 780px;
margin-right: auto;
margin-left: auto;
background-image: url(shadow-bg.jpg);
background-repeat: repeat-y;
}
Затем создадим дополнительный блок div с именем wrapper2, содержащий элементы content, nav и footer и расположенный внутри блока wrapper.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title>Recipe for Success | Perfect Pizza</title>
<link href=”2col-fixedwidth-shadow.css” rel=”stylesheet”
type=”text/css” />
<meta http-equiv=”content-type”
content=”text/html; charset=utf-8” />
</head>
<body>
<div id=”wrapper”><div id=”wrapper2”>
<div id=”header”>
<h1>Perfect Pizza</h1>
</div>
<div id=”content”>
<h2>Choosing Your Toppings</h2>
<p>Sed nec erat sed sem molestie congue. Cras lacus …</p>
<p>Vestibulum dictum massa at odio. In dignissim …</p>
</div>
<div id=”nav”>
<ul>
<li><a href=”#”>Prepare the Dough</a></li>
<li class=”cur”><a href=”#”>Choose Your Toppings</a></li>
<li><a href=”#”>Pizza Ovens</a></li>
<li><a href=”#”>Side Salads</a></li>
</ul>
</div>
<div id=”footer”>© 2009 Recipe for success</div>
</div></div>
</body>
</html>
Для добавленного блока задано фоновое изображение, отображаемое в области панели навигации (вместо внешнего wrapper). Кроме того, ему задано свойство padding, чтобы немного отодвинуть контент от его края:
chapter09/2col-fixedwidth-shadow.css (фрагмент)
#wrapper2 {
background-image: url(sidebar.gif);
background-repeat:repeat-y;
margin: 0 10px 0 10px;
}
Наконец, нужно добавить изображение для создания тени снизу. Для этого создадим еще один блок div с идентификатором btm прямо перед закрывающим тегом </div> внешнего блока wrapper.
chapter09/2col-fixedwidth-shadow.html (фрагмент)
<div id=”footer”>© 2009 Recipe for success</div>
</div>
<div id=”btm”></div></div>
</body>
</html>
Теперь достаточно задать фоновое изображение для данного блока и за- дать блоку высоту, равную высоте изображения.
chapter09/2col-fixedwidth-shadow.css (фрагмент)
#btm {
background-image: url(shadow-bottom.jpg);
background-repeat: no-repeat;
display: block;
height: 13px;
}
Вот и все, тень готова!
Литература: Эндрю Р. CSS: 100 и 1 совет, 3-е издание. – Пер. с англ. – СПб: Символ-Плюс, 2010. – 336 с., ил.
Похожие посты:
- 50 СПОСОБОВ ЗАСТАВИТЬ GOOGLE ЛЮБИТЬ ВАШ САЙТ (0)
- Создание блока с закругленными краями (0)
- Макет фиксированной ширины с двумя колонками по центру страницы (0)
- Создание колонки, занимающей все доступное пространство по высоте (0)
- Создание галереи миниатюр (0)
- Вывод текста с отступом (0)
- Использование изображения вместо маркера списка (0)