CSS/Eigenschaften/Positionierung/shape

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaften shape-… ermöglichen das Umfließen von unregelmäßigen Formen durch einen Text, wie es in Druckerzeugnissen schon lange möglich und üblich ist.

  • CSS 3.0
  • Chrome
  • Leer
  • Leer
  • Opera
  • Safari 8

Details: caniuse.com

Hinweis

Wenn Sie im Internet Code-Beispiele mit der Eigenschaft
  • shape-outside: circle(50%, 50%, 50%); finden, dann ist dieser Code veraltet.

Code nach der neuen, gültigen Spezifikation kann man durch:

  • shape-outside: circle(50% at 50% 50%); erkennen.


Beachten Sie:
  • shape-… funktioniert nur mit Blockelementen, die gefloatet werden. (Inline-Elemente sollten mit display:block zu Blockelementen werden.)
  • Damit ein Koordinatensystem für eine Referenz-Box erzeugt werden kann, muss diesen Blockelementen eine feste Breite und Höhe zugewiesen werden.
    (Bilder haben von Vornherein Höhen und Breiten, sodass Sie hier die Koordinaten auch weglassen können.)

shape-outside[Bearbeiten]

Mit der Eigenschaft shape-outside wird ein Element definiert, um das Text herumgeführt wird.

Folgende Angaben sind möglich:

  • none: die gefloatete Form beeinflusst den Textfluss nicht
  • basic-shape: svg-ähnliche Grundformen:
    • inset(): legt eine rechteckige Form an, die abgerundet werden kann, z.B.:
      inset('oben' 'rechts' 'unten' 'links' 'border-radius');
    • circle(): eine kreisförmige Form, z.B.:
      circle('Radius') Kreis mit 50% Radius
      circle('Radius' at 'x-Koordinate des Mittelpunkts' 'y-Koordinate des Mittelpunkts')</code> Kreis mit 50% Radius, dessen Mittelpunkt nicht in der linken oberen Ecke des äußeren Elements, sondern im äußeren Element ist.
    • ellipse(): eine ovale Form, z.B:
      ellipse('Höhe' 'Breite' at 'x-Koordinate des Mittelpunkts' 'y-Koordinate des Mittelpunkts');
    • polygon(): legt Form mit beliebig vielen Fixpunkten an
  • url(): URI eines Bildes mit Transparenzen, dessen Form umflossen wird
    Beachten Sie: shape-outside: url(); funktioniert nur, wenn Dateien und Bilder aus der gleichen Quelle stammen. Dies kann nur bei Dateien, die von einem Webserver ausgeliefert werden, überprüft werden; nicht jedoch von lokal geöffneten Dateien.
  • shape-box: Festlegung einer Referenz-Box
    • margin-box: Box mit Außenrändern
    • border-box: Box mit Rändern
    • padding-box: Box mit Innenabstand
    • content-box: Box, in der nur der Inhalt zur Festlegung dient.


shape-outside: (circle)[Bearbeiten]

Screenshot

Beispiel ansehen …
.erde {
  shape-outside: circle(50% at 50% 50%) border-box;
  shape-margin: 1.5em;
  float:left;
}
 
.mond{
  shape-outside: circle(40% at 50% 50%) border-box;
  shape-margin: 1em;
  float: right;
}
    <img class="erde" src="erde.png" >
    <p>Text ...</p>
    <img class="mond" src="mond.png" alt="" >
    <p>Der Mond ist ... </p>

Sonne und Mond sind gefloatete Bilder, deren Formen durch shape-outside: circle() ausgeschnitten und dann vom Text umflossen wird.

shape-outside: (polygon)[Bearbeiten]

Screenshot

Beispiel ansehen …
img {
  float: left;
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
  shape-outside: polygon(0% 0%, 100% 50%, 0% 100%, 0% 0%);
}

img:hover {
    shape-outside:polygon(0% 0%, 100% 0, 0% 100%, 0% 0%);
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 0%);
  }
Wenn Sie mit der Maus über das Bild fahren, verändert sich der mit clip-path festgelegte Bildausschnitt sowie der mit shape-outside definierte Textumfluss.

shape-outside: (url)[Bearbeiten]

Screenshot

Beispiel ansehen …
img.form {
  float: left;
  shape-outside: url(Rugby.png);
  shape-image-threshold: 0.0;
  shape-margin: 1em;
}
  <img class="form" src="Rugby.png" alt="">
  <p>Ziel des Rugbyspiels ist es, ...</p>
Hier wird der Textumfluss an die Form des Bilds angepasst. Dies wird durch Angabe des URI des Bildes erreicht. Mit shape-image-threshold können sie festlegen, welche Alphawerte zur Berechnung der Transparenz herangezogen werden sollen.
Beachten Sie, dass die transparenten Bereiche der Grafik groß genug für die Definition eines Rands durch shape-margin sein müssen. Auch die links über den Rand ragenden Aufzählungszeichen der Liste beeinflussten das Ergebnis des Textumflusses. Eine Positionierung der Grafik in den zweiten Textabsatz umging diese Probleme.

shape-margin[Bearbeiten]

Die Eigenschaft shape-margin legt einen Abstand um das umflossene Objekt fest.

Beachten Sie: Der Abstand kann nicht über die tatsächliche Größe des in shape-outside festgelegten Objekts hinausgehen.
Empfehlung:

Wenn Sie einen Außenabstand festlegen wollen;

  • Reduzieren Sie den Radius eines Kreises (Ein Kreis mit circle(50%) hat keine Möglichkeit für einen Außenrand.)
  • Verkleinern Sie die Abbildung einer Rastergrafik, bzw. vergrößern Sie den transparenten Bereich.

shape-image-threshold[Bearbeiten]

Die Eigenschaft shape-image-threshold definiert, welcher Grad an Deckkraft (opacity) zur Erzeugung der Form herangezogen wird.

Es ist ein Wert zwischen 0.0 (völlig transparent) und 1.0 (völlig abdeckend) möglich. Standardwert ist 0.0. Ein Wert von 0.5 bedeutet, dass nur Pixel mit einer Deckkraft von 50% und mehr zur Erzeugung der Form herangezogen werden.

shape-inside[Bearbeiten]

Mit der Eigenschaft shape-inside soll es zukünftig möglich sein, Elemente zu definieren, in die Text passgenau eingefügt wird. Im Augenblick wird von einer Implementation in heutige Browser aber abgesehen.

  • CSS 3.0
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Es würden die gleichen Angaben wie bei shape-outside möglich sein.:

Beachten Sie:
  • Die shape-inside-Eigenschaft soll auch mit gefloateten Elementen angewandt werden können.
  • Shape-inside wirkt aber nicht bei Elementen, die mit display: table; formatiert wurden.


shape-padding[Bearbeiten]

Die Eigenschaft shape-padding legt zukünftig einen (Innen-)Abstand im umflossenen Objekt fest.

Browser-Support[Bearbeiten]

Achtung!

Die Eigenschaft shape-… ist derzeit (September 2015) nur in die Browser Chrome und Opera implementiert, deshalb muss man proprietäre Eigenschaften verwenden.

für Safari:

  • -webkit-shape-…

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Weblinks[Bearbeiten]

Polyfill

Generatoren

Artikel