kulturbanause Blog

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

CSS Shapes – Textumfluss, Konturenführung und individuelle Formen für Websites

Normalerweise erzeugen alle HTML-Elemente auf einer Website eine rechteckige Box. Das geschieht auch, wenn sie nicht rechteckig aussehen, da sie beispielsweise mit der CSS-Eigenschaft border-radius optisch so verändert wurden, dass sie abgerundet wirken. Texte und andere Elemente richten sich nun immer an den rechteckigen Boxen aus, was optisch unschöne Ergebnisse erzeugen kann. Mit den sog. »CSS Shapes« ist es möglich, nicht rechteckige Formen zu erzeugen und beispielsweise Texte exakt um ein Element herumfließen zu lassen. Vergleichbar mit der Konturenführung aus InDesign. Somit sind sehr interessante und magazinähnliche Layouts möglich.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

Allgemeine Infos

CSS Shapes funktionieren nur mit gefloateten Elementen. Es stehen einige geometrische Grundformen wie Kreise, Ellipsen und Rechtecke zur Verfügung. Darüber hinaus habt ihr die Möglichkeit Polygone zu zeichnen und Grafiken, die eine Alphamaske besitzen als Shape zu verwenden.

CSS Shape mit »shape-outside« erstellen

Mit der CSS-Eigenschaft shape-outside definieren wir die äußere Form des Elements. Um diese Form kann beispielsweise Text herumfließen.

Für shape-outside stehen uns folgende Funktionen zur Verfügung:

  • circle() erzeugt einen Kreis
  • ellipse() erzeugt eine Ellipse
  • inset() erzeugt ein Rechteck
  • polygon() erzeugt eine beliebige Form mit mehr als drei Ecken
  • url() erzeugt eine Form anhand der transparenten Pixel eines Bildes

Eigenschaften für CSS Shapes

Neben shape-outside existieren noch weitere CSS-Eigenschaften im Zusammenhang mit Shapes

shape-margin
shape-margin legt einen Abstand zwischen dem äußeren Rand der Form und dem umfließenden Text fest. Dabei kann der Abstand nicht über die durch shape-outside erstellte Form hinausgehen
shape-image-treshold
shape-image-treshold legt durch einen Wert zwischen 0.0 und 1.0 fest ab welcher Deckkraft ein Pixel des Bildes zur Erstellung der Form url() genutzt wird. Ein Wert von 0.7 bedeutet, dass Pixel mit einer Deckkraft unter 70% nicht Teil der Form sind
shape-inside
shape-inside ist ein Feature, das zum Veröffentlichungszeitpunkt dieses Beitrags noch nicht in unterstützt wird. Es soll ermöglichen Text passgenau in eine Form zu füllen anstatt ihn außen entlang fließen zu lassen
shape-padding
shape-padding soll zukünftig den inneren Abstand zwischen Text und Form festlegen wenn diese durch shape-inside erstellt wurde
shape-outside 
shape-outside  legt wie bereits beschrieben die äußere Form des Elements fest

Beispiele für CSS Shapes

In den folgenden Beispielen könnt ihr sehen, wie Text um verschiedene CSS Shapes fließt und wie die Eigenschaften eingesetzt werden können.

Beispiele anschauen 

Die umschließende Box und die Shapes könnt ihr mit dem Entwicklertool eures Browser sichtbar machen.

Links: Form ohne Shape. Rechts: Form mit elliptischem Shape
CSS Shapes in den Chrome Entwicklertools. Links: Form ohne Shape. Rechts: Form mit elliptischem Shape

circle()

Mit circle() wird ein Kreis gezeichnet. Der folgende Code erzeugt einen Kreis dessen Radius 50% von Breite und Höhe des Elements beträgt. Folglich ist er genau so groß wie das Element.

<div class="shape-circle"></div>
<p>umfließender Text … </p>
.shape-circle {
  width: 150px;
  height: 150px;
  background: url(circle.png) 0 0 no-repeat;
  shape-outside: circle(50%);
}

ellipse()

