CSS icons

icons (tremija.png) helfen vor allem bei links dem Auge recht gut anzuzeigen wo es hingehen soll. Mit css kann man icons ohne überflüssige und aufwändige html-Elemente einbauen. Das Icon baut man am besten als Hintergrundgrafik und rückt den Text mit einem padding ein.

{DIV(align=>left, width=>25%, float=>right, class="umijabox")}{DIV} Auf iconfinder.com findet man noch mehr oder weniger sinnvolle icons.

  • Bei Listen ''li'' ziehe ich die Backgroundgrafik sogar dem list-style-image vor, da man so flexibler ist (z.B. kann so die Bulletgrafik auch unter der Zeile laufen) (heir auf Css noch nicht ;(
  • Links muss man nicht mal eine eigene class geben, sondern kann sich auf das target binden. ~np~a[href*="wikipedia.org"] {~/np~

Vektoren

Vektoren sind meist kleiner als Grafiken und können skaliert werden. Leider kann man keine Vektordateien als background einbinden. http://weloveiconfonts.com liefert zahlriche Webfonts aus und wird mit css :before { content: "\f015"; } vor das gewünschte Element gestellt.

Wenn diese nicht reichen...:

Grafik einbinden

Die gewünschte Grafik wird mit dem attribut ~np~url("http://example.com/img.png")~/np~ eingebunden. Hier gibt es zwei Methoden diese leichter einzubinden, anstatt jede Datei einzeln hochzuladen/hosten zu müssen.

Beide Methoden bieten zusätzlich den Vorteil das der Browser weniger einzelne files laden muss und so schneller wird, bei (fast) gleicher Datenmenge.

sprites

Bei CSS-Sprites werden alle oder zumindest die wichtigsten icons in ein großes Bild zusammengefasst und dann im css mit background-position einzeln ausgewählt. Mehr dazu Sprites für Hintergrundbilder richtig verwenden.

Ein Beispiel

Base64

Einzelne icons können mit Base64 als Data-url encodet direct ins css eingebunden werden. Zum umrechnen

Das hat den zusätzliche Vorteil das man beim css Anpassen nur die Bilddateien codes rüberkopiert die man wirklich braucht. Und schnell neue hinzufügen kann, ohne die ganze iconmap bearbeiten zu müssen

Eine Sammlung von base64 icons (das css).

Braucht man nur ein pixel kann man das auch online ohne gimp bauen

feine details

in css sind ja so schöne Details möglich die man oft gar nicht sieht. ;) z.B. cursor-url.