CSS3-Tricks: Mit CSS-Shapes Text um runde Objekte fließen lassen

Wie Sie mit CSS-Shapes ganz einfach Texte um runde Grafiken anordnen können

with-without-shape-outside

Mit CSS-Shapes ist es den Webdesignern heute schon möglich, ohne viel Aufwand Texte um Objekte fließen zu lassen. Die CSS-Shapes (CSS-Formen) haben die 3 Eigenschaften [shape-outside], [shape -margin] und [shape-image-threshold]. Mit diesen können Sie einen Text in CSS3 ganz leicht und elegant um eine runde Grafik fließen lassen – wie in einem Satzprogramm!

Ich zeige Ihnen heute an einem kleinen Beispiel, wie CSS-Shapes funktionieren und wie Sie sie einsetzen können. Ein ausführliches Tutorial zum Thema finden Sie auf der Webseite von Tympanus.net/Codrops.

Musterbeispiel ansehen; HTML-Code und CSS-Anweisungen;

Ich habe folgendes kleine Beispiel auf CodePen.io entdeckt, wo Sie es auch unter dem Button „Share“ als Zip-Datei herunterladen können!

CSS-Shapes-Musterbeispiel

HTML-Code

Rabbit

Alice is feeling bored and drowsy while sitting on the riverbank with her elder sister. She then notices a talking, clothed White Rabbit with a pocket watch run past. She follows it down a rabbit hole when suddenly she falls a long way to a curious hall with many locked doors of all sizes. She finds a small key to a door too small for her to fit through, but through it she sees an attractive garden. She then discovers a bottle on a table labelled "DRINK ME," the contents of which cause her to shrink too small to reach the key which she has left on the table. She eats a cake with "EAT ME" written on it in currants as the chapter closes. Alice is feeling bored and drowsy while sitting on the riverbank with her elder sister. She then notices a talking, clothed White Rabbit with a pocket watch run past. She follows it down a rabbit hole when suddenly she falls a long way to a curious hall with many locked doors of all sizes. She finds a small key to a door too small for her to fit through, but through it she sees an attractive garden. She then discovers a bottle on a table labelled "DRINK ME...

CSS

img {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle(50%);
}

Browser Support

Die CSS-Shapes funktionieren derzeit nur in den neuesten Versionen der folgenden Browser: Google Chrome, Safari und Opera.
NICHT funkionieren diese im Firefox und im Internet Explorer.

Im mobilen Bereich (Smartphone, Tablets) testen Sie am besten das Musterbeispiel! Es sollten die Browser Android, Opera und Chrome die CSS-Shapes richtig darstellen.

Tweet about this on TwitterShare on Google+3Share on Facebook0Email this to someone

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *