CSS Whimsy | Полностью совместимый эффект матового стекла

JavaScript CSS
CSS Whimsy | Полностью совместимый эффект матового стекла

Благодаря этой статье вы можете узнать

  1. Самое простое использование CSSbackdrop-filterРеализовать эффект матового стекла (матового стекла)
  2. пока не совместимbackdrop-filterБраузер firefox, как с помощью некоторых умелых операций ловко добиться эффекта матового стекла, чтобы этот эффект действительно можно было использовать в бизнесе

чтоbackdrop-filter

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

backdrop-filterа такжеfilterОчень похожие значения могут быть использованы одинаковые, но целое действует на элемент, один элемент действует только на заднюю область.

backdrop-filterа такжеfilterВ сравнении

Мы используемbackdrop-filterа такжеfilterПри этом для сравнения достигается эффект матового стекла.Псевдокод выглядит следующим образом:

<div class="bg">
    <div>Normal</div>
    <div class="g-filter">filter</div>
    <div class="g-backdrop-filter">backdrop-filter</div>
</div>

.bg {
    background: url(image.png);
    
    & > div {
        width: 300px;
        height: 200px;
        background: rgba(255, 255, 255, .7);
    }
    .g-filter {
        filter: blur(6px);
    }
    .g-backdrop-filter {
        backdrop-filter: blur(6px);
    }
}

Демонстрация CodePen — фильтр против фонового фильтра

существуетbackdrop-filterВ прошлом было очень сложно добавить эффекты фильтра только к фону элемента, и это было нормально для статических изображений.Если фон все еще был прокручиваемым динамическим фоном, CSS обычно был бессилен.

backdrop-filterОн был создан для добавления фильтров к содержимому за элементом, не затрагивая сам элемент. С его помощью очень удобно добиваться эффекта матового стекла (матового стекла)!

backdrop-filterсовместимость

backdrop-filterНа самом деле он давно родился, однако firefox до сих пор с ним не совместим!

Для некоторых ПК-компаний, которые отказались от IE, Firefox по-прежнему должен быть совместим.backdrop-filterЧтобы реализовать применение эффекта матового стекла, необходимо решить проблему совместимости Firefox.

Эффект матового стекла в firefox

Хорошо, в этой статье основное внимание уделяется тому, как использовать firefox без использованияbackdrop-filterИ максимально восстановить эффект матового стекла.

Первый взгляд, если это нормальное использованиеbackdrop-filter, или эффект приведенного выше примера выглядит следующим образом, нет эффекта матового стекла:

image

Использовать background-attachment: исправлено для совместимости со статическими фоновыми изображениями.

Если вы хотите использовать эффект матового стекла в Firefox. Фон элемента из матового стекла — это просто статичное фоновое изображение, на самом деле способов много.

Мы просто за элементами суперпозиции одного и того же изображения, используемbackground-attachment: fixedРасположите изображение, наложенное под элементом, на те же координаты, что и фон, а затем используйтеfilter: blur()Просто размытие.

Псевдокод выглядит следующим образом:

<div class="g-glossy">frosted glass effect </div>

$img: 'https://static.pexels.com/photos/373934/pexels-photo-373934.jpeg';

body {
    height: 100vh;
    display: flex;
    background-image: url($img);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.g-glossy {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    z-index: 10;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url($img);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
    }
}

Эффект следующий:

image

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

CodePen Demo -- используйте background-attachment: fixed | filter: bulr() для достижения эффекта матового стекла

Использовать Background-attachment: исправлена ​​совместимость с недостатками статических фоновых диаграмм.

Однако этот подход также имеет два недостатка:

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

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

Эффект после наложения выглядит следующим образом:

image

CodePen Demo — используйте background-attachment: fixed | filter: bulr() для оптимизации эффекта матового стекла

  1. Вышеприведенный эффект очень близок.Если хотите быть придирчивым, край псевдоэлемента, к которому применяется фильтр размытия, имеет дефекты белой границы.На самом деле это проблема самого фильтра, и решить ее очень просто Нам нужно только изменить край псевдоэлемента, чтобы немного расширить область действия:
.g-glossy {
    overflow: hidden;
    ....
    &::before {
        content: "";
        position: absolute;
        top: -100px;
        left: -100px;
        right: -100px;
        bottom: -100px;
    }
}

Код позиционирования задаетсяtop: 0px;изменить наtop: -100px, то же самое можно сделать во всех четырех направлениях. Таким образом, вы можете выполнить 100% моделирование.

использоватьmoz-element()Сотрудничатьfilter: blur()Реализовать сложный фоновый эффект матового стекла

Следующий способ очень изобретателен.Обычно элементы фона с эффектом матового стекла не так просты, как картинка! Обычно за этим стоит сложная структура всей страницы с несколькими уровнями вложенности DOM.

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

И бывает, что в Firefox есть такое свойство ---moz-element().

за что-moz-element()?MDN-elementОбъяснение в том, что функция CSSelement()определяет изображение, сгенерированное из произвольного элемента HTML<image>стоимость. Значение изображения является активным, что означает, что если указанный элемент HTML изменяется, фон элемента, к которому применяется атрибут, соответственно изменяется.

На самом деле это предварительная спецификация, но до сих пор ее поддерживал только Firefox.CAN I USE -- CSS element():

Что оно делает?

-moz-element()как использовать

Так-moz-element()Как это использовать? Короче говоря, он копирует пользовательский интерфейс, отображаемый внутри элемента, и синхронизирует изменения в режиме реального времени.

Предположим, у нас есть подобная простая структура с фоном элемента и движущимся содержимым:

