SVG Sprites vs. Icon-Fonts

Aktuell stellt sich mir häufiger die Frage „SVG-Icons oder Icon-Fonts” zu verwenden. Wer für ein Multi-Display-Web entwickelt, kommt nicht drumherum Bilder und Icons hochauflösend bereit zu stellen. Mit dem iPhone4 und dem sog. „Retina Display” hat man schnell gemerkt, dass normal auflösende Bildinhalte auf dem Display pixelig aussehen. Bisher war die einfache Lösung, die Icon-Sprites (PNG) in doppelter Auflösung anzulegen bzw. generieren zu lassen. Das Problem, dass die Icons dann trotzdem nur in einer „Ansichtsgröße” vorliegen, bestand weiterhin.

Iconfonts, also Schriften á la Dingbats, die anstatt Buchstaben und Ziffern Symbole haben, wurden bisher als ein adäquates Mittel für skalierbare Icons eingesetzt. Dass das auch immer mit Problemen behaftet ist, werden viele Webentwickler schon festgestellt haben.
SVG Sprites vs. Icon-Fonts weiterlesen

CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19

Nachdem CSS 2.1 uns Ende der 90er einigermaßen solide Werkzeuge zum Layouten von Seiten ohne Tabellen an die Hand gegeben hat, ging es bei CSS3 zunächst viel darum, uns mit mehr dekorativen Gestaltungsmöglichkeiten auszustatten. Heute haben wir endlich einbettbare Schriftarten, runde Ecken, Farbverläufe, semitransparente Elemente und Farbwerte, Box- und Textschatten usw. Soweit, so gut.

Der Blick in Richtung Photoshop und dessen Featureset offenbart jedoch immer noch Lücken. In Photoshop haben wir zum Beispiel die Möglichkeit, Bereiche zu entsättigen oder zu schärfen und weichzuzeichnen. Wofür könnten wir diese Effekte brauchen? Nun, ein Entsättigen oder ein Weichzeichnen bestimmter Areale einer Seite hilft dem Benutzer, sich auf unangetastete Bereicher besser zu fokussieren.

CSS-Filter – mehr Effekte fürs Web – CSS3 Adventskalender Tag 19 weiterlesen

IE9 mit CSS3 border-radius und linear-gradient Problemen

Nach Einführung des IE9 ist es nicht nur Fritz Weisshart aufgefallen, dass der IE9 zwar die propritären CSS-Eigenschaft „filter“ zum Erstellen von Verläufen, wie im IE6-8 zwar weiterhin unterstützt, aber diese nicht so funktionieren wie erhofft.
IE9 mit CSS3 border-radius und linear-gradient Problemen weiterlesen