Что такое стеклянный морфизм? Как фоновый фильтр создает матовое стекло в CSS

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

В этом руководстве объясняется CSS, который заставляет эффект работать, почему каждое из пяти свойств присутствует, как сохранить читаемость текста, когда фон продолжает меняться, сколько это стоит при рендеринге производительности и как изящно отступить. в обработанных примерах используется вывод Генератор CSS стекломорфизма Toolz, который строит код из слайдеров и предварительного просмотра в реальном времени.

TL;DR: Стекломорфизм - это стиль пользовательского интерфейса, где панель похожа на матовое стекло: полупрозрачный фон плюс backdrop-filter: blur() так что содержание за ним показывает через мягко, обычно законченный с 1px полупрозрачной рамкой и мягкой тенью, Он нуждается в двух вещах, чтобы быть видимым: заливка, которая частично прозрачная и что-то красочное за панелью Текстовый контраст меняется с тем, что проходит под ним, поэтому проверить его на самых ярких и темных частях реального фона.The Генератор стекломорфизма CSS пишет полный блок, включая -webkit- префикс, на стороне клиента, бесплатно, без регистрации.

Что такое стеклянный морфизм в CSS?

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

Ключевое свойство backdrop-filter, определенный в W3C Модуль эффектов фильтра, уровень 2. Он выполняет те же функции фильтра, что и filter (blur(), saturate(), brightness() а остальные) но применяет их к области позади элемента, а не к самому элементу. что одно различие - это то, что делает эффект возможным.

Вот полный блок, который генератор создает для своего предустановленного набора Frosted:

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);

Шесть строк, и у каждой есть работа.

фильтр против фонового фильтра: в чем разница?

filter изменяет способ рисования самого элемента, включая его текст и дочерние элементы. backdrop-filter меняет то, что проявляется через элемент сзади, и оставляет элемент & #39;s собственного контента острым.

Собственность	Что это влияет	Результат примера размытия	Типичное использование
filter: blur(10px)	Стихия и все ее дети	Карточка и ее текст размыты	Эффекты изображения, отключенные состояния, загрузка заполнителей
backdrop-filter: blur(10px)	Что бы ни было нарисовано за стихией	Карта остается острой, фон, видимый сквозь нее, размыт	Панели из матового стекла, размытые жатки, модальные накладки

Если вы размыли карту filter и интересно, почему заголовок нечитаем, вы использовали неправильное свойство. The Генератор фильтров CSS покрывает filter сторона пары.

Как работает каждая линия стеклянного CSS?

Фон это оттенок, а его альфа-канал - самое важное число в блоке. rgba(255, 255, 255, 0.2) является белым при 20% непрозрачности. при альфа 1 панель является твердым и ничего не показывает сквозь, поэтому размытие фона невидимо. при альфа 0 нет поверхности вообще. большинство пригодных для использования стекла находится между 0.1 и 0.4.

В генераторе это ползунок Прозрачность, и для именования нужно отметить: ползунок задаёт непрозрачность заполнения, поэтому более высокое значение Прозрачности делает панель более твёрдой Прозрачность 20% пишет альфа 0,2, а 40% - 0,4.

Фильтр фона делает глазурь. blur(10px) устанавливает радиус размытия, приложенного к тому, что находится позади. saturate(120%) повышает цвет этого размытого фона на 20%, что противодействует серому, размытому виду, который имеет тенденцию создавать размытие плюс белый оттенок. Ползунок Blur генератора & #39;s работает от 0 до 40px, а насыщенность - от 100% до 200%.

Префиксная копия существует потому, что старые выпуски Safari только понимают -webkit-backdrop-filter. Написание обеих строк с одинаковыми значениями ничего не стоит и охватывает эти версии.

Радиус границы закругляет углы, от 0 до 50px в генераторе. размытие подрезается к округлой форме.

Граница является 1px линия белого цвета при 18% непрозрачности. он ловит глаз как изюминку на стеклянной кромке и имеет наибольшее значение на более темных фонах, где граница панели в противном случае растворилась бы. генератор's Пограничный флажок включает или выключает; цвет и ширина фиксированы.

Тень 0 8px 32px rgba(0, 0, 0, 0.12) это широкая, слабая тень, отделяющая панель от страницы. Если вы хотите настроить его, теневой путеводитель коробки объясняет смещение, размытие и распространение по глубине.

Что производят предустановки генератора?

