Впервые опубликовано в общедоступном аккаунте «Front-End Full Stack Developer», прочитайте последние статьи как можно скорее и отдайте приоритет публикации новых статей в течение двух дней. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!
Если вы знакомы с CSS, вы, вероятно, знаетеbox-shadowАтрибуты. Но вы знаете, что есть фильтр CSSdrop-shadowМожет что-то подобное сделать? подобноbox-shadowТочно так же мы можем ввести значения для смещения по оси x, смещения по оси y, радиуса размытия и цвета.
.my-element {
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
а такжеbox-shadowотличается, не требуетspreadпараметров (подробнее об этом позже).
Чем полезна тень?
если мы имеемbox-shadow, зачем тебе еще нужноdrop-shadowШерстяная ткань?
непрямоугольная форма
использоватьdrop-shadowДобавим к элементу тень, эта тень не соответствует его ограничивающей рамке, а использует альфа-маску элемента. Например, мы можем добавить тени к прозрачным логотипам PNG или SVG.
img {
filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}
мы можем сравнитьbox-shadowа такжеdrop-shadowЭффект:
использоватьbox-shadowдает нам прямоугольную тень, даже если у элемента нет фона, аdrop-shadowСоздает тени для непрозрачных частей изображения.
Является ли изображение встроенным в HTML (как встроенный SVG или в<img>тег) или фоновое изображение CSS, они оба будут работать, то есть мы также можем добавить тень к градиентному фону. Формы были созданы с фоновым градиентом и примененыdrop-shadowФильтр:
<div class="grad"></div>
<div class="grad"></div>
<div class="grad"></div>
.grad {
width: 15rem;
height: 15rem;
margin: 1rem;
background: linear-gradient(45deg, deeppink 50%, transparent 50%);
filter: drop-shadow(0.6rem 0.6rem 1rem rgba(20, 20, 180, 0.8));
}
.grad:nth-child(2) {
background: radial-gradient(circle at center, deeppink 50%, transparent 50%);
}
.grad:nth-child(3) {
background: linear-gradient(45deg, transparent 60%, deeppink 60%), linear-gradient(135deg, transparent 60%, deeppink 60%);
}
Эффект
обтравочный элемент
если мы используемclip-pathилиmask-imageэлементы обрезки или маски, любые добавленные намиbox-shadowтакже будет обрезан, поэтому, если он находится за пределами обрезанной области, он не будет виден.
Но мы можем сделать это, применив к родительскому элементуdrop-shadowФильтр, создающий тень на обрезанном элементе. Довольно круто!
parent-element {
filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));
}
.clipped-element {
clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, , 50% 50%))
}
drop-shadowФильтр применяется к родительскому элементу фигуры отсечения.
группировка элементов
Иногда мне нужно построить компоненты, состоящие из перекрывающихся элементов, которые сами должны отбрасывать тени.
Если мы добавим весь компонентbox-shadow, оставив странное пустое место:
Если мы добавим отдельный к каждому элементуbox-shadow, то каждый элемент будет отбрасывать собственную тень, что может быть не тем, что нам нужно. Нам нужно использовать хитрый CSS, чтобы скрыть тени, где эти элементы перекрываются.
Но при использовании всего компонентаdrop-shadow, мы можем получить тени именно там, где хотим, не прибегая к хитрости.
Многократные тени
Вот забавная вещь: вы можете использовать несколько теней для создания крутых эффектов! Посмотрите демо ниже.
<div class="parent-element">
<div class="clipped-element"></div>
</div>
.parent-element {
filter: drop-shadow(10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-10rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(20rem 0 0 rgba(0, 30, 200, 0.8)) drop-shadow(-20rem 0 0 rgba(0, 30, 200, 0.8));
transition: filter 600ms;
}
.parent-element:hover {
filter: drop-shadow(0 0 0 rgba(0, 30, 200, 0.8));
}
.clipped-element {
width: 20rem;
height: 20rem;
margin: 0 auto;
background-color: deeppink;
clip-path: polygon(0 0, 50% 0, 100% 50%, 50% 100%, 0 100%, 50% 50%)
}
Эффект:
В качестве примечания: CSS-фильтры переходов и анимации не особенно эффективны, и в реальных проектах, вероятно, лучше не анимировать так много фильтров одновременно. Но это только для удовольствия!
ограничение
Как указано выше,drop-shadowне содержитspreadпараметр. Это означает, что в настоящее время мы не можем использовать его для создания эффектов контура, что, я думаю, будет очень полезно. Например, если он поддерживается, мы можем использоватьdrop-shadowСоздайте контур на градиентном фоне, как мы используем для других элементов.box-shadowилиtext-shadowТакой же.
ловушка
Даже при одинаковых параметрахdrop-shadowтакже не удается отобразить сbox-shadowТочно такой же эффект тени. Я подозреваю, что это как-то связано с фильтрами CSS, основанными на примитивах фильтров SVG. В любом случае вам может понадобиться настроитьdrop-shadowзначение для компенсации разницы.
Поддержка браузера
Все современные браузеры поддерживают фильтры CSS (включаяdrop-shadow). Я склонен использовать его как прогрессивное улучшение, не требуя обходных путей для старых браузеров, поскольку обычно это не оказывает существенного влияния на работу пользователя. Но если вам нужно предоставить альтернативные стили для старых браузеров, вы можете сделать это с помощью функционального запроса и использоватьbox-shadowвернитесь.
.my-element > * {
box-shadow: 0 0.2rem 0.25rem rgba(0, 0, 0, 0.2);
}
@supports (filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2))) {
.my-element {
filter: drop-shadow(0 0.2rem 0.25rem rgba(0, 0, 0, 0.2));
}
.my-element > * {
box-shadow: none;
}
}
Суммировать
Несмотря на хорошую поддержку,drop-shadowФильтры по-прежнему используются недостаточно. Я надеюсь, что в этой статье освещаются некоторые аспекты использованияbox-shadow的ситуации, возможно, вы можете использовать его в своем следующем проекте!