liquid-glass-effect.html

Эффект Liquid Glass для шейпа Zero-блока Тильды

<!-- ********************************************************************** -->
<!-- Эффект 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>