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;
}

Erklärung:

In diesem Beispiel kommt der text-shadow Effekt zum Einsatz. Das CSS Property besteht dabei aus vier Bestandteilen:

  1. h-shadow (Position des horizontalen Schattens, Angabe zwingend erforderlich, auch negative Werte möglich)
  2. v-shadow (Position des vertikalen Schattens, Angabe zwingend erforderlich, auch negative Werte möglich)
  3. blur-radius (Radius des Weichzeichnungseffekts, Angabe optional)
  4. color (Farbe des Schattens, Angabe optional)

Die Farbe wird mit dem entsprechende RGB-Code angegeben, damit die Transparenz erzielt werden kann. Das Problem dabei: Der Internet Explorer stellt dann den Text komplett transparent dar.

Als Workaround kannst du bei der Farbe auch den HTML üblichen Hex-Wert angeben. Darüber hinaus musst du zwei Schatten einsetzen, damit es funktioniert. Der erzielte Effekt sieht dann allerdings nicht ganz so schön aus. Nachstehend zeige ich dir noch ein Beispiel zu dieser Methode.


Beispiel:

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

Anzeigebeispiel:

Folge einfach diesem Link (öffnet sich in einem neuen Tab), um dir das Beispiel im Browser anzusehen.


Hinweis:

Wie bereits oft auch an anderer Stelle schon erwähnt: Setze CSS Effekte wie diesen nicht zu häufig auf deiner Website ein. Ein Übermäßiger Einsatz von bestimmten Effekten lässt die Augen schnell ermüden. Setze Effekte, wie diesen Unschärfe-Effekt, also nur wohlüberlegt ein. Schließlich willst du die Besucher deiner Website ja nicht gleich wieder vergraulen.

Browser Test

Das oben genannte CSS Snippet habe ich überdies in folgenden Browsern getestet.

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

In den genannten Browsern funktioniert das Snippet dabei einwandfrei. Ich kann jedoch leider nicht versichern, dass dieses CSS Snippet auch in hier nicht aufgeführten Browsern funktioniert.


Anzeige:


Schreibe einen Kommentar