Anzeige
Anzeige
News
Artikel merken

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.

Von Ilja Zaglov
6 Min. Lesezeit
Anzeige
Anzeige

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, CSS3 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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
  • 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.

Anzeige
Anzeige

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 CSS 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:

Anzeige
Anzeige
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.

Anzeige
Anzeige
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

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
5 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Thomas

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
Nettes Feature

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
bdfb

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
Florence Maurice

zwei Mal ein kleiner Tippfehler „furthest“ statt „farthest“.

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

Antworten
Nettes Feature

@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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige