barrierefreies Webdesign Ingo Turski

Farbwechsel der Buttonbeschriftung mit CSS

Um bei Grafik-Links in besonderen Schriften einen Hover-Effekt zu erzielen, werden die Grafiken meist gegen andere ausgetauscht. Dies hat jedoch den Nachteil, daß mindestens doppelt so viele Grafiken zu laden sind und der Effekt meist erst verzögert auftritt. Es geht jedoch auch anders und ohne JavaScript:

<style type="text/css">
  a.schrift, a.schrift img { display:block; width:180px; height:30px; }
  a.schrift img { border:0 none; }
  a.schrift:link, a.schrift:visited { background-color:#069; }
  a.schrift:hover { background-color:#fc3; }
  a.schrift:active, a.schrift img:active { background-color:#c30; }
</style>

<a class="schrift" href="#"><img src="schrift.png" alt="klick mich" /></a>

Hier wird der Linkbereich als Block und in derselben Größe wie die enthaltene Grafik definiert, so daß sich der Linkbereich exakt mit der darüberliegenden Grafik deckt und sich Änderungen der Hintergrundfarbe über a:hover nur auf den Grafik-Hintergrund auswirken.

Was hat aber die Hintergrundfarbe mit der Schriftfarbe in der Grafik zu tun? Hier liegt der eigentliche Trick. Die Grafik (im GIF- oder wie hier im PNG-Format ohne Alphakanal) hat nur zwei Farben - eine transparente Farbe für die Schrift und als Hintergrund die Farbe des Seitenhintergrundes. Somit ist die Schrift selbst eigentlich nicht sichtbar, sondern nur der durchscheinende Hintergrund - und dieser kann über CSS geändert werden.

Diese Methode hat jedoch zwei Nachteile, die ihren Einsatz etwas einschränken:

• Da der Hintergrund nur deckende Farbe(n) enthalten kann, lassen sich die Buttons kaum über ein Hintergrundbild legen.
• Es ist kein 'anti-aliasing' für die Schrift möglich, da nur eine Farbe verwendet werden kann. Durch die entstehenden Treppeneffekte wirken viele Schriftarten zu 'pixelig'.

Trotzdem lohnt es sich, eine passende Schriftart zu finden. Dieses Beispiel benötigt für die drei Linkfarben eine einzige Grafik, die dank der Zweifarbigkeit auch nur 507 Byte groß ist.

Es lassen sich auch grafisch umrahmte Buttons mit nur einer zusätzlichen Grafik erzeugen:

<style type="text/css">
  .oval { width:360px; height:60px; background:#eee url(oval.gif);
          border:1px solid #eee; } /* für Mozilla und Opera erforderlich!? */
  .oval a { display:block; width:180px; height:30px; margin:15px 90px; }
  .oval a img { display:block; width:180px; height:30px; border:0 none; }
  .oval a:link, .oval a:visited { background-color:#069; }
  .oval a:hover { background-color:#fc3; }
  .oval a:active, #oval a img:active { background-color:#c30; }
</style>

<div class="oval"><a href="#"><img src="schrift.gif" alt="klick mich" /></a></div>