201111Mär

CSSWARP: CSS-Text entlang eines Pfades ausrichten

Bei manchen CSS3-Experimenten (wie etwa auch bei Peculiar) überwiegt die Menge des CSS-Codes gegenüber dem eigentlichen Nutzen. Dennoch sind solche Projekte wichtig für die Demonstration der Möglichkeiten, die CSS3 bietet. Eine weitere Anwendung, welche die Fähigkeiten von CSS3 ebenfalls beeindruckend veranschaulicht, wäre so auch CSSWARP: Mit diesem Tool von Dirk Weber lassen sich CSS-Texte entlang eines virtuellen Pfades ausrichten (ähnlich wie in Adobe Illustrator). Per Knopfdruck lässt sich der benötigte CSS/HTML-Code generieren, der für die Transformationen sorgt.

CSSWARP - CSS Text to Path Generator

Bei diesem Projekt wird nicht nur das Potenzial der CSS-Rotation ausgenutzt, sondern auch die Möglichkeiten des Canvas-Elements in Verbindung mit JavaScript — der eigentliche Editor zum Erstellen der Pfad-Transformation erlaubt es, die Bézierkurve wie in einem gewohnten Zeichenprogramm zu bearbeiten. Die Tangenten der Ankerpunkte können per Maus angepasst werden und zudem lässt sich die Ausrichtung der einzelnen Buchstaben einstellen. Ebenfalls interessant ist die Option, Schriftarten aus dem Google Font-Verzeichnis zu nutzen. Das kleine Werkzeug ist in jeder Hinsicht gelungen und beeindruckt wieder einmal durch moderne Browser-Effekte.