Unschärfe-Effekt mit CSS erzeugen

Mit CSS ist es möglich, einen Effekt zu erzeugen, der Text verschwommen darstellen lässt. Mit etwas Kreativität lassen sich so nette Unschärfe-Effekte auf der eigenen Website erzeugen. Diese Effekte benennt man häufig auch mit dem englischen Begriff „blur“.

In diesem Artikel kannst du nachlesen, wie das funktioniert.

 

Unschärfe-Effekt mit CSS darstellen

Um den Unschärfe-Effekt zu erzeugen, reicht das nachstehende kleine CSS-Snippet aus.

 

Beispiel:

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
   font-size: 2.5em;
}

 

Ein Problem gibt es jedoch: Der Internet Explorer stellt den Text komplett transparent dar. Als Workaround kannst du auch folgenden CSS-Code benutzen. Der erzielte Effekt sieht allerdings nicht ganz so schön aus.

 

Beispiel (Internet Explorer kompatibel):

.blurIE {
    text-shadow: 1px 1px 4px black, -1px -1px 4px black;;
    font-size: 2.5em;
}

 

 

Anzeigebeispiel anzeigen

 

Kompatibilität

Dieses Script habe ich in folgenden Browsern getestet:

  • Google Chrome 31
  • Firefox 26
  • Internet Explorer 11 (nur das zweite Code-Beispiel)
  • Opera 18
  • Safari (iPhone-Version, iOS 7.0.4)

In den genannten Browsern funktionierte das Script einwandfrei. Ich kann darüber hinaus leider nicht versichern, dass dieses Beispiel auch in älteren Browser-Versionen oder hier nicht aufgeführten Browsern funktioniert.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.