HTML-Texte an Pfad ausrichten: CSS3 Warp
In Photoshop und Illustrator ist die Funktion längst bekannt: zunächst wird ein Pfad erstellt, anschließend wird diesem Pfad ein Text zugewiesen um ihn in beliebigen Formen verlaufen zu lassen. Soll ein solches Design dann allerdings ins Web übertragen werden, so wird meist eine Grafik verwendet was natürlich zum Nachteil hat, dass der Text weder vergrößert noch markiert werden kann und darüber hinaus zusätzlich im Code versteckt werden muss um von Suchmaschinen indexierbar zu bleiben.
Mit CSS3-Funktionen und dem Online-Tool CSSWarp lassen sich diese Pfadtexte nun kinderleicht auch als Plain-Text in die eigene Website integrieren.
Workshops & Schulungen von kulturbanause
Intensive Trainings mit hohem Praxisbezug.
Umfangreiche CSS3-Funktionen im Handumdrehen
CSSWarp erleichtert die Arbeit mit komplexen CSS3-Funktionen erheblich. Über ein sehr übersichtliches Interface habt Ihr die Möglichkeit alle wichtigen Optionen sehr einfach umzusetzen.
Zunächst schreibt Ihr einen beliebigen Text und vergebt anschließend Schriftart, Schriftschnitt, Schriftgröße und sogar Kerning. Besonders erwähnenswert ist die Integration der Google Webfont-Bibliothek.
Sobald der Text steht kann der Pfad gezeichnet werden. Hierbei könnt ihr auf vordefinierte offene oder geschlossene Pfade zurückgreifen und alternativ einen eigenen Pfad aufziehen. Auch die exakte Position von Kurvenpunkten über Koordinaten und die Textausrichtung kann individuell angepasst werden.
Wenn Ihr mit der Bearbeitung des Pfadtextes fertig seid könnt Ihr Euch den entsprechenden HTML-Code exportieren. Hierbei wird erfreulicher Weise nicht nur der CSS-Code angezeigt sondern eine vollständige HTML-Seite angeboten.
Ihr findet das Online-Tool unter:
Live-Demo des CSS-Pfadtextes
Ich habe mir ein Beispiel exportieren lassen und per iframe eingebunden.
Jetzt bist du gefragt!
Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!
