@casoon/dragonfly/effects/visual/glass.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Glaseffekte
 * 
 * Diese Datei enthält verschiedene Glaseffekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer components {
    .glass {
        backdrop-filter: blur(var(--spacing-2-5));
        background: rgb(255 255 255 / 10%);
        border: var(--border-width) solid rgb(255 255 255 / 20%);
        box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
    }

    .glass-sm {
        backdrop-filter: blur(var(--spacing-1));
        background: rgb(255 255 255 / 5%);
        border: var(--border-width) solid rgb(255 255 255 / 10%);
        box-shadow: 0 var(--spacing-1) var(--spacing-4) 0 rgb(31 38 135 / 20%);
    }

    .glass-lg {
        backdrop-filter: blur(var(--spacing-1)(--spacing-1));
        background: rgb(255 255 255 / 15%);
        border: var(--border-width) solid rgb(255 255 255 / 30%);
        box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);
    }

    .glass-morph {
        backdrop-filter: blur(var(--spacing-2-5));
        background: rgb(255 255 255 / 10%);
        border: var(--border-width) solid rgb(255 255 255 / 20%);
        border-radius: var(--spacing-5);
        box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
    }

    .glass-border {
        backdrop-filter: blur(var(--spacing-2-5));
        background: rgb(255 255 255 / 10%);
        border: var(--border-width) solid rgb(255 255 255 / 20%);
        box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
        position: relative;
    }

    .glass-border::before {
        background: linear-gradient(45deg, rgb(255 255 255 / 10%), rgb(255 255 255 / 30%));
        border-radius: inherit;
        content: '';
        inset: calc(-1 * var(--border-width-thick));
        position: absolute;
        z-index: -1;
    }

    .glass-shadow {
        backdrop-filter: blur(var(--spacing-2-5));
        background: rgb(255 255 255 / 10%);
        border: var(--border-width) solid rgb(255 255 255 / 20%);
        box-shadow: 
            0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%),
            0 0 0 var(--border-width) rgb(255 255 255 / 10%);
    }

    .glass-hover {
        backdrop-filter: blur(var(--spacing-2-5));
        background: rgb(255 255 255 / 10%);
        border: var(--border-width) solid rgb(255 255 255 / 20%);
        box-shadow: 0 var(--spacing-2) var(--spacing-3)(--border-width-thick) 0 rgb(31 38 135 / 37%);
        transition: all 0.3s ease;
    }

    .glass-hover:hover {
        background: rgb(255 255 255 / 15%);
        border: var(--border-width) solid rgb(255 255 255 / 30%);
        box-shadow: 0 var(--spacing-1)(--border-width-thick) var(--spacing-4)(--spacing-2) 0 rgb(31 38 135 / 50%);
    }

    .glass-blur {
        backdrop-filter: blur(var(--spacing-2-5));
        background: rgb(255 255 255 / 10%);
    }

    .glass-blur-sm {
        backdrop-filter: blur(var(--spacing-1));
    }

    .glass-blur-lg {
        backdrop-filter: blur(var(--spacing-1)(--spacing-1));
    }

    .glass-color-primary {
        background: rgb(59 130 246 / 10%);
        border-color: rgb(59 130 246 / 20%);
    }

    .glass-color-secondary {
        background: rgb(107 114 128 / 10%);
        border-color: rgb(107 114 128 / 20%);
    }

    .glass-color-success {
        background: rgb(16 185 129 / 10%);
        border-color: rgb(16 185 129 / 20%);
    }

    .glass-color-error {
        background: rgb(239 68 68 / 10%);
        border-color: rgb(239 68 68 / 20%);
    }

    .glass-color-warning {
        background: rgb(245 158 11 / 10%);
        border-color: rgb(245 158 11 / 20%);
    }

    .glass-color-info {
        background: rgb(6 182 212 / 10%);
        border-color: rgb(6 182 212 / 20%);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .glass-hover {
            transition: var(--transition-none);
        }
    }
}