HTML / CSS LEVEL 3

Teil 2 - Web Icons

Beispiele von Icons im Web

https://startupsthisishowdesignworks.com/

http://www.gv.com/​

https://www.zurich.ch

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

http://jsbin.com/zaveti/edit?html,css,output

SVG Background Image

Sauber getrennt (nur CSS)

Sehr statisch (Farben)

Skalierbar

http://jsbin.com/zaveti/edit?html,css,output

Inline SVG

Sehr dynamisch (alle SVG CSS Eigenschaften)

Im HTML / nicht sehr sauber getrennt

Skalierbar

http://jsbin.com/zaveti/edit?html,css,output

Icon Font (Web Font)

Sehr dynamisch (alle text CSS Eigenschaften)

Einfarbig

Skalierbar

Zum Teil schlechtes rendering

http://jsbin.com/zaveti/edit?html,css,output

Data URIs

https://css-tricks.com/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

https://www.base64decode.org/

• 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

Weitere JSBins

http://jsbin.com