CSS Shapes – neue Formen braucht das Web

Die Welt ist eine Scheibe und das Web ist eckig… so ungefähr könnte man anfangen um in das Thema einzusteigen. Aber ihr wisst ja, dass es anders ist.

Nachdem wir mit CSS3 schon die Möglichkeit bekommen haben, die Ecken einer Box optisch abzurunden, bleibt natürlich eines offen – der Text bricht nach wie vor an der „geraden” Box-/Bildkante um, dass heißt er orientiert sich z.B. nicht an der Kante von border-radius, erst recht nicht am Inhalt des Bilds. Die eigentliche Box bleibt viereckig. Das ändert CSS-Shapes.

Mit der neuen Eigenschaft shape-outside, die auf Initiative von Adobe als W3C-Standard etabliert wurde, können nun geometrische Formen zu einer Box hinzugefügt werden, so dass sich der Textfluß an den Formen orientiert. Diese Formen (Shapes) können mit folgenden Funktionen generiert werden:

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

einfaches Beispiel Kaffeetasse – circle()

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

Beispiel-Grafik:

Noch einfacher – der Textfluss kann sich auch am Border-Box-Model orientieren, also z.B. falls dem Element border-radius zugewiesen ist.

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

Shape: polygon()

Mit polygon() kann man ein Form mit mehreren Knotenpunkten erstellen – allerdings keine Beziér-Kurven-Formen, sondern nur gerade Linien zwischen den Knotenpunkten. Aber klar… umso mehr Punkte, umso mehr könnte man eine Kreisform abbilden.

einfaches Beispiel: Dreckeckform

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

(Hier im Beispiel sind nur 3 Werte angegeben, polygon() braucht normal min. 4 Werte um die Form zu schließen, allerdings wird die Form immer zum Ausgangspunkt hin automatisch geschlossen. Deshalb funktioniert das Beispiel mit dem Pfeil trotzdem wie erwartet.)

Shape aus Bildvorlage – url()

Zudem kann aber auch ein URL-Asset, als Shape-Vorlage verwendet werden.

Das wird dann wie folgt eingebunden:

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

Klassisches Anwendungsbeispiel ist eine Vorlage wie diese:

Ein Bild mit „transparenten” Flächen (bzw. der gleichen Hintergrundfarbe wie der Background). Hier wäre es doch praktisch, wenn der Text sich optimaler Weise an der „transparenten” Kante orientieren könnte.

HTML

<section class="intro">
    <h2>headline</h2>
    <img src="img/iphone6.jpg" height="450" width="600" alt="new iPhone 6">
    <p>Lorem</p>
    <p>Lorem</p>
    <ul>
        <li>Lorem ipsum dolor sit amet.</li>
        <li>Eius enim unde esse alias aut.</li>
        <li>Aliquam mollitia itaque officiis ab blanditiis.</li>
    </ul>
</section>  

CSS

.intro img {
    float: right;
    shape-outside: url(img/iphone6.png);
}

Weitere Eigenschaften um den Fluss des Textes um das Shape-Bild zu verändern:

shape-image-threshold: 0.5;
shape-margin: 1em;

• shape-margin dürfte klar sein – Abstand vom transparenten Bildkante nach außen.
• shape-image-threshold – Schwellenwert ab wann ein halbtransparenter Pixel als Shapes-Kante gilt. Ein Wert von 0.5 bedeutet, dass der Shape-Kantenverlauf an Pixeln mit mehr als 50% Deckung verläuft.

CSS-Shapes Demo

Codepen Live-Demo

See the Pen CSS Shapes url() by Sven Wolfermann (@maddesigns) on CodePen.

Shape-Masken Bild aus Photoshop-Vorlage erstellen

Recht einfach ist es, wenn man bereits eine freigestellte Grafik hat – z.B. in Photoshop auf einer transparenten Ebene. Beim Exportieren die Grafik reduziert man das Bild auf zwei (2) Farben und lässt Transparenz aktiviert. Fertig.

Unterstützte Bildformate für shape-outside: url()

• grundsätzlich wird jedes Format unterstützt
• bei animierten Bilder wird laut Spezifikation der erste Frame verwendet, funktioniert aber aktuell mit alles Frames
• Data URIs geht ebenfalls
• die Bilder müssen den gleichen Ursprung haben (same origin) oder die Nutzung muss durch CORS zugelassen werden hatte ich Probleme bei Codepen-Beispielen
• generierte Verläufe funktionieren ebenfalls, sowohl linear-gradient als auch radial-gradient
• in Zukunft noch mehr, wenn die CSS image Werte erweitert werden

Shape-Form mit Chrome-Devtools-Erweiterung erstellen

Die Chrome-Erweiterung CSS-Shapes-Editor ermöglicht es in den Chrome-Developer-Tools einem Element eine Shape-Form hinzuzufügen.

Probleme:

• CSS-Shapes ist eine Technik, die sich schwerlich in ein CMS integrieren lässt, wie ich finde. Nicht dass es nicht möglich ist, aber es verlangt den Redakteuren ein erhöhtes Mehrwissen ab. Ich sehe den Einsatz eher auf speziellen (statischen) Seiten. Sicherlich ist es möglich ein Tool zu bauen um Polygone zu editieren bzw. zu erstellen, lieber würde ich aber ein schönes Admin-Tool für Responsive Art-Direction Images sehen. Zudem muss dynamisches CSS generiert werden, bzw. Inline-Styles, was natürlich nicht das optimalste ist.
• Aktuell können CSS-Shapes nur auf Elemente, die floaten angewandt werden, nicht aber auf Hintergrundbilder. Bedeutet also, die müssen, auch wenn es nur dekorierende Bilder sein sollten, ins Markup eingebunden werden. Wenn zudem ein Shape-Bild verwendet wird, dann werden zwei Bilder geladen. Hier sollte man auf die Performance acht geben, dass nicht zu viele Daten geladen werden. Das zusätzliche Shape-Bild ist sicherlich recht klein, aber der zusätzliche Request ist natürlich unschön. Es könnte auch ein und dasselbe transparente PNG24 für die Darstellung und die Form verwendet werden, aber hierbei wird das Bild leider trotzdem 2x geladen (quasi 1x von HTML & 1x von CSS).

Linktipp: wer bei transparenten PNG-Bilder die Datenmenge reduzieren will – und das sollte jeder tun – dem sei pngmini.com oder tinypng.com ans Herz gelegt.

Shapes circle() & url() Beispiel

Browser-Support:

Aktuell unterstützen diese Technik

• Chrome 37 (Opera 24)
• Safari 8 mit -webkit-prefix

Der Fallback ist das was man bereits kennt, also im Moment ist das Feature ein Enhancement. Es gibt zwar ein Polyfill, den würde ich aber nicht einsetzen, wenn es sich nicht vermeiden lässt, denn der Polyfill generiert in nicht unterstützten Browsers massig zusätzlichen Code, dass geht natürlich zu Lasten der Scroll-Performance.

Adobe Blogartikel über den CSS Shapes Polyfill

Man kann dieses Feature natürlich auch mit der nativen CSS-Methode @supports einbinden.

@supports feature query

@supports (shape-outside: circle(50%)){
  /* styles only for browsers which support CSS Shapes */
  .element {
    shape-outside: circle(50%);
  }
}

Beispiel:

See the Pen Responsive CSS Shapes Google Map by Sven Wolfermann (@maddesigns) on CodePen.

Ärgerlich ist, dass Safari @supports nicht unterstützt, so dass hier shape-outside nicht angezeigt würde obwohl Safari die Eigenschaft ja unterstützt. Also doch wieder Modernizr Feature-Detection.

shape-inside()

Die Eigenschaft shape-inside(), die in manchen Tutorials genannt wurde, wird es zunächst erstmal nicht geben. Mit shape-inside soll es möglich sein, die eigene Form einer (Text-)Box zu manipulieren. Das ist dann praktisch, wenn man background-image auf einer Box verwendet. Das ist allerdings nicht ganz trivial in Browser zu integrieren, da auch Eigenschaften wie position: absolute, flexbox & Co. berücksichtigt werden müssten, was nicht so trivial ist.

Codepen-Collection

Auf codepen.io habe ich unterschiedlichste Beispiele zusammengestellt. Einige ganz simple, andere mit Fallback für nicht unterstützte Browser.

Weitere Informationen / Blog-Posts

• CSS Shapes 101
• Creating Non-Rectangular Layouts With CSS Shapes
• CSS Shapes: Breaking the Rectangular Design Shackles
• CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Moduls

Habt ihr schöne Anwendungsbeispiele für CSS-Shapes? Lass es mich wissen.