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?

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

7 Kommentare
Tim L.
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
Marko
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
Mario
Mario

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

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
Timo
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
daveleeone
daveleeone

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

Antworten
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung