Создание изогнутых теней с использованием только CSS

18 декабря 2016 | Опубликовано в css | 1 Комментарий »

Ранее мы рассказали, как создать изогнутую тень элементу HTML с помощью изображения тени в формате PNG, созданного в программе PhotoShop. Но нужно ли использовать программу для создания теней, если в CSS есть свойство тени блока? В этом уроке мы рассмотрим, можно ли создать изогнутые тени, используя только это свойство.

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

Воспользуемся тем же способом, что и в предыдущем уроке. В нем использовались псевдоэлементы ::before (до) и ::after (после) с изображением в качестве значения свойства содержимого. Но совершенно не обязательно задавать какое-либо содержимое псевдоэлементам для того, чтобы у них были тени.

В этом случае положим элемент изображения в блок, чтобы было немного проще:

<div id="island-dawn">
        <img src="perhentian-island-malaysia.jpg" alt="Dawn at Perhentian Island">
</div>

После этого используем примерно тот же способ, что и раньше: в этот раз у блока будет относительное позиционирование, чтобы эффекты псевдоэлементов ::before и ::after были расположены относительно родительского блока, а не тега <body>:

div#island-dawn {
        margin-bottom: 2rem;
        position: relative;
}

Нам нужно задать свойство содержимого для псевдоэлементов, но в нем не обязательно должно находиться что-либо видимое. Это может быть, например, одиночный пробел:

div#island-dawn:before,  div#island-dawn:after {
        content: " ";
        width: 80px;
        height: 8px;
}

После этого применим свойство тени блока к этим псевдоэлементам, задав ему численное значение распространения 15 пикселей:

div#island-dawn:before, div#island-dawn:after {
          content: " ";
          width: 80px; height: 8px;
          box-shadow: rgba(0,0,0,0.6) 0px 0px 15px 8px;
          position: absolute;
          bottom: 7px;
}

Еще оттолкнем тени справа и слева и повернем оба псевдоэлемента, задав им начала трансформаций как левый и правый верхние углы у левой и правой теней соответственно. Код для трансформаций приведен без приставок производителей, которые в этом случае почти нигде и не понадобятся для большинства современных версий браузеров:

div#island-dawn:before {
        left: 22px;
        transform-origin: top left;
        transform: rotate(-4deg);
}
div#island-dawn:after {
        right: 11px;
        transform-origin: top right;
        transform: rotate(4deg);
}

Хотя полученные в результате тени не совсем изогнуты, эффект подходит для создания видимости загнутых теней. Возможно усовершенствовать эффект с помощью трехмерного поворота CSS3.

Примечание Дежурки:

Для большей универсальности, чтобы тени всегда расолагались в правильном месте, нужно задать, например, ширину изображения 100% или фиксированный размер родительскому блоку.

Использована фотография с разрешения Choh Wah Ye, лицензированная по лицензии Creative Commons.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

Опубликовано в css, декабря 18, 2016
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Создание изогнутых теней с использованием только CSS

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые