Тени в CSS

Тени в CSS
В прошлой статье я упоминал, о том, что эффекта letterpress можно добиться с помощью CSS. Так вот, я подумал, и решил, что следует остановиться на этом моменте и рассказать о нём побольше. Свойство text-shadow появилось ещё в далёком 1998 году в спецификациях к CSS2, однако совсем недавно данное свойство получило полноценную поддрежку. Как известно, в каждом правиле есть исключения, так вот IE является исключением (даже IE9, который вышел в 2011 году, до сих пор не воспринимает text-shadow). Так вот, в связи с тем, что большинство браузеров на те времена игнорировали text-shadow, данное свойство было исключено из CSS2.1 и вернулось к нам, только в CSS3.

text-shadow: #000 1px 0px 3px;

где #000 — цвет тени, 1px — смещение тени по оси X, 0px — смещение тени по оси Y, 3px — радиус размытия тени.

Ниже приведу код с описанием теней трёх видов:

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тени в CSS</title>
  <style type="text/css">
   body {
	background-color:#666; /* Цвет фона*/
	font-family:Tahoma; /* Шрифт*/
	font-size: 2.5em; /* Размер текста */
   }
   .shadow1 {
    text-shadow: #000 1px 1px 3px; /* Параметры тени */
    color: #ccc; /* Цвет текста */
   }
   .shadow2 {
    text-shadow: #999 0 1px 0, #000 0 -1px 0; /* Параметры тени */
    color: #333; /* Цвет текста */
   }
   .shadow3 {
    text-shadow: #222 0 0 7px; /* Параметры тени */
    color: #666; /* Цвет текста */
    }
  </style>
 </head>
 <body>
  <p class="shadow1">Вид тени №1</p>
  <p class="shadow2">Вид тени №2</p>
  <p class="shadow3">Вид тени №3</p>
 </body>
</html>

Демо

Если внимательно присмотреться к тени №2 то можно заметить, что в ней присутствует 2 тени.

Оказывается что теней может быть несколько. Например, Opera поддерживает максимум 6–9  теней. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на работе браузера. Opera версии 9.5+ использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются.  Множество теней поддреживается начиная с версии 4.0

Однако до сих пор IE используют 12-15% пользователей. О них тоже нужно помнить, поэтому, чтобы придать тень тексту для IE используют фильтр:

filter: glow(color=#0000ff,strength=3);

Однако хочу сразу предупредить, что смотрится это ужасно.

Второй вид тени в CSS — это box-shadow. Это свойство доступно в CSS3. Сегодня оно поддерживается  браузерами IE9, Opera 10.5+, Firefox 4.0, исключения Safari и Chrome.

box-shadow: inset 1px 0 5px #000;

inset — Необязательный параметр. Позволяет выводить тень внутри элемента.
1px — Обязательный параметр. Сдвиг по оси X. Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево.
0 — Обязательный параметр. Сдвиг по оси Y. Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх.
5px — Необязательный параметр. Размытие. Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
#000 — Необязательный параметр. Цвет. Цвет тени в любом доступном CSS формате, по умолчанию тень черная.

Также можно указать несколько теней, разделяя их запятой. И стоит помнить то, что свойство box-shadow увеличивает размеры элемента к которому оно применяется.

Для того, чтобы установить тень в Firefox до версии 4.0, нужно использовать свойство -moz-box-shadow, В Safari и Chrome — -webkit-box-shadow.
Для Internet Explorer до версии 9.0 можно использовать фильтр:

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

где offX — смещение тени по горизонтали; offY — смещение тени по вертикали; color — цвет тени.

Применение фильтра dropshadow дает четкую резкую тень, поэтому для эффекта размытия можно использовать фильтр shadow.

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

где direction — угол направления тени от 0 до 360°; color — цвет тени; strength — смещение тени в пикселах.

Вот как выглядит div, после наложения box-shadow:

<!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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Тень box-shadow</title>
 <style type="text/css">

body {
 background-color:#666; /* Цвет фона*/
 font-family:Tahoma; /* Шрифт*/
 font-size: 2.5em; /* Размер текста */
 }
 .shadow {
 box-shadow: 0 0 5px black; /* Параметры тени */
 box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
 padding: 10px;
 }
 </style>
 </head>
 <body>
 <div class="shadow">Тень есть и будет!</div>
 </body>
</html>

Демо
Применить эффект тени можно даже к ссылке матрасы Intex.

Stas Kuryan

Web developer. Перфекционист в написании кода.

2 комментария

  1. art13     

    А как можно менять цвет тени по кнопке? Объектной модели у text-shadow нет. И у box-shadow тоже.

    • Stafox        Автор

      К примеру вот так:
      [html]
      &lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;s&lt;/title&gt;
      &lt;/head&gt;
      &lt;style&gt;
      input[type=&quot;button&quot;] {
      box-shadow: 1px 1px 5px #000;
      border-radius:3px;
      background:#ccc;
      border:1px solid #eee;
      }
      &lt;/style&gt;
      &lt;body&gt;
      &lt;input type=&quot;button&quot; id=&quot;b&quot; value=&quot;Кнопка&quot;&gt;
      &lt;/body&gt;
      &lt;/html&gt;
      [/html]

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *