HTML / CSS LEVEL 3

Teil 2 - Web Icons

Beispiele von Icons im Web

Warum Icons?

  • Unterstützen die Usability
  • Helfen effektiv zu kommunizieren
  • Guter visueller Effekt
  • Kann helfen Platz zu sparen (nur in Fällen wo es nicht anders geht)

Icons einbinden

Icon Font (Web Font)

Inline SVG

SVG Background Image

SVG Background Image

Sauber getrennt (nur CSS)

Sehr statisch (Farben)

Skalierbar

Inline SVG

Sehr dynamisch (alle SVG CSS Eigenschaften)

Im HTML / nicht sehr sauber getrennt

Skalierbar

Icon Font (Web Font)

Sehr dynamisch (alle text CSS Eigenschaften)

Einfarbig

Skalierbar

Zum Teil schlechtes rendering

Data URIs

  • Einbetten von Ressourcen
  • Möglich in
    • HTML (z.B. <img src="data:image/gif;base64,...">
    • CSS (z.B. background-image: url(data:image/gif;base64,...);
  • Keine weiteren Ressourcen müssen geladen werden (performance)

Data URIs mit Base64

  • Wandelt binäre Daten in text um
  • Kann somit in CSS und HTML eingebunden werden
  • Ist ungefähr 1.5 mal so gross wie das binäre Original

Icons selbst erstellen

Weitere JSBins

http://jsbin.com

HTML / CSS III - Teil 2 - Web Icons

By Gion Kunz

HTML / CSS III - Teil 2 - Web Icons

  • 902
Loading comments...

More from Gion Kunz