Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 39

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

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

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

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.

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.

Links und Literatur

  1. CSS-Shapes-Editor
  2. Polyfill
  3. W3C Clipping Paths
  4. Clippy
  5. Clip-Path-Generator
  6. Browser-Support für clip-path
  7. clip-path bei Videos

Finde einen Job, den du liebst zum Thema Webdesign, Webentwickler

1 Reaktionen
hipp.ms
hipp.ms

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

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen