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.