Пресеты являются отправными точками, а не готовыми конструкциями. все пять используют радиус 16px, и все, кроме Subtle, включают границу.

Пресет	предыстор	Фильтр фонов	Граница	Лучше всего
Замороженный	rgba(255, 255, 255, 0.2)	blur(10px) saturate(120%)	На	Красочные градиенты и фотографии
Свет	rgba(255, 255, 255, 0.35)	blur(6px) saturate(130%)	На	Занятые изображения, где текст нуждается в большей поддержке
Темный	rgba(15, 23, 42, 0.25)	blur(12px) saturate(120%)	На	Световые фотографии, белый текст
Яркий	rgba(139, 92, 246, 0.15)	blur(16px) saturate(180%)	На	Темные или насыщенные разделы героев
Тонкий	rgba(255, 255, 255, 0.12)	blur(4px) saturate(120%)	Выключить	Маленькие чипсы и значки

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

Почему не работает мой фоновый фильтр?

Когда кажется, что размытие ничего не дает, причиной почти всегда является одно из них.

1. Фон непрозрачный. Твердое тело background: #fff или альфа 1 скрывает фон полностью. опустите альфа.
2. За ним нечего размывать. На плоской одноцветной странице размытый плоский цвет выглядит идентично плоскому цвету Стекло нуждается в градиенте, фотографии или формы позади него. генератор & #39;s предварительный просмотр намеренно сидит над градиентом с цветными кругами по этой причине; the Градиентный справочник CSS является хорошим источником фона, который хорошо показывает эффект.
3. Префикс отсутствует. Старые версии Safari игнорируют свойство непрефиксации.
4. Предк ограничивает то, что может видеть фильтр. В текущей спецификации Filter Effects некоторые свойства предка, например его собственные filter, ан opacity ниже 1 или другого backdrop-filter, запустить новый корень фона, и размытие только образцы содержимого внутри этого корня. если стекло находится внутри обертки с одним из них, переместить эффект или свойство.
5. Панель не имеет размера или полностью прозрачна другим способом. Элемент нулевой высоты или opacity: 0 на панели скрывается эффект вместе с панелью.

Как сохранить читаемость текста на стеклянной панели?

Читаемое стекло требует больше работы, чем любая другая часть стиля, потому что цвет текста фиксирован, а фон под панелью - нет. The Минимальный контраст WCAG 2.2 просит соотношение не менее 4,5:1 для обычного текста и 3:1 для большого текста. на полупрозрачной панели это соотношение зависит от того, что находится за каждой частью панели в этот момент.

Работающий пример делает этот бетон. коэффициент контрастности рассчитывается на основе относительной яркости двух цветов, (L1 + 0,05)/(L2 + 0,05). Стекольная заливка композитов на фоне: каждый канал становится альфа-кратно заполнения плюс (1 минус альфа) раз фон. Размытие в среднем соседние пиксели, но оставляет область и #39;s средний цвет примерно там, где он был, поэтому на большой площади одного цвета композит является справедливой оценкой.

Заполнять	Цвет фона	Композитный цвет	Контраст с белым текстом
Морозный, белый при 0,2	Синий #60A5FA	о rgb(128, 183, 251)	о 2,1:1
Морозный, белый при 0,2	Желтый #FBBF24	о rgb(252, 204, 80)	около 1,5:1
Темный, rgba(15, 23, 42, 0.25)	Синий #60A5FA	о rgb(76, 130, 198)	около 4,0:1

Возьмите первую строку. красный - 0,2 х 255 + 0,8 х 96 = 127,8, зеленый - 0,2 х 255 + 0,8 х 165 = 183, синий - 0,2 х 255 + 0,8 х 250 = 251. Этот цвет и #39; относительная яркость работает около 0,454, а белый и #39;s - 1, поэтому соотношение составляет 1,05/0,504, около 2,1:1. Та же панель над желтой частью фона падает примерно до 1,5:1. Ни один из них не проходит для основного текста, а темное предустановление над синим достигает примерно 4,0:1: достаточно для большого текста, еще меньше 4,5:1 для небольшого текста.

Практические исправления в порядке эффективности:

