CSS Sprite Generator

CSS Sprites sind meistens eine nette Sache, wenn auch mit einigen Unzulänglichkeiten bei diversen Browsern versehen. Zusammenfassend kann man sagen, das die CSS Sprites schlicht und ergreifend dazu dienen, die Anzahl der Requests auf einen Webserver zu verringern. Denn eine Webseite kann um so schneller ausgeliefert werden, desto weniger Bilder sie enthält.

Der Trick an den CSS Sprites ist der, dass viele kleine Bilder in einer einzigen großen Grafik zusammengefasst werden. Jedes der Ursprungsbilder sitzt an einer festen Position innerhalb des großen Bildes, die mit X/Y-Koordinaten definiert wird. Mittels des CSS-Tags background-position kann dann das einzelne Bild wieder angezeigt werden.

Screenshot des CSS Sprite Generators

Der CSS Sprite Generator hilft bei der Erstellung des Sprites nebst dazugehörigem CSS. Es erlaubt den Upload einer beliebigen Anzahl von Bildern in einem Zip und erstellt daraus ein e einzelne Grafik mit einem CSS, das die Koordinaten enthält, um die Bilder wieder anzeigen zu können. Alles in allem eine sehr zeitsparende Angelegenheit mit einem sehr großen Nutzen.

Ähnliche Beiträge

CSS3 Generator CSS3 ist schön, CSS3 ist nett, CSS3 macht in jedem Browser was es will, und insbesondere etwas anderes. Der Trick an CSS3 ist nicht es zu verwenden, s...
Backgrounds für Grid Based Layouts Okay, ich gebe zu, der Titel ist maximal mystisch, passt aber ;) Ich glaube zum Grid Based Design brauche ich nichts mehr zu sagen, und es gibt ja auc...
Sprite Cow – CSS Sprite nach CSS CSS Sprites sind höchst nützliche kleine Dinger, um Ladezeiten zu verkürzen, vor allem wenn man ein passendes Caching / Expire im Apache damit verbind...
8 Online CSS3 Generatoren Frei nach dem Motto: lieber schnell zusammen geklickt, als falsch selbst gemacht, habe ich mal eine Liste von 10 guten CSS3 Online Editoren erstellt. ...

Ein Kommentar

  • sehr praktisch die Seite. hab ich schon des öfteren eingesetzt. :)
    mit Sprites werden übrigens nicht nur dir Requests verringert, sondern auch die Datenmenge. das fertige Sprit ist um einiges kleiner als die einzelnen Bildchen zusammengenommen.

Schreibe einen Kommentar