CSS-Sprites, die Zweite
04. Jun 2010
Dass nicht nur Mouseover-Effekte mit CSS-Sprites möglich sind, zeigt Google mit einer auf CSS-Sprites basierenden Javascript-Packmann Version.
Dass nicht nur Mouseover-Effekte mit CSS-Sprites möglich sind, zeigte Google kürzlich mit einer auf CSS-Sprites basierenden Javascript-Packmann Version.
Wenn Sie eine Weile auf der Seite geblieben sind, werden Sie gemerkt haben, dass Google hat nicht nur ein statisches, sondern ein spielbares Logo angeboten hat.
Javascript-Spiel mit CSS-Sprites
Wer sich die Seite mit dem Firebug etwas genauer ansieht, wird bemerken, dass das gesamte Spiel mit CSS-Sprites umgesetzt wurde, das heißt, alle Symbole werden aus einem einzigen Bild per CSS ausgeschnitten.
HTML statt Flash
Jetzt könnte man meinen, dass Google dabei dem aktuellen Trend gefolgt ist und statt Flash auf HTML setzt. Da Sound allerdings nicht gerade eine Stärke von CSS ist, hat Google hier eben wieder auf Flash gesetzt und neben dem Javascript-Spiel doch noch ein Flash eingebunden. Das Flash-Objekt ist für den Sound zuständig und wird per Javascript gesteuert.
Ressourcen schonen durch CSS-Sprites
Hier zeigt sich wieder, dass Google konsequent versucht Ressourcen zu sparen. Die schnelle Auslieferung von Seiten war dabei schon immer wichtiger, als mit validem Quelltext Schönheitswettbewerbe zu gewinnen. CSS-Sprites sind dabei offensichtlich eine performante Alternative zu Flash.