На страницах нашего блога, да и на просторах интернета в принципе, Вам наверняка доводилось встречать догму, что применение тени для структурных элементов страницы способно придать вашему дизайну легкости, воздушности, глубины и объемности.
Сегодня мы рассмотрим несколько способов задания нетривиальной тени при помощи CSS3.
Да ну, может проще картинкой?
У Вас может возникнуть вопрос, зачем же играться с кодом, если даже начинающий пользователь Photoshop умеет создавать самые разнообразные эффекты тени? Запилить картинку, залить на сервер. Делов то…
С одной стороны оно конечно так, но, как говорит неевклидовая геометрия, прямолинейный путь не всегда самый короткий…
Применение картинок в качестве тенеобразующих элементов имеет ряд существенных недостатков:
- Скорость. Дополнительные картинки негативно сказываются на скорости загрузки страниц и создают дополнительную нагрузку на сервер.
- Резинка. Если Вы уже ознакомились с базовой версткой и переходите к решению реальных практических задач, у вас обязательно возникнет необходимость использовать «резиновую» верстку, и тут с картинками начинаются канители…
- Прощай «чистый» код. Применение картинок-теней приводит нас к необходимости ввода дополнительных блоков и оберток, вследствие чего код становится нечитабельным.
Какой у нас план?
В основе нашего примера будет лежать свойство box-shadow, щедро дарованное CSS3.
box-shadow добавляет элементу тень (что примечательно, по умолчанию — наружную, с параметром inset – внутреннюю), позволяет одновременно применять несколько разных теневых следов, адекватно оттеняет border-radius…
Ну, как Вы уже догадались, автор очень любит это свойство))).
Рассмотрим пример использования:
box-shadow: <offsetX> <offsetY> < blur radius > < spread radius > <shadow color>
- offsetX — вертикальный сдвиг тени относительно блока
- offsetY — горизонтальный сдвиг тени относительно блока
- blur radius — радиус размытия тени
- spread radius — протяженность тени
- shadow color — цвет тени (черный по умолчанию)
Записав несколько теней через запятую — получим несколько теней на выхлопе.
Важно!!!
- Устаревшие браузеры на web-kit движке поддерживают экспериментальное свойство -webkit-box-shadow (Sf до v5.1, Cr до v10.0, Andr до v4.0 и iOS Sf до v5.0).
- IE до v9.0 не понимает box-shadow, по этому придется поиграться с фильтрами вида
filter: progid:DXImageTransform.Microsoft.dropshadow(offsetX, offsetY, shadow color);
Переходим к практике
Создадим страницу с базовым контейнером, к которому будем прикручивать тень.
HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" media="all" type="text/css" href="./style.css"> <title> Нестандартные тени </title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="blockd">Нестандартные тени <span>CSS</span></div> </body> </html>
Естественным дополнением к нашей страничке будет каскадная таблица стилей. В ней мы зададим базовую стилизацию элементов.
CSS:
body { background: aqua; /*Задаем фон страницы*/ } #blockd {/*Базовый контейнер*/ position: relative; /*Позиционируем контейнер*/ width: 50%; /*Ширина контейнера*/ background: #f2ea09; /*Фон контейнера*/ -moz-border-radius: 5px; /*Фаска для Мозюки*/ border-radius: 5px;/*Фаска*/ padding: 20px 20px; /*Внутренние отступы*/ color: rgba(25,1,255, 0.7);/*Цвет текста*/ text-shadow: 0 1px 0 #211e3c; /*Тень текста*/ font-size: 45px;/*Размер шрифта*/ font-weight: bold; margin: 120px auto;/*Внешние поля*/ } #blockd span { color: rgba(252,47,0, .8); font-weight: bolder; font-size: 50px; }
Результатом наших стараний будет следующий пейзаж:
В создании обещанной не совсем стандартной тени нам помогут:
- псевдоэлементы :before, :after, позволяющие выводить некий контент непосредственно перед и после родительским элементом.
- CSS свойство transform, позволяющее трансформировать элемент, (вращать, наклонять в разных плоскостях, применять матрицу преобразований и многое другое).
Дабы не растекаться мыслью по древу, представляю Вашему вниманию код с подробными комментариями.
CSS:
#blockd:before,/*Темизируем псевдоэлементы*/ #blockd:after { z-index: -1;/*Прячем псевдоэлементы за родителя*/ position: absolute;/*Задаем позиционирование*/ content: "";/*Намекаем, что нужно что-то вывести*/ bottom: 16px;/*Уточняем абсолютное положение*/ left: 9px;/*Уточняем абсолютное положение*/ width: 50%;/*Задаем ширину*/ top: 70%;/*Смещаем вниз*/ max-width:350px;/*Ограничиваем ширину*/ background: rgba(0, 0, 0, 0.8);/*Задаем фон псевдоэлемента*/ -webkit-box-shadow: 0 20px 10px rgba(244,63,0, 0.7);/*тень для вэбкит-движков*/ -moz-box-shadow: 0 20px 10px rgba(244,63,0, 0.7);/*Тень для Мозиллы*/ box-shadow: 0 20px 10px rgba(244,63,0, 0.7);/*Тень для всех, кому CSS3 не чуждо*/ -webkit-transform: rotate(-4deg);/*Вращаем на 4 градуса для вэбкит*/ -moz-transform: rotate(-4deg);/*Вращаем на 4 градуса для Мозиллы*/ -o-transform: rotate(-4deg);/*Вращаем на 4 градуса для Оперы*/ -ms-transform: rotate(-4deg);/*Вращаем на 4 градуса для мелкософта*/ transform: rotate(-4deg); /*Вращаем на 4 градуса для всех, кому CSS3 не чуждо*/ } #blockd:after { /*Вращаем и размещаем тень «после» контейнера*/ transform: rotate(4deg); -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -o-transform: rotate(4deg); -ms-transform: rotate(4deg); right: 9px; left: auto; }
Теперь взглянем на результат.
Как видно из примера, мы использовали красную (244,63,0) полупрозрачную (0.7) тень. Целью такого шага было продемонстрировать возможность применения любого элемента из RGB пространства в качестве тенеобразующей основы.
Разноцветные тени способны помочь Вам в создании оригинальных дизайнерских решений.
Рассмотренный пример не является единственно возможным, изменяя положение, угол поворота псевдоэлементов и цветовую схему можно построить целый ряд подобных вкуснятин.
Важно!!!
- Кросс-браузерность. Рассмотренный метод построения нестандартных теней показал полную работоспособность в браузерах, начиная с Fx3.5, Op10.5, Sf, Cr, IE9.
- В отличии от метода картинок, скорость загрузки страниц не ухудшается, наличие тени не влияет на размер блока:
Shadows do not influence layout and may overlap other boxes or their shadows.