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 lässt sich dadurch ein netter Unschärfe-Effekt auf der eigenen Website erzeugen. Häufig stößt man bei diesem Effekt auch auf den englischen Begriff „blur“.

In diesem Artikel zeige ich dir, wie du dabei einen Blur-Effekt auf deiner Website selbst erzeugen kannst.

 

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

 

Browser-Test

Das oben genannte CSS Snippet habe ich dazu 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)

Die genannten Browser zeigen das Snippet dabei richtig an. Ich kann jedoch leider nicht sagen, ob auch in hier nicht genannte Browser dieses CSS Snippet korrekt darstellen.

 

Schreibe einen Kommentar

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