HTML Texte mit CSS formen

Das Layout von HTML Fließtext ist auf den meisten Websites eine recht langweilige Angelegenheit. Gerne würde mancher Webdesigner auf die aus dem Printbereich bekanten Layoutmöglichkeiten zurückgreifen. So ist es beim Desktop-Publishing kein Problem, etwa runden Text um ein rundes Bild herumfließen zu lassen. Bei Verwendung der CSS-Eigenschaft float fließt der Text zwar um das Bild herum, allerdings wieder in eckiger Form. Das verwundert nicht, denn Websites bestehen nun mal aus viereckigen Kästen, die übereinander, nebeneinander oder ineinander gestapelt werden.

Textblöcke verformen

Wem die Rechteckformen beim Textlayout zu langweilig sind, ist gezwungen unzählige DIVs anzulegen und zu positionieren, um die Illusion runder Texte zu erschaffen. Alternativ kann man auf die Dienste eines Online-Editors namens CSS Text Wrapper zurückgreifen. Die Bedienung ist denkbar einfach: Rechts und links steht eine schwarze Linie zur Verfügung, die man durch das Setzen von beliebig vielen Kontrollpunkten verformen kann. Mit wenigen Klicks lässt sich auf diese Weise z. B. eine abgeschrägte Textführung erschaffen. Welche Formen möglich sind, zeigen einige Beispiele auf der Demoseite, wo beispielsweise Text in die Form eines Weinglases gebracht wurde. Auch das Umfließen von Bildumrissen lässt sich problemlos bewerkstelligen, da es möglich ist, eigene Bilder hochzuladen, die im Editor angezeigt werden.

Zunächst wird mit Standardvorgaben gearbeitet. Sie haben jedoch auch die Möglichkeit eigenen Text einzufügen, rudimentäre Schriftformatierungen vorzunehmen und die Größe des Arbeitsbereiches zu verändern. Nach einem Klick auf “Update Settings” wird der Quelltext fix und fertig ausgegeben, und zwar in drei Varianten:

  1. XHTML mit Inline-CSS
  2. XHTML für ein externes Stylesheet auf Basis von Klassen
  3. Javascript

Natürlich ist nicht ratsam, sämtliche Texte mit diesem Hilfsmittel zu layouten. Sparsam eingesetzt kann diese Technik – insbesondere im Werbekontext – für besondere Effekte sorgen.

Text in Kurven- und Kreisform

Grafikprogramme wie Photoshop und Illustrator ermöglichen es, einem Text einen Pfad zuzuweisen und ihn in beliebigen Formen verlaufen zu lassen. Solche Pfadtexte meistens als Bilddatei abgespeichert und schließlich in die Homepage eingebunden. Wer lieber HTML-Text verwenden möchte, sollte sich den Online-Generator CSSWarp näher anschauen. Er generiert Text, der sich an einer gebogenen Linie bzw. einer Kreisform ausrichtet. Über ein sehr übersichtliches Interface lässt sich beliebiger Text einfügen und die Schrift mit verschiedenen Variablen (Schriftart, Schriftgröße Zeilenhöhe und Kerning) manipulieren. Die Kurvenpunkte können entweder manuell eingegeben oder mit der Maus gezeichnet werden. Durch Anklicken der Option “Generate code” wird abschließend der notwendige HTML- und CSS-Code angezeigt, der problemlos in die eigene Homepage eingebunden werden kann.

Über Jens Kilgenstein

Ich bin seit über zehn Jahren im Bereich Webdesign tätig und betreue seitdem kleine und große Kunden bei der Konzeption und Umsetzung von Webprojekten. → Zum Profil

, ,

Ebenfalls Lesenswert:

Bisher keine Kommentare.

Hinterlasse eine Antwort