0 10726

CSS-Tutorial – per CSS Text unterstreichen, durchstreichen, überstreichen und blinkend

Heute möchte ich Ihnen zeigen, wie man per CSS einen Text durchstreichen, unterstreichen, überstreichen und blinkend anzeigen kann.

Hierzu verwendet man die CSS Eigenschaft text-decoration.

Für text-decoration gibt es fünf mögliche Werte:

  • none – Ohne besondere Eigenschaft
  • underline – Der Text wird unterstrichen
  • overline – Der Text wird überstrichen
  • line-through – Der Text wird durchgestrichen
  • blink – Der Text blinkt

Hier ein Beispielcode:

Beispielcode HTML:

<html>
 <head>
  <style type="text/css">
   .unterstrichen { text-decoration:underline; }
   .ueberstrichen { text-decoration:overline; }
   .durchgestrichen { text-decoration:line-through; }
   .blinkend { text-decoration:blink; }
  </style>
 </head>
 <body>
   Von diesem Text möchte ich folgende Passage in unterstrichen anzeigen lassen:<br>
   <span class="unterstrichen">Dieser Text sollte unterstrichen sein</span><br>
   <span class="ueberstrichen">Dieser Text sollte überstrichen sein</span><br>
   <span class="durchgestrichen">Dieser Text sollte durchgestrichen sein</span><br>
   <span class="blinkend">Dieser Text sollte blinken.</span><br>
 </body>
</html>

Den Text blinkend darzustellen funktioniert standardmäßig nur im Firefox. Um den Text auch im Chrome oder Internet Explorer blinkend darzustellen müssen wir noch ein paar Zeilen CSS ergänzen:

Beispielcode CSS:

  <style type="text/css">
   .unterstrichen { 
  text-decoration:underline; 
}
.ueberstrichen { 
  text-decoration:overline; 
}
.durchgestrichen { 
  text-decoration:line-through; 
}

.blinkend { 
  /* -- text decoration blink funktioniert nur im Firefox */
  text-decoration:blink;
  /* Für alle anderen Browser brauche wir diesen Code: */
  -webkit-animation-name: blinker;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}
@-webkit-keyframes blinker {
  from {opacity: 1.0;}
  to {opacity: 0.0;}
}
  </style>

Hier dazu ein live Beispiel. Damit könnt Ihr ein wenig experimentieren:

See the Pen pvyOOG by Andreas Lang (@sphinxflash) on CodePen.

No related posts.

Author: Andreas Lang

Sphinx-Flashdesign.de

Andreas Lang hat im Alter von 12 Jahren begonnen, auf einem Atari ST 1040 STFM in Omikron und STOS Basic zu programmieren.
Spiele interessierten ihn nicht so sehr.
Die Welt der Bits und Bytes hat ihn gefangen.
Programmierertechnisch folgten auf dem ersten 486er Turbo Pascal, Visual Basic.
Mit dem ersten Internet Anschluss per 56k Modem folgten HTML, Javascript, CSS und Macromedia Flash. Die Website www.wizzquiz.de wurde geboren.
Eine Flash Online-Gaming Plattform mit Quiz Spielen, Memory, Sokoban etc.
Später entwickelte er Software unter anderem für Continentale und Siemens AG.
Seit zwei Jahrzehnten konzentriert er sich auf die Webentwicklung und Webdesign mit dem Schwerpunkt PHP, Laravel und Javascript und betreut seine Kunden mit Herz und Seele in allen Bereichen von Entwicklung, Design, Suchmaschinenoptimierung, IT-Recht, IT-Sicherheit etc.

Weiter