@casoon/dragonfly/effects/layout-effects/overlays.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.

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

@layer components {
    .overlay {
        position: relative;
    }

    .overlay::after {
        background: var(--overlay-color, rgb(0 0 0 / 50%));
        content: '';
        inset: 0;
        opacity: var(--opacity-0);
        position: absolute;
        transition: opacity var(--transition-normal);
    }

    .overlay:hover::after {
        opacity: var(--opacity-100);
    }

    .overlay-gradient::after {
        background: linear-gradient(
            to bottom,
            transparent,
            var(--overlay-color, rgb(0 0 0 / 70%))
        );
    }

    .overlay-blur::after {
        backdrop-filter: blur(var(--spacing-1));
        background: var(--overlay-color, rgb(0 0 0 / 30%));
    }

    .overlay-shine::after {
        background: linear-gradient(
            45deg,
            transparent,
            var(--overlay-color, rgb(255 255 255 / 20%)),
            transparent
        );
    }

    .overlay-texture::after {
        background-blend-mode: overlay;
        background-color: var(--overlay-color, rgb(0 0 0 / 50%));
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)'/%3E%3C/svg%3E");
    }

    .overlay-gradient-horizontal::after {
        background: linear-gradient(
            to right,
            transparent,
            var(--overlay-color, rgb(0 0 0 / 70%))
        );
    }

    .overlay-gradient-diagonal::after {
        background: linear-gradient(
            135deg,
            transparent,
            var(--overlay-color, rgb(0 0 0 / 70%))
        );
    }

    .overlay-gradient-radial::after {
        background: radial-gradient(
            circle at center,
            transparent,
            var(--overlay-color, rgb(0 0 0 / 70%))
        );
    }

    .overlay-gradient-multi::after {
        background: linear-gradient(
            to bottom,
            transparent,
            rgb(100 0 200 / 0.4),
            var(--overlay-color, rgb(0 0 0 / 70%))
        );
    }

    .overlay-gradient-conic::after {
        background: conic-gradient(
            from 0deg at 50 50,
            transparent,
            var(--overlay-color, rgb(0 0 0 / 30%)),
            transparent
        );
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .overlay::after,
        .overlay-gradient::after,
        .overlay-blur::after,
        .overlay-shine::after,
        .overlay-texture::after,
        .overlay-gradient-horizontal::after,
        .overlay-gradient-diagonal::after,
        .overlay-gradient-radial::after,
        .overlay-gradient-multi::after,
        .overlay-gradient-conic::after {
            transition: var(--transition-none);
        }
    }
}