Vorheriger Artikel Nächster Artikel

CSS-Shapes und clip-path: So funktionieren die neuen Stylesheet-Techniken

Aus dem
t3n Magazin Nr. 39

03/2015 - 05/2015

Jetzt kaufen

Die Welt ist eine Scheibe und das Web ist eckig... In unseren Browserfenstern zumindest fließt Text immer noch fast ausschließlich um rechteckige Blöcke herum. Die neuen Stylesheet-Techniken CSS-Shapes und clip-path sorgen dafür, dass es nicht so bleiben muss. Wir verraten euch, wie ihr sie einsetzt.

CSS-Shapes und clip-path: So funktionieren die neuen Stylesheet-Techniken

CSS-Shapes und clip-path (Foto: Floortje / iStock)

t3n 39 ist ab dem 25. Februar im Handel erhältlich. Schwerpunkt-Thema: „Die neuen Chefs – Spielend führen statt streng regieren.“ Im Rahmen des Schwerpunkts haben wir mit vielen Führungskräften gesprochen, die einen demokratischeren und zeitgemäßeren Führungsstil pflegen.
t3n 39 ist ab dem 25. Februar im Handel erhältlich. Schwerpunkt-Thema: „Die neuen Chefs – Spielend führen statt streng regieren.“ Im Rahmen des Schwerpunkts haben wir mit vielen Führungskräften gesprochen, die einen demokratischeren und zeitgemäßeren Führungsstil pflegen.

Viele Weblayouts sind heutzutage viereckig aufgebaut. Und das ist nicht nur dem aktuellen Trend geschuldet, sondern auch dem Mangel an Möglichkeiten, in CSS Layouts mit runden oder schrägen Kanten umzusetzen. Nachdem wir mit CSS3 Mittel und Wege bekommen haben, die Ecken einer Box optisch abzurunden, fehlt bisher ein entscheidendes Detail – der Text bricht nach wie vor an der „geraden” Box-/Bildkante um, das heißt er orientiert sich nicht an der Form des border-radius und erst recht nicht am Inhalt des Bildes. Die eigentliche Box bleibt viereckig. Das ändert CSS-Shapes. Darüber hinaus erlaubt die Eigenschaft clip-path, Bilder oder andere Elemente mit individuellen Formen zu beschneiden. Diese Effekte, die sich bisher nur mit Photoshop umsetzen ließen, sind jetzt in CSS verfügbar und somit auch animier- und veränderbar.

Die neue Eigenschaft shape-outside, die auf Initiative von Adobe als W3C-Standard etabliert wurde, fügt einer Box geometrische Formen hinzu, an denen sich der Textfluss orientiert. Diese Formen (Shapes) lassen sich mit folgenden Funktionen generieren:

  • circle() - Kreis
  • ellipse() - Ellipse (ovale Kreisform)
  • inset() - orientiert sich grundlegend an der Box
  • polygon() - individuelle Form mit mehreren Knotenpunkten

Beispiel shape-outside: circle()

img.coffeecup {
	float: right;
	shape-outside: circle(50%);
}

Listing 1

Und es geht noch einfacher – der Textfluss kann sich auch am Border-Box-Modell orientieren, wenn beispielsweise dem Element bereits border-radius zugewiesen ist:

Unterschiedliche Box-Modelle für Shapes

shape-outside: margin-box | border-box | padding-box | content-box;

Listing 2

Individuelle Formen

Mit polygon() lässt sich eine Form mit mehreren Knotenpunkten erstellen – es erlaubt allerdings keine Bézier-Kurven, sondern nur gerade Linien zwischen den Knotenpunkten. Geschwungene Formen sind also nur durch Verwendung vieler Punkte näherungsweise darstellbar. Das folgende Beispiel definiert eine Dreieckform:

Dreieckiges Polygon

.triangle {
    shape-outside: polygon(0 0, 100% 0, 50% 100%, 0 0);
}

Listing 3

Shape-Form aus einem Bild

Auch Bilder lassen sich als Shape-Vorlage verwenden. Sie werden wie folgt eingebunden:

Bild als Shape

img {
	float: right;
	shape-outside: url(path/to/image-with-shape.png);
}

Listing 4

Weitere Eigenschaften, um den Fluss des Textes um das Shape-Bild herum zu verändern, sind shape-image-threshold und shape-margin.

  • shape-margin – Abstand von der Form nach außen.
  • shape-image-threshold - Schwellenwert, ab wann ein halbtransparenter Pixel als Shape-Kante gilt. Ein Wert von 0.5 bedeutet, dass die Kante der Form an Pixeln mit mehr als 50% Deckung verläuft.

Abonniere jetzt t3n-News über WhatsApp und bleib mobil auf dem Laufenden!
t3n-News via WhatsApp!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
Eine Antwort
  1. von hipp.ms_Webdesigner_Stuttgart am 28.02.2015 (13:00 Uhr)

    Sehr interessant, aber muss man ausgiebig testen, wie es sich mit Responsive Designs verträgt, wenn viele Elemente variabel sind und sich die Breite und Höhe der Textblöcke ständig ändert.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?