Page 89 - Сила CSS3 Освой новейший стандарт

Графические эффекты без графики • 89

Помимо создания простых теней, свойство box-shadow можно применять для решения
следующих задач:
• создание эффекта сияния (тень не смещается и, при желании, задается положительное
значение радиуса распространения);
• создание объемных кнопок;
• имитация нескольких рамок вокруг поля — для этого добавляется несколько свойств
box-shadow с нулевым значением радиуса размытия, делающим тени резкими и
четко очерченными (см. http://weston.ruter.net/2009/06/15/multiple-borders-via-css-
box-shadow);
• имитация градиентов с использованием ключевого слова inset (см. http://girliemac.
com/blog/2010/02/04/css3-box-shadow-with-inset-values-the-aqua-button-rerevisited,
http://graphicpush.com/experiments-with-css3-border-radius-and-box-shadow и http://
nimbupani.com/vignettes-with-css3-box-shadows.html).

Таблица 2.5. Поддержка свойства box-shadow в браузерах

IE Firefox Opera Safari Chrome
Частично, Да, с префиксом Да, начиная Да, Да,
начиная -moz-, начиная с версии с префиксом с префиксом
с версии 9 с версии 3.5 10.5 -webkit- -webkit-

Обходные пути для IE
Браузер IE версии 8 и более ранних не поддерживает свойство box-shadow, однако,
как и в случае с градиентами, падающие тени можно имитировать с помощью филь-
тров IE. Фильтры DropShadow и Shadow предназначены специально для создания
падающих теней, а Glow создает равномерное
сияние по всем сторонам поля. К сожалению, Сценарии PIE и IE-CSS3, которые
в отличие от свойства CSS3 box-shadow, эти филь- уже упоминались в этой главе,
тры не могут предложить широкого ассортимен- также умеют создавать в IE пада-
та возможностей настройки; Крис Касьяно (Chris ющие тени. Однако IE-CSS3 под-
Casciano) подробно рассказывает и иллюстриру- держивает только падающие тени
ет их потенциал в своей статье «CSS3 Box Shadow черного цвета.
in Internet Explorer [Blur-Shadow]» по адресу
http://placenamehere.com/article/384/CSS3BoxSha
dowinInternetExplorerBlurShadow. Мне кажется, ни один из перечисленных фильтров
не в состоянии создать эффект, который интересует нас в этом разделе.
Кроме того, Крис в своей статье демонстрирует хитрую технику создания более ре-
алистичной падающей тени с помощью фильтра IE Blur вместо DropShadow, Shadow
или Glow. Вы создаете в коде HTML копию поля, а затем размываете ее, добиваясь
нужного эффекта. Та же техника применяется в еще одной статье по адресу http://

www.trk.kg