Mit ellipse() wird eine Ellipse erzeugt. Innerhalb der runden Klammern wird der Radius der X- und Y-Achse bestimmt. Zusätzlich kann mit dem Schlüsselwort at und darauf folgenden Koordinaten das Zentrum der Ellipse innerhalb der umschließenden Box verschoben werden. Diese Möglichkeit besteht auch für circle();

<div class="shape-ellipse"></div>
<p>umfließender Text … </p>
<div class="shape-ellipse2"></div>
<p>umfließender Text … </p>
.shape-ellipse {
  width: 250px;
  height: 150px;
  background: url(ellipse.png) 0 0 no-repeat;
  shape-outside: ellipse(125px 75px);
}

.shape-ellipse2 {
  width: 250px;
  height: 150px;
  background: url(ellipse.png) -125px 0 no-repeat;
  shape-outside: ellipse(125px 75px at 0% 50%);
}

inset()

Mit inset() kann eine rechteckige oder abgerundete Form erzeugt werden. Die vier Werte definieren jeweils den Abstand der vier Seiten des Rechtecks zum Rand der umschließenden Box. Mit einer zusätzlichen Pixelangabe und dem Schlüsslwort round könnt ihr die Ecken abrunden.

<div class="shape-inset"></div>
<p>umfließender Text … </p>
.shape-inset {
  width: 250px;
  height: 150px;
  background: url(inset.png) 0 0 no-repeat;
  shape-outside: inset(0px 0px 0px 0px round 50px);
}

polygon()

Mit polygon() könnt ihr im Prinzip jede Form erzeugen. Jedes Zahlen-Paar definiert die Position einer Ecke des Vielecks innerhalb der umschließenden Box. Der erste Wert verschiebt die Ecke nach rechts auf der X-Achse und der zweite nach unten auf der Y-Achse.

<div class="shape-polygon"></div>
<p>umfließender Text … </p>
.shape-polygon {
  width: 250px;
  height: 220px;
  background: url(polygon.png) 0 0 no-repeat;
 shape-outside: polygon(0 0, 163px 27px, 200px 100px, 200px 130px, 170px 180px, 110px 210px, 0 220px);
}

url()

Es ist auch möglich eine Form anhand eines Bildes zeichnen. Dieses muss einen Alphakanal enthalten (z. B. transparente Pixel) und aus derselben Quelle stammen (siehe auch CORS). Bei Webseiten, die aus lokal geöffneten Dateien generiert wurden, funktioniert url() nicht.

<img src='herz.png' class="shape-url" />
<p>umfließender Text … </p>
.shape-url {
  shape-margin: 20px;
  width: 250px;
  shape-outside: url('herz.png');
}

Browser-Support & Tools

shape-outside wird derzeit von Chrome und Opera unterstützt. Für Safari wird das Vendor-Prefix -webkit- benötigt. Wenn ihr CSS Shapes auf eurer Webseite nutzen wollt und alle Browser unterstützen möchtet, dann könnt ihr diesen Polyfill von Adobe nutzen. Den exakten Browsersupport entnehmt ihr bitte der Website caniuse.com

Wenn ihr euch die Arbeit mit Shapes erleichtern wollt, werft einen Blick auf den CSS Shape Editor für Chrome, oder auf unsere stetig wachsende Liste mit Web Tools.

Links / Quellen

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

2 Kommentare

  1. R.Karrengarn

    Verfasst am 11. Juli 2016 um 16:12 Uhr.

    Hallo zusammen,

    in den Beispielen ist die Shape nun immer oben links im „Block“. Gibt es auch Lösungen für eine Positionierung der Shape an anderer Stelle (vorzugsweise für die Positionierung unten rechts)? Mit einem „float:right“ bekomme ich die shape immerhin schonmal nach oben rechts. Habe dazu grad noch keine Idee – daher mal die Frage in die Runde.

  2. Lorena

    Verfasst am 8. August 2016 um 15:36 Uhr.

    Kann man auch Formen, die man über Koordinaten angibt (wie z.B. auf einer Landkarte) umfließen lassen?

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.