Filter drop shadow не работает

drop-shadow()

The drop-shadow() CSS function applies a drop shadow effect to the input image. Its result is a .

A drop shadow is effectively a blurred, offset version of the input image’s alpha mask, drawn in a specific color and composited below the image.

Note: This function is somewhat similar to the box-shadow property. The box-shadow property creates a rectangular shadow behind an element’s entire box, while the drop-shadow() filter function creates a shadow that conforms to the shape (alpha channel) of the image itself.

Syntax

The drop-shadow() function accepts a parameter of type (defined in the box-shadow property), with the exception that the inset keyword and spread parameters are not allowed.

Parameters

Two values that determine the shadow offset. offset-x specifies the horizontal distance, where negative values place the shadow to the left of the element. offset-y specifies the vertical distance, where negative values place the shadow above the element. If both values are 0 , the shadow is placed directly behind the element.

The shadow’s blur radius, specified as a . The larger the value, the larger and more blurred the shadow becomes. If unspecified, it defaults to 0 , resulting in a sharp, unblurred edge. Negative values are not allowed.

The color of the shadow, specified as a . If unspecified, the value of the color property is used.

Источник

Почему фильтр (drop-shadow) вызывает исчезновение моего SVG в Safari?

Я разрабатываю приложение с помощью D3.js. Некоторое время я был сбит с толку и недавно вернулся к этому. Сегодня я обнаружил, что, хотя в прошлом он работал нормально, карта SVG в приложении больше не отображается на мобильном Safari (iOS 9.3.1) или настольном Safari (v9.1 (11601.5.17.1)).

я извлек SVG и одно правило стиля и поместил их в CodePen, чтобы проиллюстрировать, что происходит. В Chrome, эта ручка будет выглядеть прекрасно. В Safari, он будет полностью пустым.

Если вы проверите DOM в Safari, вы обнаружите, что пути есть, и они являются правильными формами. Они просто кажутся невидимыми. Отключение правил стиля в инспекторе заставляет всю карту волшебным образом появляться (без тени, очевидно)

правило стиля очень прост:

может ли кто-нибудь предположить, почему это не работает? Я сделал что-то не так, или что-то изменилось в сафари?

4 ответов

наверное, немного опоздала, но на всякий случай я оставлю вам свой ответ. У меня была такая же проблема с Safari, и я понял, что это, похоже, проблема/ошибка Safari. Вы можете обойти эту ошибку, просто обернув свой тег SVG другим тегом HTML, таким как div, и применить к этому элементу фильтр drop-shadow, как в вашем примере. Здесь у вас есть пример, измененный с помощью элемента wrapper

надеюсь, что это поможет!

браузеры вычисляют вещи по-разному, и по какой-то причине Safari ненавидит вас. Лол.

однако вместо этого вы должны использовать фильтры SVG. Они гораздо надежнее.

надеюсь, что это поможет!

в моем случае я использовал фильтр SVG, поэтому я не мог действительно применить решение CSS. Вместо этого я смог заставить SVG отображаться, применив преобразование CSS через Javascript после загрузки страницы. Вот пример в простой JS:

Если вы хотите знать, будет ли это работать, посмотрите, появится ли SVG после изменения размера браузера или изменения правила стиля CSS с помощью инспектора.

Источник

Drop-Shadow: недооцененный фильтр CSS

Дата публикации: 2020-09-03

От автора: если вы знакомы с CSS, вы, вероятно, знаете об свойстве box-shadow все. Но знаете ли вы, что существует фильтр CSS drop-shadow, который делает нечто подобное? Например, box-shadow, мы можем передать значения для x-offset, y-offset, радиуса размытия и цвета.

В отличие от этого box-shadow, он не принимает параметр spread (подробнее об этом позже).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Чем полезен drop-shadow? Если есть box-shadow, то зачем вообще нужен drop-shadow?

Непрямоугольные фигуры

Использование drop-shadow позволяет нам добавить тень к элементу, которая не соответствует его ограничивающей рамке, но вместо этого использует альфа-маску элемента. Например, мы могли бы добавить тень к прозрачному логотипу PNG или SVG.

Мы можем сравнить эффект box-shadow с drop-shadow:

Использование box-shadow дает нам прямоугольную тень, даже если элемент не имеет фона, а drop-shadow создает тень от непрозрачных частей изображения.

Это будет работать независимо от того, является ли изображение встроенным в HTML (либо в виде встроенного SVG, либо в теге img) или фоновым изображением CSS. Это означает, что мы также можем добавить тень к градиентному фону. Эти фигуры создаются с фоновыми градиентами с помощью фильтра drop-shadow:

Обрезанные элементы

Если мы обрезаем или маскируем элемент с помощью clip-path или mask-image, любой box-shadow, добавляемый нами к элементу, также будет обрезан — поэтому он будет невидимым, если находится за пределами обрезанной области.

Но мы можем создать тень для обрезанного элемента, применив фильтр drop-shadow к родительскому элементу. Довольно круто!

Фильтр drop-shadow применяется к родительскому элементу обрезанной фигуры.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Сгруппированные элементы

Иногда мне приходилось создавать компоненты, состоящие из перекрывающихся элементов, которые сами по себе должны отбрасывать тень. Если мы добавим a box-shadow ко всему компоненту, у нас останутся странные пустые места:

Box-shadow, примененный к компоненту

Если мы добавим box-shadow к каждому элементу по отдельности, то каждый будет отбрасывать свою собственную тень, что может иметь нежелательный эффект. Нам нужно было бы использовать некоторый умный CSS, чтобы скрыть те тени, где элементы перекрываются.

Box-shadow, примененный к столбцам

Но, используя drop-shadow для всего компонента, мы получаем тень именно там, где хотим, не прибегая к хитростям:

drop-shadow, примененный к компоненту

Множественные тени

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

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

Ограничения

Как упоминалось выше, drop-shadow не включает параметр spread. Это означает, что в настоящее время мы не можем использовать его для создания эффекта контура, что, я думаю, было бы действительно полезно. Например, если бы он поддерживался, мы могли бы использовать drop-shadow для создания контура на градиентном фоне так же, как и box-shadow для других элементов.

Предостережения

drop-shadow не отображает точно такой же эффект тени, как box-shadow, даже при тех же параметрах. box-shadow имеет тенденцию давать более темные и тяжелые тени, чем drop-shadow при использовании тех же значений. Я подозреваю, что это как-то связано с фильтрами CSS, основанными на примитивах фильтров SVG. В любом случае вам, вероятно, придется компенсировать разницу, несколько скорректировав значения drop-shadow.

Поддержка браузерами

Фильтры CSS (в том числе drop-shadow) поддерживаются во всех современных браузерах. Я склонен использовать его как прогрессивное улучшение, без необходимости обходного пути для старых браузеров, поскольку обычно это не что-то, что могло бы существенно повлиять на работу пользователя. Но если вам действительно нужно предоставить альтернативный стиль для старых браузеров, вы можете сделать это, используя запрос функции с запасным вариантом box-shadow:

Источник

Свойство CSS box-shadow против фильтра drop-shadow filter: Подробное сравнение

В последнее время было много разговоров насчет того, чем отличаются свойство CSS box-shadow и фильтр drop-shadow CSS . Первое используется уже в течение длительного времени и хорошо поддерживается в современных браузерах; последний является переводом SVG в CSS и в настоящее время имеет поддержку в Chrome , Firefox и Safari . На первый взгляд методы создания с помощью CSS тени блока и с помощью фильтров дают тот же результат: даже синтаксис у них очень похож.

Но как мы увидим, между ними существуют весьма значительные различия:

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

Самая замечательная особенность теней внутри блока CSS , созданных с помощью фильтров, заключается в том, что они очерчивают явные контуры элементов. box-shadow отражает прямоугольную форму изображения без учета альфа-маски; тень-фильтр полностью соответствует контуру PNG-изображения .

Это также справедливо для border-images , при условии, что изображение рамки является PNG с альфа-маской.

Фильтр drop-shadow учитывает добавление таких псевдо-элементов, как :before и :after . Обратите внимание, что в версии с фильтром тень повторяет форму треугольника:

Ограничения фильтра drop-shadow

Недостатки использования фильтра:

• Чтобы создавать такую объемную тень внизу блока CSS , как с помощью box-shadow , фильтр drop-shadow должен поддерживать четвертое значение spread . Но в текущей реализации Webkit box shadow четвертое значение будет расцениваться как ошибка, и тень в этом случае не выводится вообще;
• Спецификация фильтра не поддерживает значение inset , поэтому с помощью кода фильтра вы не сможете легко создавать внутреннюю тень.

Другие различия

Оба эффекта тени учитывают border-radius и transform . Но CSS тень блока снизу, созданная с помощью фильтра, будет выводиться под элементом, не учитывая фон, в то время как box-shadow будет учитывать сплошной фон элемента. Если граница неоднородная ( например, пунктирная ), фильтр будет учитывать это, а box-shadow нет:

Так как фильтр создает тень по бокам блока CSS только для рамки ( которая в данном случае имеет толщину всего в четыре пикселя ), то версия тени с помощью фильтра выглядит светлее.

Вердикт

Фильтр ( drop-shadow ), безусловно, является победителем в этом раунде: он имеет большую гибкость, а его недостатки проявляются только, если речь идет о внутренней тени и отсутствии ее распределения.

Скорость и качество

Качество отображения теней, полученных с помощью этих двух способов, примерно одинаково. Фильтры drop-shadow имеют преимущество аппаратного ускорения, если браузер поддерживает его; box-shadow не имеет доступа к нему. При других равных условиях фильтр drop-shadow CSS внутреннюю тень блока выводит быстрее.

Вывод

На данном этапе мы можем установить несколько простых правил:

• если элемент является сплошным и имеет сплошную рамку, тогда box-shadow . Это свойство имеет лучшую поддержку, и будет давать тот же визуальный результат, что фильтр и drop-shadow , хотя и на несколько миллисекунд медленнее;
• если вам нужно создать внутреннюю тень — также box-shadow .

Если у вас есть PNG -изображение с альфа-маской, существует несколько вариантов реализации:

• Создайте тени с помощью Photoshop , чтобы все браузеры отображали их одинаково;
• Оставьте изображение без изменения и используйте фильтр drop-shadow , учитывая, что на данный момент только Webkit-браузеры будут выводить эту тень.
• Попробуйте применить к контенту SVG-фильтр drop-shadow , чтобы тень одинаково распознавалась в других браузерах.

Если элемент имеет неоднородный контур, который не задается с помощью border-radius , почему бы не создать CSS тень вокруг блока с помощью обоих методов?

Webkit будет « дублировать » тень стандартного элемента. В то же время вы сможете обеспечить резервную поддержку для старых браузеров, которые распознают только box-shadow .

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

Источник

Трюки CSS, которые сделают из вас ниндзя верстки

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

Многие свойства, о которых пойдет речь, являются экспериментальными. Большинство из них поддерживаются всеми современными браузерами, однако, если вы решите использовать какое-либо из названных свойств в продакшне, не поленитесь зайти на Can I use и уточнить поддержку (недавно сильно расстроился, обнаружив, что Safari не поддерживает атрибут loading=»lazy» ).

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

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

Итак, вы готовы к нашему небольшому путешествию в удивительный и почти безграничный мир CSS? Тогда вперед.

grid + place-items

Здесь вы найдете полное визуальное руководство по Grid и Flexbox .

Данная техника позволяет выравнивать элементы по горизонтали и вертикали при помощи всего лишь двух строк кода.

place-items является сокращением для justify-items и align-items .

Это свойство может использоваться как в отношении одной, так и в отношении сразу нескольких (дочерних) ячеек.

flex + margin

Другой современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto .

Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета:

flex + gap

Раз уж мы заговорили о Flexbox , нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало):

inline-flex

Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox . Лучше один раз увидеть:

columns

Данная техника позволяет разделять текст на колонки. Свойство column-count определяет количество колонок, column-gap — отступ между колонками, column-rule — стили для вертикальной линии, разделяющей колонки.

Свойство columns является сокращением для column-count и column-width .

background-repeat

Свойство background-repeat определяет порядок заполнения фона указанным изображением. Значение round позволяет равномерно распределять изображения по всей ширине контейнера, а значение space добавляет между изображениями небольшой отступ:

background-blend-mode