• Поднимите альфа-заполнение. Перемещение прозрачности с 20% до 40% скрывает большую часть фона и сужает диапазон колебаний контраста.
• Потемните оттенок для легкого текста, или осветлить его для темного текста Темное стекло с белым текстом держится на гораздо большем количестве фона, чем белое стекло с белым текстом.
• Увеличьте размытие. Он сглаживает высококонтрастную деталь, поэтому тонкая белая линия за буквой ее не прорезает.
• Добавить текстовую тень в крайнем случае для рубрик. The генератор текстовых теней делает мягкий быстро.
• Испытание на крайностях. Проверьте контраст в самых ярких и темных областях, на которых может сидеть панель, с помощью проверка контрастности цвета, не в одном удобном месте.

Генератор's скопированный CSS покрывает только поверхность стекла. белый текст в его предварительном просмотре не является частью вывода, поэтому установите color на своей стихии сам.

Фоновый фильтр вредит производительности?

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

Руководящие принципы, которые держат его под контролем:

• Держите стеклянные панели скромными в размерах. матовое наложение с полным видом стоит гораздо дороже, чем карта.
• Предпочитайте меньшие радиусы размытия. стоимость растет с радиусом, и после примерно 20px визуальная разница невелика.
• Избегайте анимации самого значения размытия. Анимировать opacity или transform панели вместо.
• Будьте осторожны с липкими заголовками над контентом с длинной прокруткой, которые повторно размываются на каждом кадре прокрутки. тестируйте на настоящем телефоне среднего класса.

Как добавить запасной вариант для браузеров или пользователей, которым он нужен?

Текущие версии Chrome, Edge, Firefox и Safari поддерживают все backdrop-filter. Очень старые браузеры игнорируют его и показывают полупрозрачную заливку без размытия, которая при низкой альфа может оставить текст на занятом фоне. два небольших добавления делают эффект ухудшающимся хорошо. вы можете проверить текущую таблицу поддержки на Страница фонового фильтра MDN's, йо-

.glass {
  /* Fallback: a more solid fill for browsers without backdrop-filter */
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

выше @supports block применяет только полупрозрачную версию, в которой существует размытие. The prefers-reduced-transparency медиа-функция, определенная в Медиа-запросы 5-го уровня, позволяет пользователям, которые просили их операционную систему о меньшей прозрачности, получить твердую панель. поддержка браузером для этой медиа функции все еще частичная, поэтому рассматривать ее как улучшение там, где это возможно, а не как единственную защиту.

Стеклянный морфизм против нейморфизма против плоского дизайна

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

Стиль	Как делается поверхность	Основной CSS	сила	Основной риск
Стекломорфизм	Прозрачная заливка плюс размытие фона	background с альфа, backdrop-filter	Глубина и контекст с фона	Контраст варьируется, размытие требует производительности
Нейморфизм	Тот же цвет, что и страница, приподнятая или прижатая парными тенями	Два box-shadow слои	Мягкое, тактильное управление	Очень низкий контраст между управлением и страницей
Плоский	Твердые наполнители, без глубины	background	Быстро и предсказуемо	Может чувствовать себя ясно
Высота в материальном стиле	Твердая начинка с уровнями глубины тени	box-shadow	Четкая иерархия	Меньше атмосферного

Если мягкий, экструдированный вид ближе к тому, что вы хотите, генератор нейморфизма строит парные тени Многие интерфейсы смешивают стили: стекло для плавающей панели навигации над изображением героя, плоские карты для плотного контента под ним.

Как построить стеклянную карту, начинай до конца

1. откройте генератор CSS из матового стекла и выберите предустановку, ближайшую к вашему фону: темную для легких фотографий, матовую или светлую для красочных градиентов.
2. Установите размытие достаточно высоко, чтобы детали фона не конкурировали с текстом, обычно от 8 до 16px.
3. Установите прозрачность. Начните с 20% и повышайте его, пока ваш текст не пройдет контраст над самой жесткой частью фона.
4. Выберите оттенок с помощью средства для сбора цвета. оттенок, нарисованный на фоне & #39;s собственная палитра выглядит более естественно, чем чистый белый.
5. Настройте радиус, чтобы он соответствовал остальным компонентам, и сохраните границу на темном фоне.
6. Нажмите Копировать CSS и вставьте блок в класс карты Добавить color и набивка себя.
7. Заверните блок в @supports резервная копия выше, если вы поддерживаете старые браузеры.

Все в генераторе работает в вашем браузере, поэтому ничего не загружается и продолжает работать в автономном режиме после загрузки страницы. Для соответствующих инструментов поверхности и эффекта Концентратор инструментов CSS перечисляет градиенты, тени, фильтры и переходы в одном месте.