CSS тень у блоков
На этой странице описаны способы, позволяющие создать CSS тень у блоков или других элементов HTML-страницы. Вообще обычно тени задают именно блокам, причем это не обязательно блочные элементы по типу, это могут быть и встроенные (уровня строки), но расширенные с помощью внутренних отступов. В CSS 3 уже появились свойства для создания теней без изображений, но так как старые браузеры их не понимают, то здесь будут рассмотрены и варианты использующие картинки.
Тень с помощью CSS 3, без изображений
В этом примере используются возможности CSS 3, которые с легкостью позволяют создавать тени у элементов без изображений.
Пример HTML и CSS: создание теней с помощью CSS 3
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Тень на CSS 3 без использования изображений</title>
<style type="text/css">
.block {
width: 300px; /* ширина блока */
height: 400px; /* высота блока */
background: #9fc; /* фон */
-moz-box-shadow: 3px 3px 15px #030; /* тень для Firefox */
-webkit-box-shadow: 3px 3px 15px #030; /* для Chrome и Safari */
box-shadow: 3px 3px 15px #030; /* для всех */
margin: 20px; /* внешние поля */
padding: 15px; /* внутренние отступы */
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.block {
zoom: 1;
filter:
progid:DXImageTransform.Microsoft.Shadow(color='#779277', Direction=45, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#688668', Direction=135, Strength=10)
progid:DXImageTransform.Microsoft.Shadow(color='#779277', Direction=225, Strength=3)
progid:DXImageTransform.Microsoft.Shadow(color='#779277', Direction=315, Strength=3);
}
</style>
<![endif]-->
</head>
<body>
<div class="block">Контент.</div>
</body>
</html>
Описание примера
Минус данного примера в том, что тень блока в старых IE будет выглядеть не совсем так, как в других браузерах. Кроме этого фильтры могут «тормозить» работу браузеров IE.
Тень с помощью CSS 3, без изображений (вариант 2)
В этом примере мы сделаем более реалистичную тень для старых браузеров IE. Для этого добавим в основной блок еще два — блок с основным содержимым и блок специально для создания тени в IE, который закроем в условные комментарии. Затем с помощью абсолютного позиционирования мы положим его под блок с контентом и добавим специальный фильтр. Этот фильтр не просто добавит тень, он превратит в нее весь блок, но так как он будет лежать внизу, выглядывая только по краям, то и получится нужный нам эффект.
Пример HTML и CSS: создание теней с помощью CSS 3 (вариант 2)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Тень на CSS 3 без использования изображений (вариант второй)</title>
<style type="text/css">
.block {
margin: 20px;
}
.cont_block {
width: 300px;
height: 400px;
background: #fc6;
-moz-box-shadow: 3px 3px 15px #000;
-webkit-box-shadow: 3px 3px 15px #000;
box-shadow: 3px 3px 15px #000;
padding: 15px;
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.block {
position: relative; /* относительное позиционирование */
float: left; /* всплытие влево */
-height: 1px; /* высота для IE6 */
-margin-left: 10px; /* уменьшенное левое поле для IE6 */
zoom: 1; /* для IE6 */
}
.cont_block {
zoom: 1; /* для IE6 */
}
.shadow_block {
width: 100%; /* ширина блока-тени */
height: 100%; /* его высота */
background: #fff; /* фон, нужен, чтобы тень была видна */
position: absolute; /* абсолютное позиционирование */
left: -5px; /* смещение влево */
top: -5px; /* смещение вверх */
z-index: -1; /* отрицательный z-index */
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.6');
padding:0 5px 5px 0; /* отступы для увеличения тени */
}
</style>
<![endif]-->
</head>
<body>
<div class="block">
<div class="cont_block">Контент.</div>
<!--[if lte IE 8]><div class="shadow_block"></div><![endif]-->
</div>
</body>
</html>
Описание примера
Тень с помощью CSS 3, без изображений (вариант 3)
По своей сути этот пример похож на предыдущий, однако здесь немного поменяется структура CSS, что положительно отразится на удобстве применения способа. Правда из-за этого придется пожертвовать поддержкой IE6.
Пример HTML и CSS: создание теней с помощью CSS 3 (вариант 3)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Тень на CSS 3 без использования изображений (вариант третий)</title>
<style type="text/css">
.block {
width: 300px;
margin: 20px;
}
.cont_block {
height: 400px;
background: #f39;
-moz-box-shadow: 5px 6px 12px #000;
-webkit-box-shadow: 5px 6px 12px #000;
box-shadow: 5px 6px 12px #000;
padding: 15px;
}
</style>
<!--[if (IE 7)|(IE 8)]>
<style type="text/css">
.block {
position: relative;
}
.shadow_block {
width: 100%;
height: 100%;
background: #fff;
position: absolute;
left: 0;
top: 0;
z-index: -1;
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.9');
padding: 0;
}
</style>
<![endif]-->
</head>
<body>
<div class="block">
<div class="cont_block">Контент.</div>
<!--[if (IE 7)|(IE 8)]><div class="shadow_block"></div><![endif]-->
</div>
</body>
</html>
Описание примера
В IE6 этот пример работает некорректно, поэтому все свойства и хаки предназначенные для него были убраны. Кроме этого были изменены условные комментарии — теперь их понимают только IE7 и IE8.
CSS тень с помощью изображений
В этом примере мы будем создавать тень с помощью изображений. Для этого сначала нам придется нарисовать нужную тень в графическом редакторе, а потом вырезать ее по кусочкам. Затем мы обернем контент в несколько блоков, где каждому в качестве фона зададим один из вырезанных кусочков тени. В итоге у нас получится «резиновый» блок с тенью, который будет одинаково выглядеть во всех браузерах.
Делаем заготовки для тени.
![Создание тени с помощью CSS и изображений CSS тень с помощью изображений](images/css-ten-s-pomoshchyu-izobrazheniy.png)
Обратите внимание, что кусочек правого нижнего угла (rb) при вырезании захватит часть самого блока. Поэтому после вырезания мы удаляем внутреннюю часть и делаем ее прозрачной (это позволяет формат PNG).
Пример HTML и CSS: тени с использованием изображений
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - Тень на CSS с применением изображений</title>
<style type="text/css">
.cb {
width:600px; /* ширина блока с тенью */
background: #3c3 url('images/shadow_cb.png') 0 100% repeat-x; /* нижняя горизонтальная полоска тени */
margin: 10px auto; /* внешние поля и центровка по горизонтали */
zoom:1; /* для IE6 и IE7 */
}
.rc {
background: url('images/shadow_rc.png') 100% 0 repeat-y; /* правая вертикальная полоска тени */
}
.lb {
background: url('images/shadow_lb.png') 0 100% no-repeat; /* левый нижний кусочек тени */
}
.rb {
background: url('images/shadow_rb.png') 100% 100% no-repeat; /* правый нижний угол тени */
}
.rt {
height: 200px; /* высота блока */
background: url('images/shadow_rt.png') 100% 0 no-repeat; /* правый верхний кусочек тени */
padding: 15px 23px 25px 15px; /* внутренние отступы */
}
</style>
</head>
<body>
<div class="cb">
<div class="rc">
<div class="rb">
<div class="lb">
<div class="rt">
Контент.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Описание примера
Таким образом можно создать тень не только с двух сторон, но и, например, с четырех, правда понадобится больше оберточных блоков, что и является основным минусом данного способа.