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

Webflow – komplettes CSS3 für Seiten online ... CSS3 Online-Editoren gibt es ja einige in der Cloud. Meistens sind diese für spezialisierte Anwendungen wie zum Beispiel Gradients oder Buttons. Will ...
Initializr – HTML5 Template Generator Nachdem uns derzeit wie blöde Boilerplates um die Ohren geworfen werden stellt sich zu Recht die Frage: welche ist passend für mich, und was mache ich...
HTML5 & CSS3 – Was funktioniert in welc... HTML5 und CSS3 nähert sich in großen Schritten, und spätestens dann wird sich im Bereich der Webentwickler die Spreu vom Weizen trennen, da beides ebe...
InstaCSS – die Referenz in Sachen CSS3 / HTM... Ich ergehe mich ja nicht oft in Superlativen, aber in Sachen CSS3 / HTML5 Dokumentation besteht mancherorts echt Nachholbedarf. Man bewegt sich dort i...

3 Kommentare

Schreibe einen Kommentar