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

style(glass): лёгкое матирование поверх искажения

Browse Source 
- панели: url(#displacement) blur(3px)
- кнопки: url(#displacement-btn) blur(2px)
- видна волна стекла + мягкое стекло, без глухой матовости
This commit is contained in:
root committed 2026-09-24 15:38:37 +02:00
1 parent 15bf0e3293
commit 94de132cf0
1 file changed
+12 -12
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+12 -12
View File
@@ -114,9 +114,9 @@ html[data-theme="dark"] {
inset 0 -1px 0 color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 18%, transparent); inset 0 -1px 0 color-mix(in srgb, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)) 18%, transparent);
--btn-primary-backdrop: blur(16px) saturate(135%); --btn-primary-backdrop: blur(16px) saturate(135%);
--btn-primary-backdrop-hover: blur(18px) saturate(140%); --btn-primary-backdrop-hover: blur(18px) saturate(140%);
/* Liquid Glass (Хабр): чистое искажение без матовости — только Chromium */ /* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--btn-primary-backdrop-lg: url(#liquid-glass-displacement-btn); --btn-primary-backdrop-lg: url(#liquid-glass-displacement-btn) blur(2px);
--btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement-btn); --btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement-btn) blur(2px);
/* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */ /* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
--btn-primary-bg-lg: radial-gradient( --btn-primary-bg-lg: radial-gradient(
circle at 0% 0%, circle at 0% 0%,
@@ -220,9 +220,9 @@ html[data-theme="light"] {
inset 0 -1px 0 color-mix(in srgb, var(--accent) 32%, hsl(0 0% 0%) 68%); inset 0 -1px 0 color-mix(in srgb, var(--accent) 32%, hsl(0 0% 0%) 68%);
--btn-primary-backdrop: blur(10px) saturate(142%); --btn-primary-backdrop: blur(10px) saturate(142%);
--btn-primary-backdrop-hover: blur(11px) saturate(148%); --btn-primary-backdrop-hover: blur(11px) saturate(148%);
/* Liquid Glass (Хабр): чистое искажение без матовости — только Chromium */ /* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--btn-primary-backdrop-lg: url(#liquid-glass-displacement-btn); --btn-primary-backdrop-lg: url(#liquid-glass-displacement-btn) blur(2px);
--btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement-btn); --btn-primary-backdrop-hover-lg: url(#liquid-glass-displacement-btn) blur(2px);
/* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */ /* Полупрозрачный акцентный фон, чтобы displacement был виден (Liquid Glass) */
--btn-primary-bg-lg: radial-gradient( --btn-primary-bg-lg: radial-gradient(
circle at 0% 0%, circle at 0% 0%,
@@ -5139,9 +5139,9 @@ html[data-theme="dark"] {
inset 0 1px 0 hsla(0, 0%, 100%, 0.09); inset 0 1px 0 hsla(0, 0%, 100%, 0.09);
--v12-glass-neutral-filter: blur(16px) saturate(118%); --v12-glass-neutral-filter: blur(16px) saturate(118%);
--v12-glass-neutral-filter-elevated: blur(18px) saturate(125%); --v12-glass-neutral-filter-elevated: blur(18px) saturate(125%);
/* Liquid Glass (Хабр): чистое искажение без матовости — только Chromium */ /* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement); --v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(3px);
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement); --v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(3px);
} }
html[data-theme="light"] { html[data-theme="light"] {
@@ -5157,9 +5157,9 @@ html[data-theme="light"] {
inset 0 -1px 0 hsla(0, 0%, 0%, 0.04); inset 0 -1px 0 hsla(0, 0%, 0%, 0.04);
--v12-glass-neutral-filter: blur(12px) saturate(124%); --v12-glass-neutral-filter: blur(12px) saturate(124%);
--v12-glass-neutral-filter-elevated: blur(14px) saturate(130%); --v12-glass-neutral-filter-elevated: blur(14px) saturate(130%);
/* Liquid Glass (Хабр): чистое искажение без матовости — только Chromium */ /* Liquid Glass (Хабр): искажение + лёгкое матирование — только Chromium */
--v12-glass-neutral-filter-lg: url(#liquid-glass-displacement); --v12-glass-neutral-filter-lg: url(#liquid-glass-displacement) blur(3px);
--v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement); --v12-glass-neutral-filter-elevated-lg: url(#liquid-glass-displacement) blur(3px);
} }
html[data-theme="dark"] .header--scrolled .header__inner, html[data-theme="dark"] .header--scrolled .header__inner,