В этом уроке мы расскажем о двух способах создания эффекта отбрасывания тени: с помощью фильтра CSS и с помощью фильтра SVG. Подобные эффекты широко используются в современном веб-дизайне. Особенно когда речь идет о материал-дизайне с легкими элементами тени.

(Если вы не понимаете разницу между тенью блока и эффектом отбрасывания тени, обратитесь к этой статье)

На данный момент современные версии большинства браузеров, таких как Chrome, Opera, Safari и Firefox поддерживают фильтры, некоторым версиям мобильных браузеров при этом нужна приставка производителя Webkit, а очень старым версиям браузера Firefox нужно использование SVG. К сожалению, все версии браузера Internet Explorer не поддерживают фильтры, у них была своя версия фильтров, которая создавала нечто подобное, но в 10 и 11 версиях она тоже не работает. Но так как это только декоративный эффект, то это не так уж и важно. В браузере Edge фильтры частично поддерживаются, так что эффект будет работать.

Начнем с фильтра CSS:

.shadowed {
filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

Синтаксис довольно понятный: значения для фильтра означают горизонтальный отступ, вертикальный отступ, размытие и цвет тени, который задается цветом в формате rgba для создания реалистичной тени на любом фоне, соответственно.

Перейдем к SVG версии, которая, в принципе, не особо нужна, но, возможно, Вам будет удобнее работать с SVG. Можно или сохранить код ниже как отдельный файл, например, shadow.svg или встроить его в код веб-страницы. Код для создания эффекта отбрасывания тени следующий:

<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg">
        <filter id="drop-shadow">
                <feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
                <feOffset dx="12" dy="12" result="offsetblur"/>
                <feFlood flood-color="rgba(0,0,0,0.5)"/>
                <feComposite in2="offsetblur" operator="in"/>
                <feMerge>
                        <feMergeNode/>
                        <feMergeNode in="SourceGraphic"/>
                </feMerge>
        </filter>
</svg>

Синтаксис SVG намного сложнее, не будем подробно объяснять его здесь. Но хорошая новость, Вам нужно будет менять только четыре значения: stdDeviation — степень размытия, dx — горизонтальный отступ, а dy — вертикальный, и flood-color — цвет тени.

Для задания в коде CSS нужна такая запись:

.shadowed {
  filter: url(#drop-shadow);
}

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

Если Вы встроите SVG код прямо в веб-страницу, то в коде CSS Вам нужно будет использовать только значение идентификатора, заданное в коде SVG.

В результате получаем следующее:

И это все. Теперь Вы можете применить этот класс к любому изображению в формате png с прозрачностью или любому другому элементу, чтобы создать эффект отбрасывания тени.

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

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

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

• Тетрадка в линейку с расположением на ней текста на SVG и CSS
• Адаптивное фоновое изображение, постепенно исчезающее при прокрутке
• Создание эффекта полутонов с использованием SVG