CSS Sprites Tutorial

Flackerfreie CSS Hover Buttons

Die Alternative – CSS Sprites

Das ganze ist so genial wie simpel. Man speichert nicht mehrere Grafikdateien einzeln ab sondern eine größere Datei, in der alle Ansichten des Buttons dargestellt werden. Mit CSS verschiebt man dann einfach den Hintergrund.

Ein Beispiel:

Für einen Twitter und Facebook Button habe ich eine Grafik erstellt, die beide Ansichten enthält. Einmal die Grau hinterlegte und die farbige “Hover” Grafik.

Hier die einzelne Datei:

.addtwitter
{display:block;
width:35px;
height:35px;
background:url(../images/addtwitter.gif) no-repeat;
}


.addtwitter:hover
{background-position:-35px;}

Dadurch, dass ich das Hintergrundbild nicht wiederhole (no-repeat) habe ich nur die Möglichkeit das Hintergrundbild nach links oder rechts zu verschieben. Wenn ich diesen Wert nicht angeben würde, könnte ich das Bild beliebig verschieben und vor allem: Mit einem Bild, alle Buttons der Website stylen.

Vorteile:

  • Kein “flackern” beim Hovern der Elemente
  • Weniger HTTP Anfragen
  • Wenn richtig optimiert, weniger Datentransfer