iOS 7 Webdesign Trend Frosted Glass mit HTML5 Nachbauen
Kommentare

iOS 7 bringt frischen Wind auf Apples mobile Endgeräte. Der neue Look und das reduzierte Design setzt optische Maßstäbe. Schließlich fungiert Apple in Sachen Design noch als Meinungsbilder.

Neben dem umstrittenen Flat Design, der geänderten Typografie und dem Verzicht auf Skeuomorphismus gibt es ein Stilelement, das im wahrsten Sinne des Wortes in den Hintergrund rückt: der Frosted-Glass-Effekt.

Wie der Name bereits vermuten lässt erscheinen Bilder und Texturen mit diesem Effekt wie durch eine Milchglasscheibe. Die Umrisse verschwimmen, aber das Bild ist als solches noch erkennbar. Der Effekt ist auch als Blur-Effekt bekannt.

Im UI von iOS 7 begegnen wir diesem Effekt immer wieder. Das bekannteste Beispiel dafür ist der pastellfarbene Home-Bildschirm, mit dem iOS 7 in Anzeigen und Bannern beworben wurde.

Die Kollegen von Abduzeedo.com zeigen in einem Tutorial, wie Ihr den Frosted-Glass-Effekt mit HTML5 nachbauen könnt. Viel Spaß beim Ausprobieren!

 frosted glass

Screenshot: http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -