Ich habe mit dem neuen Adobe CSS Shapes gearbeitet und leider nichts.
Da mein Browser nur 20% unterstützt (sollte immer noch unterstützen, was ich benutze), dachte ich, ich würde damit anfangen und etwas Neues ausprobieren.
Ich versuche, das Bild in der Mitte des Textes zu haben und den Text von oben zu umarmen. Wenn du margin-top zu #circle-left / #cirlce-right hinzufügst, siehst du oberhalb des Bildes nur Leerraum, hier ist ein JSFIDDLE .
Wenn Sie CSS Shapes ausprobieren möchten, klicken Sie auf diesen Link und befolgen Sie die Schritte zum Aktivieren sie in Ihrem Browser.
Dieser Abschnitt ist nicht normativ.
Formen definieren beliebige Geometrien, die als CSS-Werte verwendet werden können. Diese Spezifikation definiert Eigenschaften zum Steuern der Geometrie eines Schwimmbereich des Elements. Die Shape-Outside-Eigenschaft verwendet Shape-Werte für Definieren Sie den Float-Bereich für einen Float.
Hinweis: Zukünftige Ebenen von CSS-Formen ermöglichen die Verwendung von Formen für Elemente andere als Schwimmer. Andere CSS-Module können auch Formen verwenden, wie CSS-Maskierung [CSS-MASKING] und CSS-Ausschlüsse [CSS3-AUSSCHLÜSSE].
Hinweis: Wenn ein Benutzeragent sowohl CSS-Formen als auch CSS-Ausschlüsse implementiert, Die Shape-Outside-Eigenschaft definiert den Ausschlussbereich für ein Ausschluss.
Hinweis: Eine zukünftige Ebene von CSS-Formen definiert ein Shape-Inside Eigenschaft, die eine Form definiert, um den Inhalt innerhalb der Element.
Ich habe meinen gewünschten Effekt in jeder Hinsicht erreicht, außer dass ich meinen Text nicht über das Bild / den Container wickeln kann. Ich habe margin , padding , top verwendet und es relative positioniert.
Hier ist mein CSS , ( JSFIDDLE )
Gibt es jemanden da draußen, der von CSS Shapes weiß oder wie ich das machen könnte? Ich möchte es nur zu css behalten, aber wenn Javascript benötigt wird, werde ich es versuchen.
Ich versuche nicht, alle Browser oder ähnliches zu unterstützen, ich versuche nur, die neuen Werkzeuge zu lernen, an denen Adobe arbeitet.
Ressourcen
Tags und Links css css-shapes css-float