Last active
October 26, 2025 02:10
-
-
Save baslie/e15f564c634b1162f81d4d534a047fe0 to your computer and use it in GitHub Desktop.
Эффект Liquid Glass для шейпа Zero-блока Тильды
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- ********************************************************************** --> | |
| <!-- Эффект Liquid Glass для шейпа Zero-блока Тильды --> | |
| <!-- ********************************************************************** --> | |
| <!-- Создает реалистичный эффект жидкого стекла с размытием фона и --> | |
| <!-- полупрозрачностью. Применяется к любым элементам через CSS-класс. --> | |
| <!-- Обратите внимаение что border-radius у шейпа --> | |
| <!-- и «--uc-lg-border-radius» должны совпадать --> | |
| <!-- ********************************************************************** --> | |
| <style> | |
| /* Основной контейнер для Liquid Glass */ | |
| .uc-liquid-glass { | |
| /* CSS переменные с фоллбеками */ | |
| --uc-lg-border-radius: 20px; | |
| --uc-lg-blur-intensity: 3px; | |
| --uc-lg-tint-opacity: 0.25; | |
| --uc-lg-shadow-opacity: 0.2; | |
| --uc-lg-shine-intensity: 0.5; | |
| --uc-lg-fallback-bg: rgba(255, 255, 255, 0.8); /* Фоллбек для старых браузеров */ | |
| position: relative !important; | |
| overflow: hidden !important; | |
| border-radius: var(--uc-lg-border-radius, 20px) !important; | |
| /* Фоллбек фон для браузеров без backdrop-filter */ | |
| background: var(--uc-lg-fallback-bg) !important; | |
| /* Тень контейнера */ | |
| box-shadow: | |
| 0 6px 6px rgba(0, 0, 0, var(--uc-lg-shadow-opacity, 0.2)), | |
| 0 0 20px rgba(0, 0, 0, calc(var(--uc-lg-shadow-opacity, 0.2) * 0.5)) !important; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important; | |
| /* Фоллбек переходы для IE */ | |
| -ms-transition: all 0.4s ease !important; | |
| -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important; | |
| -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important; | |
| -o-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2) !important; | |
| } | |
| /* Фоллбек для браузеров без поддержки backdrop-filter */ | |
| .uc-liquid-glass.no-backdrop-filter { | |
| background: rgba(255, 255, 255, 0.9) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.3) !important; | |
| } | |
| /* Слой размытия фона — только для поддерживающих браузеров */ | |
| @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { | |
| .uc-liquid-glass { | |
| background: rgba(255, 255, 255, var(--uc-lg-tint-opacity, 0.25)) !important; | |
| } | |
| .uc-liquid-glass::before { | |
| content: '' !important; | |
| position: absolute !important; | |
| inset: 0 !important; | |
| z-index: 0 !important; | |
| /* Кроссбраузерный backdrop-filter */ | |
| -webkit-backdrop-filter: blur(var(--uc-lg-blur-intensity, 3px)) !important; | |
| backdrop-filter: blur(var(--uc-lg-blur-intensity, 3px)) !important; | |
| filter: url(#uc-glass-distortion) !important; | |
| border-radius: inherit !important; | |
| pointer-events: none !important; | |
| } | |
| .uc-liquid-glass::after { | |
| content: '' !important; | |
| position: absolute !important; | |
| inset: 0 !important; | |
| z-index: 1 !important; | |
| background: rgba(255, 255, 255, var(--uc-lg-tint-opacity, 0.25)) !important; | |
| border-radius: inherit !important; | |
| pointer-events: none !important; | |
| } | |
| } | |
| /* Слой с бликами */ | |
| .uc-liquid-glass .tn-atom { | |
| position: relative !important; | |
| z-index: 3 !important; | |
| background: transparent !important; | |
| } | |
| .uc-liquid-glass .tn-atom::before { | |
| content: '' !important; | |
| position: absolute !important; | |
| inset: 0 !important; | |
| z-index: 2 !important; | |
| box-shadow: | |
| inset 2px 2px 1px 0 rgba(255, 255, 255, var(--uc-lg-shine-intensity, 0.5)), | |
| inset -1px -1px 1px 1px rgba(255, 255, 255, var(--uc-lg-shine-intensity, 0.5)) !important; | |
| border-radius: inherit !important; | |
| pointer-events: none !important; | |
| } | |
| /* Интерактивные эффекты — кроссбраузерные */ | |
| /* | |
| .uc-liquid-glass:hover { | |
| transform: translateY(-2px) !important; | |
| -webkit-transform: translateY(-2px) !important; | |
| -moz-transform: translateY(-2px) !important; | |
| -ms-transform: translateY(-2px) !important; | |
| -o-transform: translateY(-2px) !important; | |
| box-shadow: | |
| 0 8px 12px rgba(0, 0, 0, calc(var(--uc-lg-shadow-opacity, 0.2) * 1.2)), | |
| 0 0 30px rgba(0, 0, 0, calc(var(--uc-lg-shadow-opacity, 0.2) * 0.7)) !important; | |
| } | |
| .uc-liquid-glass:active { | |
| transform: translateY(0px) scale(0.98) !important; | |
| -webkit-transform: translateY(0px) scale(0.98) !important; | |
| -moz-transform: translateY(0px) scale(0.98) !important; | |
| -ms-transform: translateY(0px) scale(0.98) !important; | |
| -o-transform: translateY(0px) scale(0.98) !important; | |
| } | |
| */ | |
| /* Фоллбек hover эффекты для старых браузеров без calc() */ | |
| /* | |
| .no-css-calc .uc-liquid-glass:hover { | |
| box-shadow: | |
| 0 8px 12px rgba(0, 0, 0, 0.24), | |
| 0 0 30px rgba(0, 0, 0, 0.14) !important; | |
| } | |
| */ | |
| /* Фоллбек для браузеров без transform */ | |
| /* | |
| .no-transforms .uc-liquid-glass:hover { | |
| margin-top: -2px !important; | |
| } | |
| .no-transforms .uc-liquid-glass:active { | |
| margin-top: 0px !important; | |
| transform: none !important; | |
| } | |
| */ | |
| /* SVG фильтр */ | |
| .uc-svg-filter { | |
| position: absolute !important; | |
| width: 0 !important; | |
| height: 0 !important; | |
| overflow: hidden !important; | |
| pointer-events: none !important; | |
| } | |
| </style> | |
| <!-- JavaScript для детекции поддержки --> | |
| <script> | |
| (function() { | |
| 'use strict'; | |
| // Функция проверки поддержки backdrop-filter | |
| function supportsBackdropFilter() { | |
| const testElement = document.createElement('div'); | |
| testElement.style.cssText = '-webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);'; | |
| return testElement.style.backdropFilter !== '' || testElement.style.webkitBackdropFilter !== ''; | |
| } | |
| // Функция проверки поддержки SVG фильтров | |
| function supportsSVGFilters() { | |
| try { | |
| return typeof SVGFEGaussianBlurElement !== 'undefined' && | |
| typeof document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur').setStdDeviation === 'function'; | |
| } catch (e) { | |
| return false; | |
| } | |
| } | |
| // Функция проверки поддержки CSS переменных | |
| function supportsCSSVariables() { | |
| return window.CSS && CSS.supports && CSS.supports('color', 'var(--fake-var)'); | |
| } | |
| // Функция проверки поддержки calc() | |
| function supportsCalc() { | |
| const testElement = document.createElement('div'); | |
| testElement.style.cssText = 'width: calc(1px + 1px);'; | |
| return testElement.style.width === 'calc(2px)' || testElement.style.width === '2px'; | |
| } | |
| // Функция проверки поддержки transforms | |
| function supportsTransforms() { | |
| const testElement = document.createElement('div'); | |
| testElement.style.cssText = 'transform: translateX(1px);'; | |
| return testElement.style.transform !== '' || | |
| testElement.style.webkitTransform !== '' || | |
| testElement.style.mozTransform !== '' || | |
| testElement.style.msTransform !== ''; | |
| } | |
| // Ждем загрузки DOM | |
| function init() { | |
| const elements = document.querySelectorAll('.uc-liquid-glass'); | |
| const documentElement = document.documentElement; | |
| // Добавляем классы-детекторы на html | |
| if (!supportsBackdropFilter()) { | |
| elements.forEach(function(el) { | |
| el.classList.add('no-backdrop-filter'); | |
| }); | |
| } | |
| if (!supportsCalc()) { | |
| documentElement.classList.add('no-css-calc'); | |
| } | |
| if (!supportsTransforms()) { | |
| documentElement.classList.add('no-transforms'); | |
| } | |
| if (!supportsSVGFilters()) { | |
| // Убираем SVG фильтр если не поддерживается | |
| const svgFilter = document.querySelector('.uc-svg-filter'); | |
| if (svgFilter) { | |
| svgFilter.style.display = 'none'; | |
| } | |
| } | |
| // Фоллбек для CSS переменных (для IE) | |
| if (!supportsCSSVariables()) { | |
| elements.forEach(function(el) { | |
| el.style.borderRadius = '20px'; | |
| el.style.background = 'rgba(255, 255, 255, 0.9)'; | |
| el.style.boxShadow = '0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)'; | |
| // Добавляем hover эффекты через JS для IE | |
| /* | |
| el.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-2px)'; | |
| this.style.boxShadow = '0 8px 12px rgba(0, 0, 0, 0.24), 0 0 30px rgba(0, 0, 0, 0.14)'; | |
| }); | |
| el.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = '0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)'; | |
| }); | |
| el.addEventListener('mousedown', function() { | |
| this.style.transform = 'translateY(0px) scale(0.98)'; | |
| }); | |
| el.addEventListener('mouseup', function() { | |
| this.style.transform = 'translateY(-2px)'; | |
| }); | |
| */ | |
| }); | |
| } | |
| } | |
| // Запуск после загрузки DOM | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', init); | |
| } else { | |
| init(); | |
| } | |
| })(); | |
| </script> | |
| <!-- SVG фильтр --> | |
| <svg class="uc-svg-filter"> | |
| <filter id="uc-glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox"> | |
| <feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5" result="turbulence" /> | |
| <feComponentTransfer in="turbulence" result="mapped"> | |
| <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" /> | |
| <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" /> | |
| <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" /> | |
| </feComponentTransfer> | |
| <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" /> | |
| <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight"> | |
| <fePointLight x="-200" y="-200" z="300" /> | |
| </feSpecularLighting> | |
| <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" /> | |
| <feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G" /> | |
| </filter> | |
| </svg> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hahahaha 😂