Textfluss in Form – Die praktische Nutzung von CSS-Shapes
Kommentare

Im Laufe der Zeit hat sich das Web deutlich verändert – auch, was die Möglichkeiten angeht, Text in Form zu bringen. Mit CSS3 konnten bisher zwar nur die Ecken einer Box abgerundet werden; dank des neuen W3C-Standards shape-outside lassen sich nun auch verschiedene Formen wie Kreis, Ellipse oder Polygon auf eine Box anwenden und der Text so anhand dieser ausrichten. Sven Wolfermann erklärt, wie sich CSS Shapes praktisch nutzen lässt.

Mit shape-outside können Kreise, Ellipsen oder Polygone auf eine Box angewandt werden; der Textverlauf orientiert sich dann an den zugefügten Formen. So lassen sich zum Beispiel Design-Modelle, die bisher nur im Print möglich waren, auch auf das Web übertragen und der Website so ein Hingucker verpasst werden – wobei man bei der Nutzung Vorsicht walten lassen sollte, um den Leser nicht zu sehr abzulenken.

Das einfachste Beispiel, wie der Textfluss an einer Form ausgerichtet werden kann, ist der Kreis, etwa einer Kaffeetasse. Doch auch mit Polygonen lassen sich unterschiedliche Designs erstellen, indem eine Form an mehreren Knotenpunkten ausgerichtet wird und diese zum Ausgangspunkt geschlossen wird.

CSS-Shapes ermöglichen jedoch nicht nur das Anwenden einer Form, mit url() kann auch eine Form aus einer Bildvorlage erstellt werden, bei der der Text sich an der transparenten Kante orientiert. Anschließend lässt sich der Textfluss mit Eigenschaften wie shape-margin oder shape-image-threshold weiter verändern. Besonders einfach lässt sich solch ein Bild mit transparenten Flächen in Photoshop erstellen, und auch mit der Chrome-Erweiterung CSS-Shapes-Editor können Elementen in den Chrome-Developer-Tools eine Form hinzugefügt werden.

Nutzung von CSS-Shapes ist nicht immer problemlos

CSS-Shapes bietet viele Möglichkeiten, Text ansprechender darzustellen. Allerdings ist deren Einsatz nicht ganz problemlos. Einerseits lasen sich CSS-Shapes nur recht schwierig in ein Content-Management-System integrieren und erfordern einiges Hintergrundwissen bei den Redakteuren. Andererseits können CSS-Shapes bisher nur auf gefloatete Elemente angewandt werden, zudem werden bei Shape-Bildern immer zwei Bilder geladen, was schnell zu Lasten der Performance gehen kann.

Auch werden CSS-Shapes nicht in allen Browsern unterstützt und so bei manchen Browsern auf die Fallback-Lösung zurückgegriffen – der eigentlich gewünschte Effekt kann somit nicht immer erzielt werden. Trotzdem kann CSS-Shapes bei der richtigen Anwendung eine gute Möglichkeit sein, textlastigen Content erheblich aufzuwerten.

Wie sehen CSS-Shapes nun in Aktion aus? Sven Wolfermann hat dazu einige Live-Beispiele mit Fallback-Lösungen für nicht unterstützte Browser auf Codepen zusammengestellt, und nicht nur das: Gleichzeitig zeigt er auch anhand eines kurzen Tutorials, wie sich zum Beispiel Grafiken mit transparenten Flächen in Photoshop erstellen lassen. Damit dürfte er Web-Designern einigen Anreiz bieten, den neuen Standard in Web-Projekten praktisch umzusetzen.

Aufmacherbild: Wooden shape sorter toy von Shutterstock / Urheberrecht: viki2win

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -