Emanuel Kluge

Weichgezeichnete Schrift mit CSS3

Demo | Download

Hier ein kleiner Trick, wie man mithilfe von CSS3 "Blurred Typo", also weichgezeichnete Schrift, machen kann. Das ganze funktioniert durch den Umweg über die text-shadow-Funktion in CSS3.

Um das Beispiel zu verdeutlichen habe ich eine unspektakuläre Navigation gewählt. Hier der HTML-Teil:

<ul id="nav">
  <li><a href="index.html">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Eine ungeordnete Liste, wie es sich für eine anständige Navigation gehört. Als nächstes der CSS-Teil:

#nav {
	width: auto;
	clear: left;
	overflow: hidden;
	border-left: 1px solid #EEE;
	list-style: none;
}

#nav li {
	width: auto;
	height: 30px;
	padding: 0 20px 20px 20px;
	float: left;
	border-right: 1px solid #EEE;
	line-height: 30px;
}

#nav li a:link,
#nav li a:visited {
	text-decoration: none;
	color: #CCC;
	text-shadow: 0 0 3px #CCC;
}

#nav li a:hover {
	text-shadow: 0 1px 1px #666;
	color: #093;
}

#nav li a:active {
	color: #999;
	text-shadow: none;
}

Indem man die X- und Y-Offset-Werte bei text-shadow gleich Null setzt, entsteht anstelle des Schatten mehr so etwas wie ein äußeres Leuchten. Da dieses Leuchten die gleiche Farbe wie die Schrift hat, wirkt diese dadurch weichgezeichnet. Beim Überfahren mit der Maus verschwindet dieser Effekt und die Schrift erscheint klar.

Da es sich um eine CSS3-Spielerei handelt, braucht man zur Darstellung einen modernen Browser, wie Safari 4, Firefox 3.5, Opera 10 oder Chrome. Im Internet Explorer geht das ganze wie erwartet nicht, was aber kein Weltuntergang ist, da die Funktion der Seite ansich dadurch nicht beeinträchtigt wird.

Barrierefreier Button mit Text Replacement

Demo | Download

Jeder kommt früher oder später beim Bauen einer Website in die Situation, dass er die Beschriftung eines Buttons loswerden möchte, um den Button mit einer schönen Grafik zu versehen. Das Auge surft schließlich mit.

Oftmals sieht man in diesen Fällen, dass das value-Attribut einfach leer gelassen wird. Dies ist allerdings eine wenig elegante Lösung, da Besucher mit Screenreader raten müssen, wofür der Button gedacht ist. Alternativ könnte man auf die Standard-Text-Replacement-Methode über text-indent: -9999px; zurückgreifen. Dies funktioniert auch ganz passabel in mordernen Browsern. IE6 und IE7 schieben dabei allerdings den kompletten Button nach links ins Abseits.

Es muss also eine andere Methode her. Und die sieht so aus, dass man einfach ein div-Element um den Button packt und ihm die gleiche Größe wie dem Button gibt. Dann verschiebt man selbigen noch mittels padding-top ins Abseits und schon ist der Text weg und man kann seine Grafik einbauen. Der Quelltext dafür sieht folgendermaßen aus:

<div class="button">
   <input type="submit" value="Absenden" />
</div>

Dazu kommen noch folgende CSS-Angaben:

.button {
	height: 30px;
	width: 80px;
       overflow: hidden;
}

input {
	width: 80px;
	height: 30px;
	padding: 30px 0 0 0;
	border: 0;
	background: #369 url('button.jpg') 0 0 no-repeat;
}

Diese Technik funktioniert einwandfrei im Firefox, in Safari sowie im IE6/7/8.

Natürlich kann man den gleichen Effekt erzielen, indem man einem input-Element das Attribut type="image" gibt und die Grafik direkt im Quelltext einbaut. Allerdings hat man dann nicht die Möglichkeit, für den :hover- und :active-Zustand eine alternative Grafik per CSS zuzuweisen, was der User Experience durchaus zuträglich ist.

PS: Wie ihr input-Elemente im IE6 :hover-fähig macht, erfahrt ihr hier.

Nachtrag:

Thorsten hat mich in den Kommentaren darauf aufmerksam gemacht, dass diese Lösung im Opera-Browser nicht funktioniert, da sich dort die Button-Beschriftung nicht durch padding ins Abseits schieben lässt. Hier müssen wir also mit der üblichen Text Replacement-Methode mittels der CSS-Angabe text-indent: -9999px; ran.

Allerdings hat der Internet Explorer wie oben beschrieben seine Schwierigkeiten mit dieser Lösung und verschiebt den kompletten Button ins Abseits, was sicherlich nicht im Sinne des Erfinders ist. Wir müssen den Internet Explorer also ausschließen, was auf zwei Arten Möglich ist.

1. Über herkömmliche Conditional Tags:

<!--[if !IE]>
<style type="text/css">
  input {
    text-indent: -9999px;
  }
</style>
<![endif]-->

Dies ist die Standard-Abfrage, ob es sich beim Browser um einen Internet Explorer handelt oder nicht. Diesen -Schnipsel fügt man in den Kopf-Bereich ein und schon sieht der Button auch im Opera-Browser anständig aus.

2. Ergänzung im type-Attribut:

Ergänzt man das type-Attribut des style-Elements um die mit Apostroph abgegrenzte Angabe charset=utf-8, interpretiert der Internet Explorer die Angabe nicht mehr. Trotzdem ist das Dokument weiterhin valide.

<style type="text/css;charset=utf-8">
  input {
    text-indent: -9999px;
  }
</style>

Welche Lösung ihr wählt, sei euch überlassen. Eine Empfehlung, welche besser ist, kann ich nicht abgeben.