Как реализовать эффект, подобный Liquid Glass, при помощи CSS без JavaScript и шейдеров

[Nexoic]

Если в ios 27 уберут стекло - снова на обычные блоки переделывать ?

[artemsnite]

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

[Kenya-West]

Вы не поняли. Он про хомячков.

Или, может, я его неправильно понял. Может, он имел в виду "дурной пример заразителен".

[jarkevithwlad]

видел разные реализации но как по мне самый красивый вариант тут

[artemsnite]

В статье рассказывается о том, как это сделать без javascript. В Вашем примере используется WebGL; на npm уже есть много модулей с реализацией такого метода рендера жидкого стекла. Про возможность удобной кастомизации - да, это плюс шейдеров

[DmitryOlkhovoi]

нормально, прям веб лупа для зумеров

[ImagineTables]

Спасибо за описание приёма. Маленькая придирка: «библиотека» SVG в DOM'е (как это называю я, не пользующийся компонентами), на которую надо ссылаться по идентификаторам — это всё-таки не чистый CSS, как обещает заголовок. Но увы, периодически это бывает нужно из-за диспаритета между SVG и CSS. Не только фильтры, но даже какой-нибудь stroke с формой cap'ов без SVG не сделать.

[artemsnite]

Да, к сожалению, без SVG некоторые эффекты (фильтры, те же cap'ы) пока действительно не реализовать только стилями. Но задача была показать, как добиться эффекта без JS, и в этом смысле подход всё же остаётся максимально "чистым".

[DumpManager]

Не хватает скринов, а так отлично

[mrLexndr]

Спасибо, ваше решение понравилось. Единственное, в вашем примере все-таки используется JS. А можно все перенести в CSS, если делать проверку на https://caniuse.com/css-hanging-punctuation, которую пока что поддерживают только Safari-подобные браузеры

.bg-liquid-glass{
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
...
}
@supports not (hanging-punctuation:first){
.bg-liquid-glass{
backdrop-filter:url(#displacementFilter) blur(2px);
-webkit-backdrop-filter:url(#displacementFilter) blur(2px)
}
}

[artemsnite]

Здравствуйте! Спасибо за комментарий, поправил пост