Angenommen, Sie möchten ein Bild (oder ein beliebiges anderes Element) visuell links in einem Textabsatz schweben lassen. Aber eben… mitten im Absatz, nicht ganz oben. Das ist machbar, gehört aber definitiv in den Bereich der CSS-Tricksereien!
Eine Sache, die man tun kann, ist, das Bild direkt in die Mitte des Absatzes zu klatschen
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
<img src="tree.jpg" alt="An oak tree." />
elit. Similique quibusdam aliquam provident suscipit
corporis minima? Voluptatem temporibus nulla
</p>Aber das ist mega umständlich. Achten Sie auf den Alternativtext. Wir können keinen zufälligen alt-Text mitten in einem Satz haben. Das ist semantisch *igitt* und buchstäblich verwirrend für Menschen, die assistierende Technologien nutzen.
Also müssen wir das Bild vor den Absatz setzen.
<img src="tree.jpg" alt="An oak tree." />
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing
elit. Similique quibusdam aliquam provident suscipit
corporis minima? Voluptatem temporibus nulla
</p>Aber wenn wir das tun, lassen wir das Bild nicht mehr wirklich mitten im Absatz schweben. Es ist ganz oben. Kein margin-top oder vertikales Translate oder irgendetwas anderes wird uns hier retten. margin verlängert nur die Höhe des schwebenden Bereichs und translate schiebt das Bild in den Text.
Der Trick, zumindest einer, den ich gefunden habe, besteht darin, shape-outside und ein polygon() zu nutzen, um den schwebenden Bereich dort neu zu formen, wo Sie ihn haben möchten. Sie können den oberen linken Teil überspringen. Clippy ist eine großartige Möglichkeit, einen Anfang für das Polygon zu bekommen
Aber anstatt des clip-path, den Clippy standardmäßig liefert, wenden Sie diesen Wert auf shape-outside an.
Das sollte ausreichen, wenn Sie nur eine Box an dieser Stelle platzieren. Aber wenn es sich tatsächlich um ein Bild handelt oder einen Hintergrundfarbton benötigt, müssen Sie möglicherweise *auch* clip-path anwenden und die Dinge vielleicht in Position transformieren. Hier landete ich nach etwas Fummelei.
Siehe den Pen
Ausschnitt mitten im Absatz schweben lassen. von Chris Coyier (@chriscoyier)
auf CodePen.
Sie weisen auf ein erhebliches Barrierefreiheitsproblem hin, das ich nicht bedacht hatte – wie man mit Bildern in einem Absatz umgeht. Wenn es nur zur Darstellung dient, könnte man auf einen Alt-Tag verzichten oder ihn mit aria-hidden versehen, aber ich denke darüber nach, wie schlecht CMS darin sind, dies zu handhaben. Es ist sehr einfach für einen Kunden, ein Bild irgendwohin zu legen und ihm beliebigen Alternativtext zu geben. Ich versuche nachzudenken, wie man das handhaben könnte… anhand Ihres Beispiels könnte man wohl JS verwenden, um Bilder innerhalb von Absätzen anzusprechen und die cut-in-Klasse anzuwenden, oder vielleicht ein paar solche Klassen machen, damit man mehrere Bilder berücksichtigen könnte… oder ein benutzerdefiniertes Feld im Backend hinzufügen, damit der Kunde ein wenig Kontrolle darüber hat, wo die Bilder sind. Nichts davon fühlt sich besonders aufgeräumt an, aber aus Gründen der Semantik und Barrierefreiheit sollte es gelöst werden.
Sie haben einen wichtigen Grund dafür aufgedeckt, warum Texter den Text im
alt-Attribut zusammen mit dem umgebenden Inhalt verfassen müssen. Dies ist auch der Grund, warum das einmalige Schreiben desaltnicht funktioniert, wenn Bilder mehr als einmal verwendet werden – denken Sie an die WordPress-Mediathek. Dies schließt rein dekorative Bilder mitalt=""natürlich aus.Fantastischer Beitrag!
Herzlichen Glückwunsch!
Razvan Caliman hat einen großartigen Artikel geschrieben – https://www.html5rocks.com/en/tutorials/shapes/getting-started/ – über CSS Shapes. Seine einfache Lösung ist die Verwendung von
shape-outside: content-box.Ein potenziell einfacherer Ansatz, um dasselbe zu erreichen, ist die Verwendung eines Null-Breiten-Floats mit einer Nicht-Null-Höhe vor dem schwebenden Bild, um es nach unten zu schieben. (Verwenden Sie
clear: leftauf dem Bild, um es nach unten zu schieben.)Hier ist ein Beispiel, bei dem das
<img>innerhalb des<p>-Elements liegtUnd hier ist ein Beispiel, bei dem das
<img>innerhalb eines<picture>-Elements liegt