Свойство background-blend-mode определяет порядок наложения фонового изображения и цвета (или нескольких фоновых изображений/цветов) друг на друга.

• color
• color-burn
• color-dodge
• darken
• difference
• exclusion
• hard-light
• hue
• lighten
• luminosity
• multiply
• overlay
• saturation
• screen
• soft-light

Когда-нибудь работали с Photoshop ? Тогда, думаю, вы понимаете, о чем идет речь.

Представим, что у нас есть черно-белое изображение, которое мы хотим использовать в качестве фона. Но при этом мы хотим, чтобы оно было цветным. Как нам этого добиться?

background-clip

Свойство background-clip определяет, как цвет фона или фоновое изображение выводятся под границами блока. На мой взгляд, самым интересным значением данного свойства является text :

filter

Свойство filter позволяет применять к элементам некоторые художественные эффекты.

• url() — svg-фильтр
• blur() — размытие
• brightness() — яркость
• contrast() — контрастность
• drop-shadow() — об этой функции поговорим отдельно
• grayscale() — обесцвечивание
• hue-rotate() — оттенок
• invert() — инверсия
• opacity() — прозрачность
• saturate() — насыщенность
• sepia() — сепия

Изменение цветовой темы (или схемы) сайта для ленивых:

Здесь вы найдете пример использования filter для реализации фильтров Instagram .

drop-shadow

Свойство filter со значением drop-shadow() , в отличие от похожего с точки зрения применяемого эффекта свойства box-shadow , позволяет добавлять тень к самому изображению (в формате PNG ), а не к блоку, в котором оно размещается.

object-fit

Свойство object-fit управляет соотношением сторон заменяемых элементов, таких как img и video , когда у них задана ширина или высота, а также способом масштабирования.

Значение scale-down , например, позволяет сохранять пропорции изображения независимо от размеров блока:

Свойство object-position определяет выравнивание контента выбранного замещаемого элемента внутри блока.

cursor

Знаете ли вы о том, что кроме иконок для курсора, предоставляемых браузером (например, cursor: pointer ), мы имеем возможность определять собственные изображения и svg?

scroll-behavior

Свойство scroll-behavior со значением smooth позволяет легко реализовать плавную прокрутку между секциями (разделами) страницы:

text-overflow

Свойство text-overflow со значением ellipsis позволяет добавлять . в конец текста при его выходе за пределы контейнера.

caret-color

Свойство caret-color позволяет определять цвет каретки — видимого маркера ( | ), указывающего на место вставки следующего символа.

scroll-snap

Группа свойств scroll-snap ( scroll-span-type , scroll-snap-align и scroll-snap-stop ) позволяет управлять поведением прокрутки. Данная группа свойств заслуживает отдельной статьи, но если кратко, то суть заключается в том, что в стилях определяются контрольные точки, при приближении к которым выполняется автопрокрутка:

Среди других возможностей scroll-snap можно назвать легкое создание слайдеров с помощью одного CSS .

supports

Правило @supports позволяет проверять поддержку браузером определенного свойства или свойств (или сочетания свойство/значение) перед их использованием.

Функция var() позволяет использовать значения пользовательских переменных в качестве значений свойств. Вторым опциональным параметром данной функции является резервное значение.

Функция calc() используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время или число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений.

Обычно, абсолютно позиционируемый элемент выравнивается по горизонтали и вертикали следующим образом:

Если нам известны размеры такого элемента, мы можем сделать следующее:

С помощью функции attr() можно извлекать значение атрибута выбранного элемента и использовать его в стилях.

Реализация всплывающей подсказки средствами CSS :

:target

Псевдокласс :target позволяет создавать модальные окна, работающие без JavaScript :

::marker

Раньше мы удаляли маркер списка с помощью list-style: none и добавляли свой с помощью псевдоэлементов ::before или ::after . Сейчас существует более простой способ — псевдоэлемент ::marker .

::selection

Псевдоэлемент ::selection позволяет стилизовать выделение текста.

Напоследок, вот вам парочка полезных ссылок на ресурсы, которые сделают вас настоящим CSS-ниндзя:

Благодарю за внимание и хорошего дня!

Облачные серверы от Маклауд на NVMe-дисках запускаются за 1 минуту.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Источник