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

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...
Linkcheck mit CSS3 Bei der HTML-Umsetzung eines Designs werden in der Regel alle Links entweder gar nicht, oder mit einem # versehen. Dies liegt in der Regel daran, das ...
CSS3 Fähigkeiten einfach mal Testen CSS3 und HTML5 sind cool, zeichnen sich aber auch dadurch aus das nicht jeder Browser alles, und auch nicht gleich unterstützt. Bei CSS3 ist dies fast...
CSS3 Buttons in Cool Zur Zeit gibt es jede Menge Tutorials darüber, wie man in CSS3 Buttons mit runden Ecken, Gradients und quietschigen Farben hinbekommt. Die Frage, die ...

3 Antworten auf „Isometrie und CSS3“

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.