Создание теней, отбрасываемых блочными элементами
Если вы разобрались, как создавать тени, отбрасываемые текстом, то легко поймете, как обеспечить отбрасывание теней блочными элементами. В принципе, для их создания потребуется придерживаться точно такого же синтаксиса: горизонтальное смещение, вертикальное смещение, размытие и цвет:
Box-shadow: 0px 3px 5px #444444;
Однако они не очень хорошо поддерживаются браузерами, поэтому будет разумным использовать префиксы поставщиков, чтобы максимизировать совместимость. Например:
-ms-box-shadow: 0px 3px 5px #444444;
-moz-box-shadow: 0px 3px 5px #444444;
-webkit-box-shadow: 0px 3px 5px #444444; box-shadow: 0px 3px 5px #444444;
Используем свойство box-shadow для добавления теней к постерам фильмов во врезке на сайте And the winner isn’t.:
.sideBlock img { max-width: 45%;
Box-shadow: 0px 3px 5px #444444;
Постеры теперь отбрасывают тень
Внутренняя тень
Свойство box-shadow также может использоваться для создания внутренней тени, которая применяется внутри целевого элемента, а не снаружи, как обычная тень, отбрасываемая блочным элементом. Такой подход позволяет создавать, например, эффект виньетки. Вот синтаксис:
Box-shadow:inset 0 0 40px #000000;
Все работает как и раньше, однако слово inset дает браузеру команду применять эффект внутри. Сейчас я собираюсь использовать это правило в теге <body> для создания эффекта виньетки для всей страницы. Идея заключается в том, чтобы тень отображалась по всем краям страницы:
Body {
-moz-box-shadow:inset 0 0 30px #000000;
-webkit-box-shadow:inset 0 0 30px #000000; box-shadow:inset 0 0 30px #000000;
}
На рисунке 6.8 показано, как результат будет выглядеть в браузере.
По периметру страницы отображается внутренняя тень
Множественные тени.
Как и текст, блочные элементы могут иметь множественные тени. Опять-таки вам потребуется лишь разделить запятыми значения, и они будут применяться сверху вниз в том порядке, в каком указаны. Объявление, самое близкое к верхушке
В правиле (в коде), будет самым близким к верхушке порядка при визуализации в браузере.
Box-shadow: inset 0 0 30px hsl(0, 0%, 0%),
Inset 0 0 70px hsla(0, 97%, 53%, 1);
Я добавил эти строки в свое правило body и получил в итоге ужасный эффект красного будуара (рисунок 6.9). Должно быть, это побочный результат того, что на странице имеется постер фильма «Мулен Руж»!
Тень слишком бросается в глаза.
Достаточно сказать, что я решил выбросить из кода это объявление! Однако оно показывает, как благодаря CSS3 можно поэкспериментировать с реализацией разных идей в дизайне. На добавление и удаление визуальных «украшательств» вы потратите пару секунд, и не придется прибегать к графическим редакторам.
ПРИМЕЧАНИЕ.
Прочесть спецификацию W3C свойства box-shadow можно по следующему адресу: http:// www.w3.org/TR/css3-background/#the-box-shadow.
Добавить комментарий