<div id="bg" class="g-normal">
    <p>Content</p>
</div>

.g-normal {
    margin: auto;
    width: 200px;
    height: 200px;
    animation: change 5s infinite;
    background: linear-gradient(deeppink, yellowgreen);
}

p {
    animation: move 5s infinite;
}

@keyframes change {
    0% {
        filter: hue-rotate(0);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(150px, 150px);
    }
}

Его эффект примерно таков:

Предположим, что эта структура является содержимым определенного блока нашей страницы, и тогда мы можем использоватьbackground: -moz-element(#id)Таким образом, содержимое пользовательского интерфейса, нарисованное в этом элементе, полностью копируется в другой элемент, чтобы увидеть эффект.

мы добавляем элемент<div class="g-element-copy"></div>, который имитирует внутри этого элемента#bgСодержимое внутри:

<div id="bg" class="g-normal">
    <p>Content</p>
</div>
<div class="g-element-copy"></div>

.g-element-copy {
    margin: auto;
    width: 200px;
    height: 200px;
    // 核心代码
    background: -moz-element(#bg);
}

Он может полностью копировать пользовательский интерфейс, нарисованный в другом элементе, и может отслеживать изменения в реальном времени:

CodePen Demo -- -moz-element Demo(Firefox Only)

Репликация пользовательского интерфейса с использованием элемента в Firefox для использования в качестве фона элемента из матового стекла

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

и вышеbackground-attachment: fixedДля сравнения схемы мы по-прежнему накладываем слой фона через псевдоэлементы, но содержание фона изменилось с простой картинки на-moz-element()Скопируйте все содержимое пользовательского интерфейса.

Во-вторых, вышеприведенная схема, которую мы используемbackground-attachment: fixedВыровняйте положение фонового изображения и изображения, наложенного в псевдоэлементе.Здесь нам нужно использовать Javascript для выполнения простой операции, чтобы определить соответствующую позицию элемента фонового содержимого и вычислить величину выравнивания.

Взгляните на такое DEMO:

<div id="bg" class="bg">
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
</div>
<div class="g-glossy">frosted glass effect </div>
<div class="g-glossy-firefox"></div>

в,.g-glossyнаходится в нормальных условияхbackdrop-filterСовместим с нашими матовыми стеклянными элементами, в то время как.g-glossy-firefoxне совместимbackdrop-filter, нам нужно смоделировать элементы всего пользовательского интерфейса фона DOM, которые можно обнаружить с помощью функций CSS.CSS @supportВзять под контроль:

Основной код CSS:

.bg {
    // 整个页面的 DOM 结构
}

.g-glossy {
    position: fixed;
    width: 600px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.g-glossy-firefox {
    display: none;
}

@supports (background: -moz-element(#bg)) {
    .g-glossy-firefox {
        display: block;
        position: fixed;
        width: 600px;
        height: 300px;
        background: -moz-element(#bg) no-repeat;
        filter: blur(10px);
    }
}

Просто прочитайте это:

  1. для совместимыхbackdrop-filterиз,.g-glossyКод внутри вступит в силу напрямую, и.g-glossy-firefoxне будет показывать
  2. Для браузера Firefox, потому чтоbackdrop-filterобязательно несовместимы, поэтому.g-glossyвнутриbackdrop-filter: blur(10px)не вступит в силу и@supports (background: -moz-element(#bg))Стили внутри вступят в силу, в это время.g-glossy-firefoxбуду использоватьbackground: -moz-element(#bg) no-repeat;фиктивный идентификаторbgЭлементы

Конечно, здесь нам нужно использовать некоторый код JavaScript для расчета элементов нашего смоделированного пользовательского интерфейса страницы..g-glossy-firefoxпо сравнению с его имитацией#bgЭлемент, представляющий собой позиционное отклонение макета страницы:

$(function() {
        let blur = $('.g-glossy-firefox')[0].style;
        let offset = $('.g-glossy').eq(0).offset();

        function updateBlur() {
            blur.backgroundPosition = 
                `${-window.scrollX - offset.left}px ` + 
                `${-window.scrollY - offset.top}px`;
        }
        document.addEventListener('scroll', updateBlur, false), updateBlur();
});

Хорошо, пока мы можем добиться эффекта матового стекла в Firefox:

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

Эта схема есть в моей группе CSS,风海流Идея, предложенная одноклассником, очень гениальна, и он также полностью разработал этот план, вы можете нажать здесь, чтобы увидеть:Реализовать эффект «матового стекла» в строке заголовка на веб-страницах., эта статья также реорганизована и выпущена с его согласия.

Полный код вышеупомянутого эффекта вы можете нажать здесь:

CodePen Demo -- Firefox-совместимый сложный фоновый эффект матового стекла (матового стекла)

В заключение

Кратко о вышеизложенном:

  • вы можете использоватьbackdrop-filterОчень простая реализация эффекта матового стекла (frosted glass) для совместимых браузеров
  • на несовместимостьbackdrop-filterбраузер, если это просто фон, вы можете использоватьbackground-attachment: fixedСотрудничатьfilter: blur()имитировать
  • Для браузера Firefox вы также можете использоватьmoz-element()Сотрудничатьfilter: blur()Реализовать сложный фоновый эффект матового стекла
  • Для других браузеров, несовместимых с тремя вышеуказанными эффектами, элементы с эффектом матового стекла можно установить, установив что-то вродеbackground: rgba(255, 255, 255, 0.5)style, заставляя его вернуться к полупрозрачному эффекту, который также является очень разумным эффектом понижения и не вызовет ошибок

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

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

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

Категории