admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(glass): Liquid Glass эффект через SVG displacement-фильтр (по статье Хабра)

Browse Source 
- PNG карта мелкого равномерного шума (public/assets/liquid-glass/displacement.png)
- инлайн SVG feDisplacementMap инъецируется во все страницы сборщиком (build-pages.mjs)
- glass-neutral + шапка/панели/FAB/overflow получают url(#filter) blur в Chromium
- Safari/Firefox: детект через @supports not (hanging-punctuation:first), остаётся чистый blur
- токены --v12-glass-neutral-filter-lg / -elevated-lg для обеих тем
This commit is contained in:
root committed 2026-09-24 15:14:55 +02:00
1 parent e3acfa072c
commit 5fd8324b47
41 files changed
+535 -137
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/css/main.css
+37
View File
@@ -5111,6 +5111,9 @@ html[data-theme="dark"] {
inset 0 1px 0 hsla(0, 0%, 100%, 0.09);
--v12-glass-neutral-filter: blur(16px) saturate(118%);
--v12-glass-neutral-filter-elevated: blur(18px) saturate(125%);
/* Liquid Glass (Хабр): displacement + blur — только для Chromium */
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(15px) saturate(118%);
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(17px) saturate(125%);
}
html[data-theme="light"] {
@@ -5126,6 +5129,9 @@ html[data-theme="light"] {
inset 0 -1px 0 hsla(0, 0%, 0%, 0.04);
--v12-glass-neutral-filter: blur(12px) saturate(124%);
--v12-glass-neutral-filter-elevated: blur(14px) saturate(130%);
/* Liquid Glass (Хабр): displacement + blur — только для Chromium */
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(11px) saturate(124%);
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(13px) saturate(130%);
}
html[data-theme="dark"] .header--scrolled .header__inner,
@@ -5164,6 +5170,37 @@ html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible {
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated);
}
/* Liquid Glass (Хабр): Chromium-only displacement.
Safari/Firefox НЕ рендерят url()-фильтр в backdrop-filter — остаётся чистый blur.
Детект: Chrome не поддерживает hanging-punctuation, Safari/Firefox — поддерживают. */
@supports not (hanging-punctuation: first) {
/* Базовый (не-elevated) слой — только .glass-neutral */
html[data-theme="dark"] .glass-neutral,
html[data-theme="light"] .glass-neutral {
backdrop-filter: var(--v12-glass-neutral-filter-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-lg);
}
/* Elevated-слой: шапка, панели, FAB при наведении, overflow-меню */
html[data-theme="dark"] .header--scrolled .header__inner,
html[data-theme="light"] .header--scrolled .header__inner,
html[data-theme="dark"] .theme-picker__panel.glass-neutral,
html[data-theme="dark"] .cookie-notice.glass-neutral,
html[data-theme="light"] .theme-picker__panel.glass-neutral,
html[data-theme="light"] .cookie-notice.glass-neutral,
html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):hover,
html[data-theme="dark"] .fab.glass-neutral:not(.fab--primary):focus-visible,
html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):hover,
html[data-theme="light"] .fab.glass-neutral:not(.fab--primary):focus-visible,
html[data-theme="dark"] .nav-more__dock,
html[data-theme="light"] .nav-more__dock,
html[data-theme="dark"] #nav-more-menu-floating,
html[data-theme="light"] #nav-more-menu-floating {
backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
-webkit-backdrop-filter: var(--v12-glass-neutral-filter-elevated-lg);
}
}
html[data-theme="dark"] .nav-more__dock,
html[data-theme="light"] .nav-more__dock,
html[data-theme="dark"] #nav-more-menu-floating,