Blinkender Hintergrund

Möchte man auf seiner Website, auf etwas aufmerksam machen, so kann dieser blinkende Text-Hintergrund eingesetzt werden. Wie alles animierte, so sollte man den blinkenden Hintergrund nur sparsam einsetzen.

Beispiel:

Das hier ist ein kleiner aber feiner Testtext zum demonstrieren des Beispiels.

Das hier ist ein kleiner aber feiner 
<span style="background-image: url(blink2.gif); background-color: #FFFFA4;">
Testtext</span> zum demonstrieren des Beispiels.

Beispiel mit anderer Farbe:

Das hier ist ein kleiner aber feiner Testtext zum demonstrieren des Beispiels.

Das hier ist ein kleiner aber feiner 
<span style="background-image: url(blink2.gif); background-color: #A3A3D1;">
Testtext</span> zum demonstrieren des Beispiels.

Mit dem nächsten Beispiel wird das blinken erhöht:

Das hier ist ein kleiner aber feiner Testtext zum demonstrieren des Beispiels.

Das hier ist ein kleiner aber 
<span style="background-image: url(blink1.gif); background-color: #FFA87D;">
feiner</span> Testtext zum demonstrieren des Beispiels.

Mit dem nächsten Beispiel wird das blinken verlangsamt:

Das hier ist ein kleiner aber feiner Testtext zum demonstrieren des Beispiels.

Das hier ist ein kleiner 
<span style="background-image: url(blink3.gif); background-color: #FFBFDF;">
aber feiner</span> Testtext zum demonstrieren des Beispiels.

Mit dem nächsten Beispiel wird das blinken noch langsamer

Das hier ist ein kleiner aber feiner Testtext zum demonstrieren des Beispiels.

Das hier ist ein 
<span style="background-image: url(blink4.gif); background-color: #E6E6E6;">
kleiner aber feiner Testtext</span> zum demonstrieren des Beispiels.

Benötigte Bilder:

= blink1.gif     = blink2.gif     = blink3.gif     = blink4.gif


Siehe auch: Blinkende Inhalte mit Keyframes

Tipps

Verzeichnis auslesen und mit einem Link verknüpfen
Beispiele wie ein Verzeichnis (Ordner) über PHP ausgelesen und mit einem Link verknüpft wird.
Zeichenkodierung - Schriftzeichen richtig darstellen
Oft werden Umlaute, Akzentzeichen oder andere fehlerhafte Zeichen auf der Webseite angezeigt. Auch der Inhalt einer E-Mail, vom Kontaktformular der Website, kann falsche Umlautzeichen enthalten. Beispiele um diese Zeichen in der richtigen Zeichenkodierung darzustellen.
Bilder mit Wasserzeichen markieren
JPEG-Bilder (oder andere Grafikformate) können mit einem transparenten Wasserzeichen markiert werden; Mit Hilfe eines kleinen PHP-Scripts.
Responsives Design
Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.