Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Challenge: Textfluss um gefloatetes Bild gestalten mit "shape-outside"

Challenge: Textfluss um gefloatetes Bild gestalten mit "shape-outside"

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Challenge: Textfluss um gefloatetes Bild gestalten mit "shape-outside"

“

(Musik) Normalerweise fließt der Text um ein gefloatetes Element als Rechteck und in dieser Challenge geht es darum, wie man ihm andere Formen beibringen kann. Dazu gibt es eine Eigenschaft, die heißt shape-outside. Recherchieren Sie in der Referenz Ihrer Wahl, wie man mit shape-outside arbeitet, dann öffnen Sie die Übungsdatei float-und-shape-outside.html. Der Text soll als Kreis um das Bild fließen. Versuchen Sie, den Textfluss optimal an das Bild anzupassen, dazu gibt es im Firefox in den Entwicklertools sehr schöne Werkzeuge. Und erstellen Sie das dazu benötigte CSS. Sie sehen hier als Beispiel die Grafik einer Eule als Superheld, und Sie sehen, normalerweise fließt der Text als Rechteck drum herum, und was jetzt Aufgabe der Challenge ist, ist das so hinzukriegen, wie der Text also sich an diese Eule quasi ein bisschen anschmiegt. Ich wünsche Ihnen viel Erfolg und bis gleich in der Solution.

Inhalt