c't 2/2019
S. 172
Know-how
CSS Shapes
Aufmacherbild

Stil in Bestform

Textumfluss gestalten mit CSS Shapes

So reich die Möglichkeiten von CSS auch sind: Bisher waren alle Elemente einer Webseite nur Rechtecke. CSS Shapes durchbricht diese fundamentale Einschränkung – und ist nun in den meisten Browsern verfügbar.

Eine eckige Box in einer eckigen Box in einer eckigen Box, alle mit Padding, Border und Margin – so sehen Webseiten durch die CSS-Brille betrachtet aus. Zwar kann man mit Stylesheets längst auch andere Formen als Vierecke zeichnen, wenn man zu Hacks mit Transparenz und border-radius greift.

Der Unterschied macht sich bemerkbar, wenn Sie Text um das Element herumfließen lassen. Statt sich elegant an einer Rundung oder Schräge auszurichten – wie in fast jeder Illustrierten zu sehen –, verläuft der linke Textrand in HTML und CSS stets exakt senkrecht. Diese Beschränkung im Web zu umgehen, war bisher nur mit SVG oder einzeln ausgerichteten Zeilen (manuell oder per JavaScript) möglich.

Alle heise-Magazine mit heise+ lesen

3,99 € / Woche

Ein Abo, alle Magazine: c't, iX, Mac & i, Make & c't Fotografie

  • Alle heise-Magazine im Browser und als PDF
  • Alle exklusiven heise+ Artikel frei zugänglich
  • heise online mit weniger Werbung lesen
  • Vorteilspreis für Magazin-Abonnenten
Jetzt unbegrenzt weiterlesen Vierwöchentliche Abrechnung.

Alle Ausgaben freischalten

2,95 € 0,25 € / Woche

Nach Testphase 2,95 € wtl.

  • Zugriff auf alle c't-Magazine
  • PDF-Ausgaben zum Herunterladen
  • Zugriff in der c't-App für unterwegs
Jetzt testen Nach Testphase jederzeit monatlich kündbar.

Ausgabe einmalig freischalten

4,90 € / Ausgabe

Diese Ausgabe lesen – ohne Abobindung

  • Sicher einkaufen im heise shop
  • Magazin direkt im Browser lesen
  • Dauerhaft als PDF behalten