Hallo, Besucher der Thread wurde 561 aufgerufen und enthält 0 Antworten

letzter Beitrag von Belarus am

[CSS] Animierter Text Effeckt

Aktiviere jetzt die 2-Faktor-Authentisierung für deinen Account und erhalte die Trophäe Auf der sicheren Seite.

    Hallo,


    nachfolgend einmal eine Möglichkeit einen Text mit puren CSS und ohne JS zu animieren ;)


    Features

    • Pures CSS
    • Einfache Integration
    • auch als Button umsetzbar





    Demo


    Codepen.io: Animierter Text Effeckt

    Quellcode

    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.
    Dieser BBCode ist nur für Mitglieder sichtbar! - Um den BBCode nutzen zu können Loggen Sie sich bitte ein oder Registrieren Sie sich.

    Hinweis:

    Dieser Effekt funktioniert bisher leider nur auf schwarzen Hintergrund!!! An einer Lösung wird jedoch gearbeitet.

    Benutzung

    1. In der Zeile background: linear-gradient(45deg, red, blue); die Farben zum Farbverlauf des Textes anpassen.
      (es können natürlich auch Hex-Codes wie z.B. #ff0000 genutzt werden)
    2. In der Zeile filter: blur(0.01em); den Filter für das weich zeichnen nach belieben anpassen.
      (je höher der Wert um so stärker wird die Schrift, wie unter Punk 1. weich gezeichnet)
    3. In den Zeilen background: radial-gradient(circle, white, transparent 25%) und radial-gradient(circle, white, black 25%) die Farbe des Effekts anpassen.
      (auch hier können Hex-Codes wie z.B. #ff0000 genutzt werden)
    4. In der Zeile font: 150px 'Ubuntu', sans-serif; die Schriftgröße anpassen.
      (Beachte bitte, dass je kleiner die Schrift ausgewählt wird, sich dieses auch auf den Effekt auswirkt!)

    Screenshot


    Viel Spaß damit ;)

    Gruss,
    Andreas

    • Gäste Informationen
    Hallo,gefällt dir der Thread, willst du was dazu schreiben,
    dann melde dich bitte an.
    Hast du noch kein Benutzerkonto, dann bitte registriere dich, nach der Freischaltung kannst du
    das Forum uneingeschränkt nutzen.

  • Belarus

    Hat den Titel des Themas von „Animierter Text Effeckt“ zu „[CSS] Animierter Text Effeckt“ geändert.

Jetzt mitmachen!

Du hast noch kein Benutzerkonto auf unserer Seite? Registriere dich kostenlos und nimm an unserer Community teil!