t3n News Entwicklung

CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Modul

CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Modul

Mit CSS-Shapes wird es Webworkern in Zukunft möglich sein, Texte um Objekte fließen zu lassen wie in einem Satzprogramm. Wir verraten, wie CSS-Shapes funktionieren und wie du sie einsetzen kannst.

CSS3-Shapes: Diese Möglichkeiten eröffnen sich mit dem neuen CSS-Modul

CSS3 wird immer besser. (Grafik: t3n)

Das technische Repertoire, das Webworkern für die Realisierung von Webseiten zur Verfügung steht, ist mehr als beachtlich. Ältere Browser außen vor gelassen, lässt sich mit HTML5, und JavaScript fast alles realisieren, was man sich für eine Webseite vorstellen kann. Dennoch arbeiten und denken wir weiterhin in Rechtecken. Nicht nur das Browser-Fenster, auch jedes Element auf unseren Webseiten hat eine rechteckige Form und beinhaltet weitere rechteckige Elemente.

Die CSS-Shapes-Spezifikation soll das ändern und Webworkern mehr Freiräume für die Gestaltung von Webseiten geben.

Schon heute ist es möglich, mit CSS3 und Pseudo-Elementen beeindruckende geometrische Formen zu entwickeln. Und doch ist es für Webworker immer noch kaum möglich, die aus Layout- und Grafik-Programmen wie Photoshop, Illustrator und InDesign bekannten Funktionen wie das Umfließen verschiedener Formen mit Text elegant zu lösen.

Die neue CSS-Shapes-Spezifikation, die von Adobe im Jahr 2012 vorgestellt worden ist, soll das ändern. Sie ermöglicht es Webworkern, Inhalte um komplexe Formen fließen zu lassen.

Ein Wermutstropfen vorab: Der Browser-Support

Bevor du dich in den Code stürzt, ein kleiner Wermutstropfen vorweg: Die CSS-Shapes-Spezifikation ist derzeit nur eine Empfehlung und wird nur in Webkit Nightly und Chrome Canary unterstützt – hierfür müssen gegebenenfalls experimentelle Features separat im Browser aktiviert werden (http://html.adobe.com/webplatform/enable/).

Das Modul 1 der CSS-Shapes-Implementation hat jedoch bereits „Candidate Recommendation Status“ erreicht, sodass es nur eine Frage der Zeit ist, bis andere Browser diese implementieren. Auch sollte die Syntax relativ unverändert bleiben.

CSS-Shapes: die Basics

Du kannst auf jedes Element deiner Webseite Shapes mit Hilfe der Shape-Properties anwenden. Der jeweiligen Shape-Property wird eine Shape-Funktion, in der du die benötigte Form festlegst, als Wert übergeben.

.element {
shape-outside: polygon(/*deine Parameter*/);
}

Für die Erzeugung von Shapes stehen dir die folgenden Funktionen zur Verfügung:

  • circle()
  • ellipse()
  • inset()
  • polygon()

Die Parameter für die einzelnen Funktionen werden wir später in diesem Artikel behandeln. Neben der oben genannten Funktionen kann ein Shape auch aus einem Bild mit Alpha-Kanal definiert werden.

Die oben genannten Funktionen können für die shape-outside- und shape-inside-Property genutzt werden. Benutzt du shape-outside, wird der Content um die Form herum geführt. Benutzt du shape-inside, wird der Content im shape positioniert.

Die shape-outside-Property kann außerdem zusammen mit der shape-margin-Property genutzt werden, die einen Abstand um das jeweilige Shape erzeugt. Die Property shape-inside kann jedoch im Zusammenhang mit shape-padding eingesetzt werden, um einen Abstand innerhalb der Shapes zu erzeugen.

Das Zuweisen von Shapes auf Elemente ist ziemlich simpel. Damit das Ganze funktioniert, muss das Element jedoch zwei Voraussetzungen erfüllen.

  • Das Element muss gefloatet sein (in Zukunft könnte sich das aber möglicherweise ändern).
  • Das Element muss eine Ausgangsgröße haben. Du musst also width und height für das Element setzen, damit ein Koordinatensystem für das Element erzeugt werden kann.

CSS-Shapes werden innerhalb einer „Referenz-Box“ erzeugt. Zusätzlich zu der Höhe und Breite des Elements werden die Box-Model-Boxen – also margin box, content box, padding box und border box – zur Eingrenzung und Berechnung des Shape-Elements benutzt. Per Default wird die margin-box referenziert.

Aber was ist eigentlich mit Responsive Web Design? Keine Sorge: die responsiven Eigenschaften von Elementen werden dadurch nicht beeinträchtigt. Da CSS-Shapes die Ausgangswerte für die Erstellung des virtuellen Koordinatensystems in verschiedenen Längenangaben – also auch Prozent sowie vh und vw – enthalten, können sie auch im Responsive Webdesign eingesetzt werden.

CSS-Shapes einsetzen

Nun geht es erst einmal ans Testen. Das erste Ziel ist das Positionieren von Texten um ein kreisförmiges Bild.

Das Markup hierfür könnte wie folgt aussehen:

<div class="element">
<img src="http://fakeimg.pl/400x400/282828/eae0d0/">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci?</p>
<p>Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi.</p>
</div>

Um das Bild links neben dem Text erscheinen zu lassen, könntest du auf folgendes zurückgreifen:

.element {
width:500px;
}
img {
float: left;
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 15px;
}

CSS-Shapes: circle()

Das Problem an dieser Lösung: Der Text fließt nicht um das Bild herum. Mit CSS-Shapes kannst du das aber ganz leicht ändern. So würde das angepasste CSS aussehen:

img {
float: left;
width: 150px;
height: 150px;
border-radius: 50%;
margin-right: 10px;
shape-outside: circle(farthest-side at 25% 25%) margin-box;
shape-margin: 10px;
}

CSS Float ohne CSS-Shape
Heutige Browser kennen keine Shapes, sodass auch runde Objekte wie Rechtecke behandelt werden. (Screenshot: t3n)

Du solltest nun sehen, dass der Text den „virtuellen“ Kreis, den du über das Bild gelegt hast, umfließt. Browser, die das CSS-Shape-Feature nicht unterstützen, erhalten automatisch ein Fallback auf die vorhergehende Lösung.

Was genau wird hier aber definiert? Die shape-outside-Property bekommt die Funktion circle() übermittelt. Die circle()-Funktion kann die Parameter für den Radius und die Position der Shapes entgegennehmen. Der Radius der Kreises kann mit beliebigen Einheiten wie px, em, pt etc. festgelegt werden. Es ist aber auch möglich, ihn mit closest-side oder furthest-side zu definieren.

Der Wert closest-side ist der Standardwert und nimmt sich den Abstand vom Zentrum des Elements zur nächsten Kante als Wert. furthest-side dagegen orientiert sich am Abstand vom Zentrum des Elements zur am weitesten entfernten Kante.

CSS-Shapes Circle
Mit der circle()-Funktion kannst du einen virtuellen Kreis erzeugen, der vom Text umflossen wird. (Screenshot: t3n)

shape-outside: circle(farthest-side at 25% 25%);

Definiert einen Kreis mit dem Radius von der halben Länge der längsten Seite und positioniert ihn auf den Koordinaten 25% 25% im Koordinaten-System des Elements.

shape-inside: circle(250px at 500px 300px);

Positioniert einen Kreis auf den Koordinaten XY(500px,300px) mit einem Radius von 250px.

CSS-Shapes: ellipse()

Die ellipse()-Funktion funktioniert genau so wie circle() mit dem Unterschied, dass sie zwei Radius-Parameter entgegennimmt.

CSS-Shapes: inset()

Die inset()-Funktion dient dazu, rechteckige Shapes in einem Element anzulegen. Sie kann aber auch dazu benutzt werden, beispielsweise rechteckige Elemente mit abgerundeten Kanten, die umflossen werden können, anzulegen.

img {
float:left;
width:150px;
height:150px;
border-radius: 50px;
padding:10px;
shape-outside: inset(0px round 50px) border-box;
}

CSS-Shapes Inset
Die inset()-Funktion eignet sich beispielsweise zum Umfließen von gerundeten Ecken. (Screenshot: t3n)

CSS-Shapes: polygon()

Die polygon()-Funktion lässt dich komplexere Formen mit einer unbegrenzten Anzahl von Punkten definieren. Die Funktion akzeptiert ein Set von Koordinaten, die jeweils einen Punkt des Shapes definieren.

Im nachfolgenden Beispiel floaten wir den Text um den Leuchtturm in einem Foto.

CSS-Shape Polygon
Mit der polygon()-Funktion können CSS-Shapes Formen mit beliebig vielen Fixpunkten annehmen. (Foto: Felix Jäger)

Die Koordinaten der Punkte können mit Prozenten oder anderen Längenangaben wie Pixeln definiert werden. Mit der Property shape-outside und der polygon()-Funktion definierst du nun die Form, um die der Text fließen soll.

img {
float: right;
width: 800px;
height: 533px;
shape-outside: polygon(
60% 20%,
100% 20%,
100% 100%,
43% 100%,
43% 58%,
51% 58%,
51% 25%,
60% 20%,
100% 20%,
100% 100%
);}

Shapes mit Bildern definieren

Shapes können auch mit Bildern erstellt werden. Das kann besonders bei komplexen Shapes sehr nützlich werden. Hierbei wird die Form durch die Pixeln definiert, die höher als ein bestimmter Wert sind. Der Standard hierfür liegt bei 0.0 (100 % transparent), kann aber auch mit der shape-image-treshold-Property gesetzt werden, sodass jedes Pixel, das nicht transparent ist, als Teil des Shapes erkannt wird.

So kannst du mit dem nachfolgenden Bild und Code das gleiche Ergebnis wie mit dem mühseligen Zusammenschreiben von Koordinaten erzielen.

CSS-Shape Alpha-Kanal
Mit dieser PNG-Grafik kannst du das selbe Ergebnis erzielen wie mit Koordinaten im CSS. (Grafik: t3n)

img {
float: right;
width: 800px;
height: 533px;
shape-outside: url(leuchtturm-alpha.png);
shape-image-threshold: 0.5;
shape-margin: 15px;
}

CSS-Shapes: Bitte mehr davon

Das CSS-Shapes-Modul ist noch in einem frühen Anfangsstadium. Die gestalterischen Möglichkeiten, die Shapes für Webworker ermöglichen, haben es aber in sich und lassen sie Dinge tun, die sonst nur statischen Medien vorbehalten waren. Wir freuen uns auf die Weiterentwicklung des Moduls und die hoffentlich baldige Implementation in aktuelle Browser.

Was hältst du von CSS-Shapes? Welches CSS-Feature vermisst du am meisten?

Vielleicht auch interessant: Ihr wollt Dropdown-Menüs mit CSS erstellen?? Hier findet ihr Tutorials und Demos, die euch weiterhelfen.

via alistapart.com

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
5 Antworten
  1. von Thomas am 31.08.2014 (05:30 Uhr)

    Sehr geil, hatte ich noch gar nichts von gehört. Insb. der Textumfluss, sexy. Aber bis das sinnvoll produktiv eingesetzt werden kann wird leider noch ordentlich Zeit ins land gehen

    Antworten Teilen
  2. von Nettes Feature am 31.08.2014 (12:07 Uhr)

    Halb-Off-Topic: Aber geht inzwischen, das man Text so in mehreren Rechteckeln fliessen lässt, das man Spalten nebeneinander anordnet und nicht mehr hoch-runter-scrollen muss ? Breite Fernseher (UHD), Videobrillen und Tabletts quer würde das sinnvoll machen. Typographisch und Lese-Physiologisch sind die meisten Webseiten auf aktuellen Full-HD- oder Retina-Monitoren einfach oft zu breit und unangenehm und oft zeitaufwendig zu lesen.

    Antworten Teilen
  3. von bdfb am 31.08.2014 (22:37 Uhr)

    Klar geht das. CSS-Columns, oder Kombination aus Floats/Inline Block/Table-Cell in Verbindung mit Media Queries helfen da.
    Allerdings ist der User es gewohnt vertikal zu scrollen, sodass das gegebenenfalls er verwirrt als nutzt.

    Antworten Teilen
  4. von florence.maurice am 01.09.2014 (10:35 Uhr)

    zwei Mal ein kleiner Tippfehler "furthest" statt "farthest".

    Übrigens funktionieren die Angaben bei circle() genauso wie bei radialen Farbverläufen in CSS3.

    Antworten Teilen
  5. von Nettes Feature am 03.09.2014 (10:33 Uhr)

    @bdfb: Danke für den Hinweis.
    Bei vielen Shop-Systemen (Amazon) und Apps ist links-Rechts-Scrollen bei Produkten "Kunden kauften auch" "Kunden haben sich auch noch angesehen"... durchaus inzwischen üblich und funktioniert dafür wohl auch besser als hoch-runter-Scrollen wie es vor einiger Zeit mal irgendwo einen Bericht gab.

    Wichtig ist halt das man einen Teil (die ersten 2-5) Buchstaben der rechtesten Spalte sieht so das man schnell erkennt, das es dort weitergeht. Linien oder farbliche Abgrenzungen sind dabei vielleicht auch hilfreich.
    Wer nicht will, braucht ja nicht, aber wenn es ein paar Sites nutzen würden, würde es sich vielleicht schnell verbreiten. In Verbindung mit CSS-Shapes könnte man dort auch Werbung einbauen.
    Wichtig ist auch, das man die Schriftgröße ändern kann und der Leser weiss, das man es problemlos Ausdrucken und Abspeichern kann.

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema CSS
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder

Im besten Fall sorgen CSS für kompaktes und gekapseltes Styling für Webseiten. Im Schlimmsten Fall wird CSS zur Hölle in Sachen Übersichtlichkeit und Redundanz. CSS Purge zeigt, welche Seiten die … » weiterlesen

CSS3-Transform: Wir peppen eure Bildunterschriften mit ein bisschen Magie auf
CSS3-Transform: Wir peppen eure Bildunterschriften mit ein bisschen Magie auf

Bildunterschriften auf Webseiten müssen nicht immer langweilig sein. Wir zeigen euch, wir ihr mit etwas CSS-Magic und einer kleinen Lib langweilige Bildunterschriften aufpeppt. » weiterlesen

WAIT! Animate: Schneller zu anschaulichen CSS-Animationen
WAIT! Animate: Schneller zu anschaulichen CSS-Animationen

Wait! Animate ist ein einfaches Tool um Animationen zu erstellen und zu konfigurieren, für das du kein JavaScript Know-How benötigst. » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?