[CSS] Schwingende Schilder

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

    Hallo zusammen,


    nachfolgend eine Möglichkeit seine Mitglieder und / oder Gästen auf Ereignisse, Bekanntmachungen oder sonstiges in Form eines Schildes hinzuweisen. Die Schilder sind animiert (swing = schaukelnd) dargestellt und können individuell mit ein Gradient (Farbverlauf) oder aber einen Hintergrundbild versehen werden.

    Features

    • Leichte Integration
    • Einfaches anpassen an Deinen Style
    • Mit Gradient oder Hintergrundbild möglich
    • Animationsgeschwindigkeit ist eigenen Wunsch anpassbar
    • Quasi unendlich zu jedem Anlass anpassbar bzw. erweiterbar




    Demo


    Eine Live Demo kann auf Codepen.io: Schwingende Schilder betrachtet werden.

    Quellcode

    Füge onclick="parentNode.remove()" nach class="XYZ" ein, um das Schild bei onclick vollständig entfernen lassen zu können.


    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.

    [info='warning']Beachte bitte am Ende des CSS-Quellcode die "@keyframes swing", welche zwingend zur Animation benötigt werden!


    Benutzung


    1. HTML-Quellcode an gewünschter Stelle einfügen.
      Dies kann innerhalb einer Box, auf einer statischen Seite oder aber auch via Template geschehen.
    2. Quellcode wie o.a. im "Stilunabhängigen CSS / SCSS" oder aber im Stil unter "Erweiterte Einstellungen" einfügen.
      Hinweis:
      Benutzt "Stilunabhängigen CSS / SCSS" nur wenn ihr keine anderen Stilgruppen verwendet!
    3. Menü CSS-Eigenschaften nach eigenen belieben editieren.

    Lizenz

    Copyleft oder mit anderen Worten, macht damit was Ihr wollt ;)


    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.

Jetzt mitmachen!

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