Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Нестандартные тени CSS

Раздел: 

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

Сегодня мы рассмотрим несколько способов задания нетривиальной тени при помощи CSS3.

Нестандартные тени CSS

Да ну, может проще картинкой?

У Вас может возникнуть вопрос, зачем же играться с кодом, если даже начинающий пользователь 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 пространства в качестве тенеобразующей основы.

Разноцветные тени способны помочь Вам в создании оригинальных дизайнерских решений.

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

Важно!!!

  1. Кросс-браузерность. Рассмотренный метод построения нестандартных теней показал полную работоспособность в браузерах, начиная с Fx3.5, Op10.5, Sf, Cr, IE9.
  2. В отличии от метода картинок, скорость загрузки страниц не ухудшается, наличие тени не влияет на размер блока:

    Shadows do not influence layout and may overlap other boxes or their shadows.