Isometrie und CSS3

Isometrie ist/war ein beliebter Mechanismus in Online-Spielen, um sich diverse Probleme hinsichtlich Perspektive und Schatten vom Hals zu schaffen. Durch die „Klötzchen-Grafik“ brauchte man die Welt nur aus einem Blickwinkel, und einen möglichen Charakter maximal aus 4. Durch den Aufbau als Raster ist das Kacheln sich immer wieder wiederholender Elemente (ein Stück Gras zum Beispiel) kein Problem, und mit wenig Aufwand können riesige Welten entstehen. Ein prima Beispiel für ein isometrisches Webseiten-Design wäre zum Beispiel der Pixelfreak.

Isometrischer Text in CSS3

Nachteil des Systems war es, das Texte – sollten sie isometrisch sein – ebenfalls als Grafik abgelegt werden mussten. Keine feine Sache und vor allem aufwendig. Duncan Grant hat sich wohl gedacht, dass es anders auch einfacher gehen muss, und hat mit den 2D Text Transforms einen isometrischen Effekt hin bekommen. Eigentlich ist es so einfach, dass ich mich wundere, wieso noch keiner auf die Idee gekommen ist. Seine Erklärung und seine Demo sind einleuchtend!

Der Internet Explorer spielt allerdings (mal wieder) nicht mit – aber man kann bekanntlich nicht alles haben. Wer tiefer in die Welt der Isometrie einsteigen will, dem empfehle ich das Tile Based Games Tutorial, es deckt alles ab was man wissen muss, um isometrische Grafiken erstellen und verwenden zu können.

Ähnliche Beiträge

Respsonsive Design Testing Tool Screenqueri.es Das man heutzutage ein neues Design responsive aufbauen sollte lässt sich wohl nicht mehr weg diskutieren, wie es vielleicht vor einem Jahr noch mögli...
jQuery & Single Page Websites Derzeit schwer im Trend sind Single Page Websites. Dies sind sie zwar schon länger, aber die "neuen" Single Page Websites enthalten durchaus einiges a...
Neue CSS3 Snippets für die heimische Werkbank Ich habe ja letztens erst über PHP Snippets berichtet und Methoden zu deren Verwaltung. Zumindest bei letzterem bin ich seitdem weder schlauer geworde...
Reale Schatten mit jQuery Schatten gehen ja super mit CSS3, aber zugegebenermaßen muss man etwas Aufwand betreiben um diese realistisch erscheinen zu lassen. Insbesondere wird ...

3 Kommentare

Schreibe einen Kommentar