Css background filter: backdrop-filter — CSS: Cascading Style Sheets

16 примеров CSS backdrop-filter

Коллекция бесплатных CSS background-filter примеров кода из Codepen и других источников.

1. CSS background-blend-mode Примеры
2. CSS background-clip Примеры

О коде

Бутылка для воды

Просто развлекайтесь с фоновым фильтром на бутылке с холодной водой из чистого CSS. Все еще хотите пить? Для некоторой поддержки Firefox установите layout.css.backdrop-filter.enabled и gfx.webrender.all на true в about:config , затем перезапустите браузер. Тем не менее, бутылка может выглядеть не так, как ожидалось.

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

2021

2021 карта с фоновым фильтром CSS .

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Использование фонового фильтра

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

Совместимые браузеры: Chrome, Edge, Opera, Safari

Отвечает: да

Зависимости: material-design-iconic-font.css, jquery.js

О коде

Размытый заголовок

Эксперимент с прогрессивным размытием фона.

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Изображение с эффектом фона

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: shorthand.css, pattern.css

О коде

Пример фонового фильтра

Воспроизведите это супер крутое размытие фона в тренде с помощью CSS-свойства backdrop-filter .

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

С код

Фоновый фильтр

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Ячейки с фоновым фильтром

Используя overlaying-div-soups с фоновым фильтром , можно применить fx к любому базовому контенту, например. рисунок , список , детали , рубрика с…

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Матовое стекло

фоновый фильтр потрясающий!

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

фоновый фильтр: размытие и поведение прокрутки: гладкое

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Футуристические стили кнопок (огонь и лед)

Футуристические и органичные стили кнопок с эффектом наведения. Использует эффект фонового фильтра для легкого эффекта морозного стекла. CSS через Sass в качестве препроцессора, HTML через Pug. Javascript не используется.

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Фоновый фильтр Пример

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

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Размытые жалюзи

Учебное пособие по анимации загрузчика только для CSS с фоновым фильтром : размытие .

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: —

О коде

Эффект прозрачности в стиле iOS в CSS с фоновым фильтром

Игра с фоновым фильтром 9Эффект 0005.

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: -

О коде

Фоновый фильтр Размытие

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: -

О коде

фоновый фильтр Использование фильтра SVG

Совместимые браузеры: Chrome, Edge, Opera, Safari

Ответ: да

Зависимости: -

Фоновый фильтр CSS | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д. Могу ли я использовать

Поиск ?

Фоновый фильтр CSS

- ОТКЛ

• Глобальное использование

  95,24% + 0% "=" 95,24%

Метод применения эффектов фильтра (таких как размытие, оттенки серого или оттенок) к содержимому/элементам ниже целевого элемента.

Chrome

1. 4–46: не поддерживается
2. 47–75: отключено по умолчанию
3. 76–113: поддерживается
4. 114: поддерживается
5. 11 5–117: поддерживается

Edge

1. 12–16 : Не поддерживается
2. 17–18: Поддерживается
3. 15% - Supported"> 79- 113: Поддерживается
4. 114: Поддерживается

Safari

1. 3.1 - 8: Не поддерживается
2. 9 - 16.4: Поддерживается
3. 16.5: Поддерживается 9001 0
4. 16.6 — TP: поддерживается

Firefox

1. 2 — 69: Не поддерживается
2. 70–102: Отключено по умолчанию
3. 103–112: Поддерживается
4. 113: Поддерживается
5. 114–115: Поддерживается

Opera 900 16

1. 05% - Not supported"> 9–33: не поддерживается
2. 34–63 : отключено по умолчанию
3. 64–98: Поддерживается
4. 99: Поддерживается

IE

1. 5.5–10: Не поддерживается
2. 11: Не поддерживается

900 15 Chrome для Android

1. 114: поддерживается

Safari на iOS

1. 3.2–8.4: не поддерживается
2. 9–16.4: поддерживается
3. 16.5: поддерживается
4. 16. 6–17: поддерживается

Samsung Internet

9000 8

4: Не поддерживается

5 - 11.2: Отключено по умолчанию

12.0–20: поддерживается

21: поддерживается

Opera Mini

1. все: не поддерживается

Opera Mobile

1. 10–12.1: не поддерживается
2. 73: поддерживается

Браузер UC для Android

1. 13.4: Поддерживается

Браузер Android

1. 2.1–4.4.4: Не поддерживается
2. 114: Поддерживается

Firefox для Android 9 0016