Lesefortschritt:

Internet-Nostalgie #1: Text blinken lassen – ein Webdesign-Gruss aus den 90er-Jahren

5. April 2023 | CSS-Stylesheet, HTML

Dieser Beitrag beinhaltet 444 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.

Als das WWW in den 90er-Jahren immer populärer wurde, war noch nicht viel los in Sachen Animationen. Ein Auswuchs von seinerzeit: Blinkende Texte. Diese vermochten richtig zu nerven und der <blink>-Tag ist denn auch aus dem HTML-Standard rausgeflogen. Wer es dennoch unbedingt blinken lassen möchte, sei der nachfolgende Hack empfohlen.

Unser heutiges Ziel: ein blinkender Text. So etwas:

Das muss schrecklich wichtig sein – darum blinkt dieser Text.

Nun: Der <blink>-Tag aus den frühen Tagen des WWW ist in heutigen HTML-Versionen nicht mehr enthalten. Der Effekt lässt sich aber dennoch erzwingen – so denn jemand findet, es müsse ums Töten blinken auf der Website.

Zunächst fügen Sie im HTML- oder Text-Modus Ihres WYSIWYG-Editors folgenden HTML-Code ein:

<blink>Blinkender Text</blink>

Würden Sie diesen Text nun online betrachten, würde er kaum blinken. Eben, weil der Tag aus HTML entfernt wurde. Mit ein wenig CSS-Code können Sie das Blinken erzwingen. Der Code gehört ins CSS-Stylesheet Ihrer Website – im WordPress-Backend etwa unter Design/Customizer/Zusätzliches CSS:

blink {
  animation: 2s linear infinite condemned_blink_effect;
}

@keyframes condemned_blink_effect {
  0% {
    visibility: hidden;
  }
  50% {
    visibility: hidden;
  }
  100% {
    visibility: visible;
  }
}

Auf Zeile 2 können Sie festlegen, wie lange die Animationsdauer ist. Ein Zeigen-/Verstecken-Turnus in unserem Beispiel dauert somit 2 Sekunden. Dies können Sie natürlich anpassen.

Zum Abschied blinken wir noch einmal kurz. Dann legen wir das Thema wieder beiseite.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This