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 werden diese neue Techniken auf lange Sicht dafür sorgen das „der Sohn vom Arbeitskollegen“ nicht mehr mal eben schnell die Homepage des Unternehmens kostenlos ins Web setzt. HTML5 / CSS3 wird komplex, ohne Javascript wird es nicht mehr gehen und schon heute schauen einige Designer doof aus der Wäsche.

Screenshot von CSSWARP

Helfen kann an der Stelle die eine oder andere kleine Cloud-Anwendung die mittels Frontend ein paar rudimentäre Dinge zulässt, und dann das entsprechende HTML auswirft. Zumeist funktioniert das (in den meisten Browsern), und zumeist sollte man vorsichtig sein das HTML ohne Tests einzusetzen. CSSWARP erlaubt es, in einem Canvas-Element beliebigen Text mittels eines Pfads in eine beliebige Form zu pressen.

Dies ist natürlich in mehrerer Hinsicht interessant: zum einen ist das Frontend ein gutes Beispiel was (und wie schnell) ein Canvas-Element arbeiten kann, und zum anderen ist auch das CSS3 recht interessant. Natürlich (und das liegt in der Natur der Sache) ist das erzeugte CSS nicht gerade das was man als klein und zierlich bezeichnen würde. Ist auch irgendwo logisch denn um einen solchen Effekt zu erzeugen muss jeder Buchstabe einzeln angesprochen und transformiert werden.

Ich bleibe allerdings dabei das CSSWARP ein gutes Beispiel für die zukünftigen Möglichkeiten und ein prima Beispiel für ein schnelles Canvas-Element ist. Werft einfach mal einen Blick auf die Seite, ob man es dann auch benutzen sollte steht auf einem anderen Blatt.

Ähnliche Beiträge

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...
50 CSS3 Button Sets Der Trick ist ja der folgende: Je mehr CSS3, desto weniger Grafiken zum nachladen, desto schneller die Seite. Allerdings (und das muss man ganz klar s...
HTML5Rocks – HTML5 und CSS3 von Google Mit HTML5Rocks beglückt uns Google mit einer Art eierlegenden Wollmilchsau für HTML5 & CSS3, der man eine Rosa-Google-Brille angezogen hat. Die Se...
Unterschiedliches CSS3 für verschiedene Links CSS3 erlaubt es, nicht wie bisher alles Links gleich zu stylen, bzw. diese über eine Klasse zu unterscheiden, sondern Links mit verschiedenen Zielen d...

Schreibe einen Kommentar

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