Создание приподнятых теней с помощью CSS

Reading time ~4 minutes

Создание приподнятых теней (lifted shadow) с помощью CSS.

Такие тени создаются с помощью двух псевдо-элементов :before и :after. Дополнительной HTML-разметки при этом не требуется. Оба псевдо-элемента применяются только к одному элементу, который должен быть блочным. Ниже показана последовательность действий, которая совсем несложная.

Статья написана по мотивам известного блога Николаса Галлахера, где показаны самые разнообразные виды таких сложных теней.

Приступаем к написанию кода. Создаем элемент p и для него прописываем правила (чтобы смотрелся хорошо):

 class="lifted">
 Lifted Corners

.lifted{
 width: 400px;
 background-color: #fff;
 text-align: center;
 font-size: 18px;
 font-weight: bold;
 line-height: 70px;
 box-shadow: 0 0 40px rgba(0,0,0,0.3) inset;
 position: relative;
}

Здесь все несложно. Задаем ширину и высоту блока, а также косметическую красоту типа выравнивания по центру и придания тени для блока. Не забываем сделать блок относительно позиционированным, так как в последующих шагах нам потребуются псевдо-элементы, которые нужно будет позиционировать относительно блока-родителя.

Такой интересный момент в этом коде - нужно обязательно явно установить фоновый цвет для блока background-color: #fff. Иначе он будет прозрачным по умолчанию и сквозь него будут проступать наши тени.

Необходимо получить две тени, одна из которых располагается под левым углом блока, а другая - под правым. Поэтому нам потребуются два псевдо-элемента - :before и :after. Создаем правила, общие для обоих псевдо-элементов:

.lifted:before, .lifted:after{
 content: '';
 position: absolute;
 width: 50%;
 height: 10%;
 bottom: 15px;
 left: 4px;
 z-index: -1;
 -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
   -moz-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 15px 10px rgba(0,0,0,0.6);
     box-shadow: 0 15px 10px rgba(0,0,0,0.6);
}

Немного “расшифруем” показанный выше код. Устанавливаем для обоих псевдо-элементов абсолютное позиционирование и координаты: от нижней границы 15px (bottom: 15px) и от левой границы 4px (left: 4px;). Ширину элемента устанавливаем в половину от ширины элемента-родителя (width: 50%;), высоту - 10% от ширины этого же элемента. Один интересный момент, про который не нужно забыть - “подсовываем” тени под блок-родитель с помощью свойства z-index: -1. Ну и создаем сами тени правилом box-shadow: 0 15px 10px rgba(0,0,0,0.6), указав браузерные префиксы.

Теперь у нас есть обе тени, но выглядят они как одна, так как первая накладывается на другую, ибо их координаты одинаковы. Поэтому нужно “разнести” их по разным углам, установив для псевдо-элемента :after иное позиционирование по оси X:

.lifted:after{
 left: auto;
 right: 4px;
}

Почти все готово. Осталось только сделать для обеих теней “косину”, то есть развернуть их на определенное количество градусов. Левую тень развернем против часовой стрелки, чтобы ее внутренний угол оказался под блоком-родителем. Правую развернем точно также, только по часовой стрелке, чтобы ее внутренний угол также “спрятался” под блоком. Разворачивание будем выполнять с помощью правила transform: rotate для псевдо-элемента :before -

-webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
    transform: rotate(-3deg);

и для псевдо-элемента :after -

-webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
    transform: rotate(3deg);

Результат нашей работы можно посмотреть ниже. Красиво!

Блок с тенями под углами

Можно немного усложнить задачу и сделать нижние уголки блока визуально приподнятыми. Создастся иллюзия того, что у блока завернутые вверх уголки, как у листочка бумаги. Для этого нужно вспомнить о том, что у свойства border-radius есть два параметра, а не одно.

То есть, для одного угла можно задать два радиуса скругления, и тогда само скругление получиться не таким “правильным”, но более реалистичным. Первый радиус делаем большого размера, а второй немного меньше.

В результате угол получается не скругленным, а немного скошенным. В нашем примере для блока-родителя задаем радиусы скругления нижних углов следующим образом:

border-bottom-left-radius: 40px 12px;
border-bottom-right-radius: 40px 12px;

Итогом получается картинка листочка бумаги с завернутыми уголками:

Завернутые уголки на чистом CSS

На сайте Николаса Галлахера есть множество других примеров создания теней, которые по-настоящему впечатляют. В этой статье приведен только один из них, самый распространенный. Как видите, ничего сложного в его создании нет. Но вот на кросс-браузерность такой пример мною не рассматривался, ибо мне был важен сам результат.

На этом все.


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке