@casoon/dragonfly/effects/visual/vignette.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.

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

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

    .vignette::after {
        background: radial-gradient(
            circle at center,
            transparent 0,
            rgb(0 0 0 / 30%) 100
        );
        content: '';
        inset: 0;
        pointer-events: none;
        position: absolute;
    }

    .vignette-strong::after {
        background: radial-gradient(
            circle at center,
            transparent 0,
            rgb(0 0 0 / 50%) 100
        );
    }

    .vignette-soft::after {
        background: radial-gradient(
            circle at center,
            transparent 0,
            rgb(0 0 0 / 20%) 100
        );
    }

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

    .vignette-top::after {
        background: radial-gradient(
            circle at top,
            transparent 0,
            rgb(0 0 0 / 30%) 100
        );
    }

    .vignette-bottom::after {
        background: radial-gradient(
            circle at bottom,
            transparent 0,
            rgb(0 0 0 / 30%) 100
        );
    }

    .vignette-hover:hover::after {
        opacity: var(--opacity-80);
        transition: opacity var(--transition-normal);
    }
}

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