@casoon/dragonfly/effects/typography/text-effects.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.

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

@keyframes text-shine {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200 0;
    }
}

@layer utilities {
    .text-shadow-sm {
        text-shadow: 0 var(--border-width) var(--border-width-thick) rgb(0 0 0 / 10%);
    }

    .text-shadow-md {
        text-shadow: 0 var(--border-width-thick) var(--spacing-1) rgb(0 0 0 / 10%);
    }

    .text-shadow-lg {
        text-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);
    }

    .text-shadow-glow {
        text-shadow: 0 0 var(--spacing-2-5) var(--text-glow-color, currentColor);
    }

    .text-shadow-neon {
        text-shadow: 
            0 0 var(--spacing-1) var(--text-neon-color, currentColor),
            0 0 var(--spacing-2-5) var(--text-neon-color, currentColor),
            0 0 var(--spacing-5) var(--text-neon-color, currentColor);
    }

    .text-stroke-sm {
        -webkit-text-stroke: var(--border-width) var(--text-stroke-color, currentColor);
    }

    .text-stroke-md {
        -webkit-text-stroke: var(--border-width-thick) var(--text-stroke-color, currentColor);
    }

    .text-stroke-lg {
        -webkit-text-stroke: var(--spacing-1) var(--text-stroke-color, currentColor);
    }

    .text-gradient {
        background: var(--text-gradient, linear-gradient(45deg, #ff6b6b, #4ecdc4));
        background-clip: text;
        color: transparent;
    }

    .text-shine {
        animation: text-shine 3s linear infinite;
        background: linear-gradient(
            90deg,
            transparent 0,
            rgb(255 255 255 / 20%) 50,
            transparent 100
        );
        background-clip: text;
        background-size: 200% 100;
        color: transparent;
    }

    .text-blur-sm {
        filter: blur(var(--border-width));
    }

    .text-blur-md {
        filter: blur(var(--border-width-thick));
    }

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

    .text-outline {
        text-shadow: 
            -var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),
            var(--border-width) -var(--border-width) 0 var(--text-outline-color, currentColor),
            -var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor),
            var(--border-width) var(--border-width) 0 var(--text-outline-color, currentColor);
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer utilities {
        .text-shine {
            animation: var(--animation-none);
        }
    }
}