kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

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 und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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.

css-warp
Website von CSS Warp

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!

Das könnte dich auch interessieren

0 Kommentare

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.