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

Text auf Pfaden mittels CSS3 Brave New World - CSS3 und insbesondere das Canvas-Element machen Dinge möglich, über die man sich früher keine Gedanken machen brauchte. Insbesondere...
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. ...
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 ...
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 Antworten auf „Isometrie und CSS3“

Schreibe einen Kommentar

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