Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

iOS 7: So nutzt du den Blur-Effekt in deinen Webprojekten

Der Blur-Effekt von iOS 7 hat in kurzer Zeit Furore gemacht. In diesem Artikel erfahrt ihr, ob und wie ihr ihn auch für eure Webprojekte verwenden könnt – und ob schon performante Lösungen zur Verfügung stehen, um eure Kunden mit diesem Effekt begeistern zu können.

iOS-7-Blur in aller Munde

Wenn man als findiger Entwickler auf der Suche nach dem besagten Blur-Effekt das Internet durchstreift, findet man so einige Lösungsansätze. Leider bieten sie oft nicht mehr als sehr experimentelle JavaScripts, die zwar den gewünschten Effekt erzielen, aber dabei nicht dynamisch bleiben oder semantisch inkorrektes HTML voraussetzen. Abgesehen davon gibt es Probleme mit der Performance, und von einer Cross-Browser-Funktionalität kann derzeit nur geträumt werden. Der iOS-7-Blur zeichnet sich dadurch aus, dass er auf Bilder und auf Texte angewendet werden kann. Doch wie kann man so einen Effekt auch im Web erreichen?

Der angestrebte Effekt in Aktion. (Quelle: imore.com)
Der angestrebte iOS-7-Blur-Effekt in Aktion. (Foto: imore.com)

CSS3: Filter als Lösung?

Filter wurden eigentlich für SVG-Grafiken entwickelt und sind erst Jahre später in CSS3 übernommen worden – obwohl sie immer noch nicht offiziell zur Verfügung stehen. Die SVG-Filter kurz erklärt: Die zu verarbeitenden Elemente werden zuerst extrahiert, in einem Buffer gefiltert und erst im Anschluss diese Elemente gerendert und wieder im Browser als Teil des DOM eingefügt und dargestellt. Laut dem W3C-Draft von 2013 stellt CSS3 derzeit folgende Filter bereit:

.css3-filter {
  filter: grayscale(0);
  filter: sepia(0);
  filter: saturate(1);
  filter: hue-rotate(0deg);
  filter: invert(0);
  filter: opacity(1);
  filter: brightness(1);
  filter: contrast(1);
  filter: blur(0px);
  filter: drop-shadow(5px 5px 5px #ccc);
}

Diese Filter müssen allerdings mit Vendor-Prefixes versehen werden um sie, zumindest teilweise, von Browsern darstellen lassen zu können. Wobei filter:blur(0px) für den Blur-Effekt schon sehr vielversprechend aussieht. Aber leider funktioniert dieser Code-Schnipsel trotz Vendor-Prefixes nicht in jedem Browser. Als Beispiel will ich hier Firefox nennen, der zum Beispiel bei Texten – trotz Vendor-Prefix – den CSS3-Filter konsequent ignoriert. Ein vollständiger Blur-Filter mit Vendor-Prefix würde übrigens so aussehen:

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

Zwar kann man einfache Bilddateien bei einem :hover-Event gegen ein weichgezeichnetes Bild austauschen lassen, aber das ist nicht der Sinn der Sache. Wir wollen eine dynamische Lösung, die auch dann noch funktioniert, wenn sich der Viewport verändert oder wenn der Effekt auf Block-Elemente angewendet wird.

Verfügbare Lösungen

Das Hauptproblem liegt also nicht an technischen Komponenten, sondern an den Browsern. Das heisst: Wir haben zwar durch CSS3-Filter die Möglichkeit, diesen Blur-Effekt umzusetzen, allerdings werden diese Filter noch nicht von allen Browsern unterstützt beziehungsweise unterschiedlich interpretiert – was bei einer noch nicht offiziellen Implementierung nicht verwunderlich ist. Die volle Leistung dieser CSS3-Filter könnt ihr auf dieser Website bestaunen.

iOS7 Blur in Chrome, Safari und Firefox

Als passable Lösung präsentiert Fabrice Weinberg einen Quellcode, der mithilfe von CSS-Regions den gewünschten Effekt in Chrome 29+ (vorausgesetzt ist eine Aktivierung des „Experimental-Webkit-Features“), Safari 6.1 beta und in Mobile Safari darstellen kann. Dabei stellt sich dieser Quellcode auf iOS-7-Geräten als nicht sehr performant heraus. Und: Die eingesetzten CSS-Regions selbst sind noch sehr experimentell.

Auf JSFIDDLE findet ihr außerdem eine Variante, die auf Firefox läuft. Hier werden SVG-Filter benutzt, um den gewünschten Effekt erzielen zu können. Kleines Manko ist das zusätzliche HTML-Markup – aber das Ergebniss sieht zumindest in Firefox sehr gut aus. Alternativ könnt ihr auch auf die SVG-Filter zurückgreifen:

filter: blur(3px); 
-webkit-filter: blur(3px); 
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

Mit diesem Snippet fügt ihr den Effekt im HTML-Markup ein:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg> 

Fazit

Derzeit gibt es keine Cross-Browser-Lösung für einen iOS-7-Blur-Effekt und die vorhandenen Lösungen laufen nur auf bestimmten Browsern und widersprechen, durch zusätzlichen und sinnlosen HTML-Code, der Semantik. Auch die Performance ist, trotz Hardware-Beschleunigung, noch teilweise suboptimal. Aus technischer Sicht ist es interessant, diesen Effekt auch im Web umzusetzen – die Frage ist nur: wozu? Wir haben andere Möglichkeiten, um die Aufmerksamkeit auf ein bestimmtes Objekt zu lenken – die dazu auch noch performanter sind.

Kurzum: Apple hat mit diesem Effekt die Muskeln spielen lassen, als Web-Entwickler aber müssen wir in absehbarer Zeit wohl auf diesen Effekt verzichten. Wer einen performanten Blur-Effekt , allerdings nur für Hintergründe. nutzen will, der wird bei CSS-Tricks fündig.

Was meint ihr – wollt ihr diesen Effekt auch bei Webprojekten einsetzen?

Bitte beachte unsere Community-Richtlinien

6 Reaktionen
daveleeone

Zumindest für Hintergrundbilder gibt es eine Crossbrowser Lösung in CSS/SVG siehe:http://codepen.io/dudleystorey/pen/mkgyl

Antworten
Timo

Ehrlich? Was ist daran so toll, das ist Windows Vista und Windows 7 Design nichts anderes. Und neu ist daran wirklich nichts!. Ich bin eh sehr enttäuscht von ios7, es schaut aus wie Windows 7 Remastered.

Antworten
Norman

Ist das nicht ein ziemlicher Performancefresser? Es kommt ja nicht vom OS, sondern muss über den Browser berechnet werden. Würds nicht machen.

Antworten
Mario

Aber warum der Blur-Effekt nun Apple und iOS7 zugesprochen wird ist mir abermals ein Rätsel...

Antworten
Marko

Hallo Tim

Dieser Effekt funzt nur beim Safari (meine Version 7.0).
Allerdings sieht's ganz cool aus.

Hoffe dass bald eine Cross-Browser-Lösung kommt.

Gruss
Marko

Antworten
Tim L.

Hab mich vor kurzem auch erst mit dem Thema beschäftigt und bin auf folgendes gestoßen:
http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript
Lief bei meinen Versuchen bis jetzt ganz rund.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst