Тени в CSS

CSS очень разнообразен и многие функции дают просто прекрасный эффект о котором можно было даже не мечтать в обычном html, так и в этом уроке мне хотелось бы вам рассказать о таком очень интересном эффекте как тени.

Тени в CSS могут быть применены как к блокам, так и к обычному тексту, их можно применить даже к изображениям. Тени могут быть внешними, могут быть внутренними все это достаточно несложно реализуется на практике. Давайте перейдем непосредственно к теме и посмотрим, как это реализуется на практике.

Данное свойство для блоков реализуется с помощью функции box-shadow и на практике выглядит следующим образом:

box-shadow: 10px 10px 10px 10px #ff0000;

Давайте разберем что собственно означают эти значения, первый параметр определяет горизонтальное смещение тени от блока и как видно оно задается в пикселях, второй параметр задает вертикальное значение, третий параметр отвечает за радиус размытия, то есть если его сделать нулевым, то тень будет абсолютно четкой и получится как бы отдельный блок на заднем плане, но об этом позже на конкретном примере, четвертый параметр отвечает за радиус распространения, и последний параметр самый простой, это собственно говоря цвет самой тени. Давайте теперь посмотрим, как это реализуется непосредственно в коде:

<!DOCTYPE html PUBLIC "-//W3C XHTML 1.0 //DTDTransitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; windows-1251" />
<title>Работаем с тенями</title>
<style type="text/css">
.first {
width:400px;
height: 200px;
background: #818181;
box-shadow: 10px 10px 0px 0px;
}
.second {
width:400px;
height: 200px;
background: #818181;
box-shadow: 10px 10px 10px 0px #ff0000;
}
</style>
</head>
<body>
<div class="first">
</div>
<br />
<br />
<br />
<div class="second"></div>
</body>
</html>

Вот что у нас поучилось:

тени в блоках

Как видно я сделал два блока с тенью, в первом блоке я использовал только два параметра это горизонтальное и вертикальное смещение, а вот во втором я уже изменил цвет тени и добавил параметр размытия. Здесь вообще можно много экспериментировать все зависит от вашего воображения или конечной цели, так же можно использовать отрицательные значения параметров для смещения тени и т.д.

Идем дальше давайте теперь разберемся с тенями в тексте, синтаксис здесь попроще и выглядит следующим образом:

text-shadow: 5px 5px 5px #000;

Как и в случае с блоками здесь у нас первые два параметра это горизонтальное и вертикальное смещение, третий это радиус размытия и четвертый цвет тени. Все так же как и в предыдущем случае, только здесь у вас не будет возможности изменять радиус распространения тени, этого параметра здесь просто не бывает.

Код для наглядности:

<!DOCTYPE html PUBLIC "-//W3C XHTML 1.0 //DTDTransitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; windows-1251" />
<title>Работаем с тенями</title>
<style type="text/css">
h1 {
font-size: 30px;
text-shadow: 10px 6px 5px #c1c1c1;
}
</style>
</head>
<body>
<h1>Пример реализации тени текста</h1>
</body>
</html>

Вот как это будет смотреться в браузере:

тени в тексте

Мне лично это сразу напоминает эффекты тени, которые я обычно делаю в фотошопе.

Теперь давайте углубляться дальше, мы будем делать внутренние тени и врезанные тени. Здесь ни чего сложного нет для создания внутренней тени нам необходимо всего лишь добавить параметр inner, а для врезанной inset, вот как выглядит синтаксис:

box-shadow: inset 5px 5px 30px 10px #fff;

Здесь тени работают так же только получается, что они распространяются внутри блока и здесь можно заметить, что параметр радиуса распространения тени очень немаловажен. Для наглядности опять-таки пример:

<!DOCTYPE html PUBLIC "-//W3C XHTML 1.0 //DTDTransitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; windows-1251" />
<title>Работаем с тенями</title>
<style type="text/css">
.first {
width:400px;
height: 200px;
background: #000;
box-shadow: inset 5px 5px 30px 10px #fff;
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>

И как это выглядит в браузере:

внутренние тени

Как вы могли заметить, я сделал черный блок и белые внутренние тени, для более наглядного восприятия.

Ну и последнее как наложить тень на изображение, здесь уже немножко посложнее, так как если мы применим данный параметр к тегу img у нас не чего ни получится, поэтому мы пойдем на хитрость и сделаем следующее:

<!DOCTYPE html PUBLIC "-//W3C XHTML 1.0 //DTDTransitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; windows-1251" />
<title>Работаем с тенями</title>
<style type="text/css">
.first {
width:500px;
height: 300px;
background: url(img.jpg);
box-shadow: inset 0px 0px 40px 20px #000;
}
</style>
</head>
<body>
<div class="first">
</div>
</body>
</html>

И вот соответственно результат:

внутренние тени на изображении

Смысл здесь в следующем мы просто делаем блок с фиксированным размером, задаем ему фоновое изображение и тогда у нас функция box-shadow работает без проблем, а мы просто избавились от тега img.

На этом все, работа с тенями достаточно интересное занятие, но как и в любом другом деле экспериментируйте и вы найдете, что ищите без проблем. Надеюсь данный урок будет вам полезен.

Дата публикации:2012-10-13

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Автор: Алексей Мезенцев