Homepage von Basti1012 = ,tutorialscss ,umschliesen von benutzedefenierten pfaden 

Webdesigner waren lange Zeit gezwungen, innerhalb der Beschränkungen des Rechtecks zu erstellen. Die meisten Inhalte im Web sind immer noch in einfachen Kästchen gefangen, weil die meisten kreativen Unternehmungen mit nicht rechteckigem Layout frustriert sind. Dies wird sich mit der Einführung von CSS Shapes ändern, die ab Chrome 37 verfügbar sind.

Mit CSS-Formen können Webdesigner Inhalte um benutzerdefinierte Pfade wie Kreise, Ellipsen und Polygone wickeln und sich so von den Beschränkungen des Rechtecks lösen.

Formen können manuell definiert oder aus Bildern abgeleitet werden.

Schauen wir uns ein sehr einfaches Beispiel an.

Vielleicht waren Sie so naiv wie ich, als Sie zum ersten Mal ein Bild mit transparenten Teilen verschoben haben, in denen erwartet wurde, dass der Inhalt die Lücken füllt, und nur enttäuscht von der rechteckigen Umhüllungsform, die um das Element herum besteht. CSS-Shapes können verwendet werden, um dieses Problem zu lösen.

Eine Form aus einem Bild extrahieren


Lorem ipsum…

<style> . element { shape-outside:url(image.png); Form-Bild-Schwelle:0; Schwimmer:links; }

Die shape-outside: url(image.png)CSS-Deklaration weist den Browser an, eine Form aus dem Bild zu extrahieren.

Die shape-image-thresholdEigenschaft definiert die Mindestdeckkraft der Pixel, die zum Erstellen der Form verwendet werden. Sein Wert muss im Bereich zwischen 0.0(vollständig transparent) und 1.0(vollständig undurchsichtig) liegen. Dies shape-image-threshold: 0.5bedeutet, dass nur Pixel mit einer Deckkraft von 50% und mehr zum Erstellen der Form verwendet werden.

Die floatEigenschaft ist der Schlüssel hier. Während die shape-outsideEigenschaft die Form des Bereichs definiert, um den der Inhalt gewickelt wird, werden die Auswirkungen der Form ohne Float nicht angezeigt.

Elemente haben eine Gleitfläche auf der gegenüberliegenden Seite ihres floatWerts. Wenn beispielsweise ein Element mit einem Kaffeetassenbild nach links verschoben wird, wird der Verschiebungsbereich rechts von der Tasse erstellt. Obwohl Sie ein Bild mit Lücken auf beiden Seiten erstellen können, wird der Inhalt nur um die Form auf der gegenüberliegenden Seite gewickelt, die durch die Eigenschaft float angegeben ist (links oder rechts, niemals beides).

In Zukunft wird es möglich sein, shape-outsideElemente zu verwenden, die nicht mit der Einführung CSS-Ausschlüsse floaten .

Formen manuell erstellen

Neben dem Extrahieren von Formen aus Bildern können Sie diese auch manuell codieren. Sie können von einigen Funktionswerten wählen Formen zu erstellen: circle(), ellipse(), inset()und polygon(). Jede Formfunktion akzeptiert einen Satz von Koordinaten und ist mit einem Referenzfeld gekoppelt, das das Koordinatensystem festlegt. In Kürze mehr zu Referenzboxen.

Die circle () Funktion

Abbildung des Formwerts des Kreises ()

Die vollständige Notation für einen Kreisformwert ist, circle(r at cx cy)wo rder Radius des Kreises ist, während cxund cyKoordinaten des Kreismittelpunkts auf der X-Achse und der Y-Achse sind. Die Koordinaten für den Kreismittelpunkt sind optional. Wenn Sie sie nicht angeben, wird der Mittelpunkt des Elements (der Schnittpunkt seiner Diagonalen) als Standard verwendet.


. Element { 

  Form - außen : Kreis ( 50 %); 

  Breite : 300px ; 

  Höhe : 300px ; Schwimmer : links ; } 

Im obigen Beispiel wird der Inhalt um die Außenseite eines kreisförmigen Pfades gewickelt. Das einzelne Argument 50%gibt den Radius des Kreises an, der in diesem speziellen Fall der Hälfte der Breite oder Höhe des Elements entspricht. Das Ändern der Abmessungen des Elements beeinflusst den Radius der Kreisform. Dies ist ein grundlegendes Beispiel dafür, wie CSS-Formen reagieren können.

Bevor Sie fortfahren, kurz beiseite: Es ist wichtig, sich daran zu erinnern, dass CSS-Formen nur die Form des Float-Bereichs um ein Element beeinflussen. Wenn das Element einen Hintergrund hat, wird dieser nicht von der Form abgeschnitten. Um diesen Effekt zu erzielen, müssen Sie Eigenschaften aus der CSS-Maskierung verwenden - entweder den Clip-Pfad oder das Maskenbild . Die clip-pathEigenschaft ist sehr praktisch, da sie der gleichen Notation wie CSS-Formen folgt, sodass Sie Werte wiederverwenden können.

Abbildung von `circle ()` Form + Clip-Pfad

In den Abbildungen in diesem Dokument wird das Ausschneiden verwendet, um die Form hervorzuheben und die Auswirkungen zu verstehen.

Zurück zur Kreisform.

Bei Verwendung von Prozentsätzen für den Kreisradius wird der Wert tatsächlich mit einer etwas komplexeren Formel berechnet : sqrt (Breite ^ 2 + Höhe ^ 2) / sqrt (2). Es ist nützlich, dies zu verstehen, da Sie sich vorstellen können, wie die resultierende Kreisform aussehen wird, wenn die Dimensionen des Elements nicht gleich sind.

Alle CSS-Einheitentypen können in Formfunktionskoordinaten verwendet werden - px, em, rem, vw, vh usw. Sie können diejenige auswählen, die flexibel oder starr genug für Ihre Bedürfnisse ist.

Sie können die Position des Kreises anpassen, indem Sie explizite Werte für die Koordinaten seines Mittelpunkts festlegen.


. Element { 

  Form - außen : Kreis ( 50 % bei 0 0 ); } 

Dadurch wird der Kreismittelpunkt am Ursprung des Koordinatensystems positioniert. Was ist das Koordinatensystem? Hier stellen wir Referenzboxen vor.

Referenzfelder für CSS-Formen

Das Referenzfeld ist ein virtuelles Feld um das Element, das das Koordinatensystem festlegt, mit dem die Form gezeichnet und positioniert wird. Der Ursprung des Koordinatensystems befindet sich in der oberen linken Ecke, wobei die X-Achse nach rechts und die Y-Achse nach unten zeigt.

Koordinatensystem für CSS-Formen

Denken Sie daran, dass dies shape-outsidedie Form des Float-Bereichs ändert, um den sich der Inhalt dreht. Der Gleitbereich erstreckt sich bis zu den durch die marginEigenschaft definierten Außenkanten des Felds . Dies wird als das margin-boxStandardreferenzfeld für eine Form bezeichnet, wenn keines explizit erwähnt wird.

Die folgenden beiden CSS-Deklarationen haben identische Ergebnisse:


. Element { 

  Form - außen : Kreis ( 50 % bei 0 0 ); / * identisch mit: * / 

  Form - außen : Kreis ( 50 % bei 0 0 ) Rand - Kästchen ; } 

Wir haben noch keinen Rand für das Element festgelegt. An dieser Stelle ist davon auszugehen, dass der Ursprung des Koordinatensystems und der Kreismittelpunkt in der oberen linken Ecke des Inhaltsbereichs des Elements liegen. Dies ändert sich, wenn Sie einen Rand festlegen:


. Element { 

  Form - Außen : Kreis ( 50 % bei 0 0 ) Rand - Feld ; 

  Rand : 100px ; }  

Der Ursprung des Koordinatensystems liegt jetzt außerhalb des Inhaltsbereichs des Elements (100 Pixel nach oben und 100 Pixel nach links), ebenso wie der Kreismittelpunkt. Der berechnete Wert des Kreisradius wächst auch, um die vergrößerte Oberfläche des durch das margin-boxReferenzfeld festgelegten Koordinatensystems zu berücksichtigen .

Margin-Box-Koordinatensystem mit und ohne Rand

Es gibt ein paar Referenzfeld Optionen zur Auswahl: margin-box, border-box, padding-boxund content-box. Ihre Namen implizieren ihre Grenzen. Wir haben vorher das erklärt margin-box. Die border-boxBegrenzung erfolgt durch die Außenkanten der Elementränder, die Begrenzung padding-boxerfolgt durch das Auffüllen des Elements, während die Begrenzung content-boxmit der tatsächlichen Oberfläche identisch ist, die vom Inhalt innerhalb eines Elements verwendet wird.

Abbildung aller Referenzboxen

Es kann jeweils nur eine Referenzbox mit einer shape-outsideDeklaration verwendet werden. Jedes Referenzfeld beeinflusst die Form auf unterschiedliche und manchmal subtile Weise. Es gibt einen weiteren Artikel, der sich eingehender mit Referenzfeldern für CSS-Formen befasst .

Die ellipse () Funktion

Abbildung des Formwerts der Ellipse ()

Ellipsen sehen aus wie zerdrückte Kreise. Sie sind definiert als ellipse(rx ry at cx cy), wo rxund rysind die Radien für die Ellipse auf der X- und Y-Achse, während cxund cysind die Koordinaten für die Mitte der Ellipse.


. Element { 

  Form - Außen : Ellipse ( 150px 300px bei 50 % 50 %); 

  Breite : 300px ; 

  Höhe : 600px ; }    

Prozentwerte werden aus den Abmessungen des Koordinatensystems berechnet. Hier ist keine lustige Mathematik erforderlich. Sie können die Koordinaten für die Ellipsenmitte weglassen und sie werden von der Mitte des Koordinatensystems abgeleitet.

Radien auf der X- und Y-Achse können auch mit Schlüsselwörtern definiert werden: farthest-sideErgibt einen Radius, der dem Abstand zwischen der Ellipsenmitte und der Seite des Referenzrahmens entspricht, die am weitesten davon entfernt ist, während closest-sidegenau das Gegenteil gemeint ist - verwenden Sie den kürzesten Abstand zwischen der Mitte und eine Seite.


. Element { 

  Form - außerhalb : Ellipse ( am nächsten - Seite am weitesten - Seite bei 50 % 50 %); / * identisch mit: * / 

  Form - außen : Ellipse ( 150px 300px bei 50 % 50 %); 

  Breite : 300px ; 

  Höhe : 600px ; } 

Dies kann nützlich sein, wenn sich die Abmessungen des Elements (oder das Referenzfeld) auf unvorhersehbare Weise ändern, die Ellipsenform jedoch angepasst werden soll.

Dasselbe farthest-sideund closest-sideSchlüsselwörter können auch für den Radius in der circle()Formfunktion verwendet werden.

Die Funktion polygon ()

Abbildung des Formwerts des Polygons ()

Wenn Kreise und Ellipsen zu einschränkend sind, eröffnet die Polygonformfunktion eine Vielzahl von Optionen. Im Format polygon(x1 y1, x2 y2, ...)geben Sie Paare von xy-Koordinaten für jeden Scheitelpunkt (Punkt) eines Polygons an. Die Mindestanzahl von Paaren zur Angabe eines Polygons beträgt drei, ein Dreieck.


. Element { 

  Form - Außen : Polygon ( 0 0 , 0 300px , 300px 600px ); 

  Breite : 300px ; 

  Höhe : 600px ; } 

Scheitelpunkte werden im Koordinatensystem platziert. Für reaktionsschnelle Polygone können Sie Prozentwerte für einige oder alle Koordinaten verwenden.


. Element { / * Polygon reagiert auf Schriftgröße * / 

  Form - Außen : Polygon ( 0 0 , 0 100 %, 100 % 100 %); 

  Breite : 20em ; 

  Höhe : 40em ; }

         

Es gibt einen optionalen fill-ruleParameter, der aus SVG importiert wird und den Browser anweist, wie bei sich selbst schneidenden Pfaden oder eingeschlossenen Formen die „Innigkeit“ eines Polygons zu berücksichtigen ist. Joni Trythall erklärt sehr gut, wie die Füllregeleigenschaft in SVG funktioniert . Wenn nicht definiert, ist der fill-ruleStandardwert nonzero.


.Element { 

  Form - Außen : Polygon ( 0 0 , 0 100 %, 100 % 100 %); / * identisch mit: * / 

  shape - outside : polygon ( ungleich Null , 0 0 , 0 100 %, 100 % 100 %); }     

Die Funktion inset ()

Mit der inset()Formfunktion können Sie rechteckige Formen erstellen, um die der Inhalt gewickelt werden soll. Dies klingt möglicherweise nicht intuitiv, wenn man bedenkt, dass CSS Shapes Webinhalte von einfachen Boxen befreit. Es kann sehr gut sein. Ich habe noch keinen Anwendungsfall gefunden, inset()der mit Floats und Margins oder mit einem nicht schon erreichbar ist polygon(). Dies inset()liefert jedoch einen besser lesbaren Ausdruck für rechteckige Formen als polygon().

Die vollständige Notation für eine Inset-Shape-Funktion lautet inset(top right bottom left border-radius). Die ersten vier Positionsargumente sind Abstände von den Kanten des Elements nach innen. Das letzte Argument ist der Rahmenradius für die rechteckige Form. Es ist optional, sodass Sie es weglassen können. Es folgt der border-radiusKurzschreibweise, die Sie bereits in CSS verwenden.


. Element { 

  Form - Außen : Einfügung ( 100px 100px 100px 100px ); / * ergibt eine rechteckige Form, die auf allen Seiten 100 Pixel groß ist * / float : left ; }   

  

Formen aus Referenzfeldern erstellen

Wenn Sie für die shape-outsideEigenschaft keine Formfunktion angeben , können Sie dem Browser gestatten, eine Form aus dem Referenzfeld des Elements abzuleiten. Das Standardreferenzfeld ist margin-box. Bisher nichts Exotisches, so funktionieren Schwimmer schon. Mit dieser Technik können Sie jedoch die Geometrie eines Elements wiederverwenden. Schauen wir uns das border-radiusGrundstück an.

Wenn Sie damit die Ecken eines schwebenden Elements abrunden, erhalten Sie den Clipping-Effekt, der Float-Bereich bleibt jedoch rechteckig. Hinzufügen shape-outside: border-box, um die Kontur zu umbrechen, die mit erstellt wurde border-radius.

Extrahieren einer Form aus dem Rahmenradius eines Elements mithilfe des Bezugsrahmens


. Element { 

  Rand - Radius : 50 %; 

  Form - außerhalb : border - Box ; Schwimmer : links ; } 

Natürlich können Sie alle Referenzfelder auf diese Weise verwenden. Hier ist eine weitere Verwendung für abgeleitete Formen - versetzte Anführungszeichen.

Erstellen eines versetzten Pull-Quote mithilfe des Inhaltsfeld-Referenzfelds

Der Offset-Pull-Quote-Effekt kann nur mit den Eigenschaften float und margin erzielt werden. Dazu müssen Sie das Anführungszeichenelement im HTML-Baum an der Stelle positionieren, an der es gerendert werden soll.

So erzielen Sie denselben Offset-Pull-Quote-Effekt mit zusätzlicher Flexibilität:


. Pull - Zitat { 

  Form - außen : Inhalt - Box ; 

  Rand - oben : 200px ; Schwimmer : links ; } 

Das content-boxReferenzfeld wird explizit für das Koordinatensystem der Form festgelegt. In diesem Fall definiert die Menge des Inhalts im Pull-Zitat die Form, um die der äußere Inhalt gewickelt wird. Die margin-topEigenschaft wird hier verwendet, um das Pull-Zitat unabhängig von seiner Position in der HTML-Struktur zu positionieren (zu versetzen).

Formrand

Sie werden bemerken, dass das Umschließen einer Form mit Inhalt dazu führen kann, dass sie zu eng am Element anliegt. Mit der shape-marginEigenschaft können Sie Abstände um die Form hinzufügen .


. Element { 

  Form - außen : Kreis ( 40 %); 

  Form - Rand : 1em ; Schwimmer : links ; } 

Der Effekt ähnelt dem, was Sie von der Verwendung der regulären marginEigenschaft gewohnt sind, shape-marginwirkt sich jedoch nur auf den Raum um den shape-outsideWert aus. Es wird nur dann ein Abstand um die Form hinzugefügt, wenn im Koordinatensystem Platz dafür ist. Aus diesem Grund wird im obigen Beispiel der Kreisradius auf 40% und nicht auf 50% festgelegt. Wenn der Radius auf 50% eingestellt wäre, würde der Kreis den gesamten Raum im Koordinatensystem einnehmen und keinen Raum für den Effekt von lassen shape-margin. Denken Sie daran, dass die Form letztendlich auf das Element margin-box(das Element plus seine Umgebung margin) beschränkt ist. Wenn die Form größer ist und überläuft, wird sie an der abgeschnitten, margin-boxund Sie erhalten eine rechteckige Form.

Es ist wichtig zu verstehen, dass shape-marginnur ein einziger positiver Wert akzeptiert wird. Es gibt keine Langnotation. Was ist eigentlich eine Form-Rand-Spitze für einen Kreis?

Formen animieren

Sie können CSS-Formen mit vielen anderen CSS-Funktionen wie Übergängen und Animationen mischen. Ich muss jedoch betonen, dass Benutzer es sehr ärgerlich finden, wenn sich das Textlayout während des Lesens ändert. Achten Sie genau auf das Erlebnis, wenn Sie sich für das Animieren von Formen entscheiden.

Sie können die Radien und Zentren für circle()und ellipse()Formen animieren, solange sie in Werten definiert sind, die der Browser interpolieren kann. Ab circle(30%)nach circle(50%)ist möglich. Wenn Sie jedoch zwischen circle(closest-side)to animieren , circle(farthest-side)wird der Browser blockiert.


. Element { 

  Form - außen : Kreis ( 30 %); 

  Übergang : Form - außerhalb 1s ; Schwimmer : links ; }

  





. Element : Schwebeflug { 

  Form - Außen : Kreis ( 50 %); }

GIF des animierten Kreises

Weitere interessante Effekte können beim Animieren von polygon()Formen erzielt werden, wobei zu beachten ist, dass das Polygon die gleiche Anzahl von Eckpunkten zwischen den beiden Animationszuständen aufweisen muss. Der Browser kann nicht interpolieren, wenn Sie Stützpunkte hinzufügen oder entfernen.

Ein Trick besteht darin, die maximal benötigte Anzahl von Scheitelpunkten hinzuzufügen und diese im Animationszustand zu einem Cluster zusammenzufassen, in dem weniger Kanten für die Form wahrgenommen werden sollen.


. Element { / * vier Eckpunkte (sieht aus wie Rechteck) * / 

  Form - Außen : Polygon ( 0 0 ,

     100 % 0 , 100 % 100 %, 0 100 %); 

  Übergang : Form - außerhalb 1s ; }     





. element : hover { / * vier Eckpunkte, aber zweite und dritte Überlappung (sieht aus wie Dreieck) * / 

  shape - outside

   : Polygon ( 0 0 , 100 % 50 %, 100 % 50 %, 0 100 %); }  

GIF des animierten Dreiecks

Umschließen von Inhalten in einer Form

Screenshot der Alice in Wonderland-Demo mit CSS-Formen zum Umschließen von Inhalten

Der ursprüngliche Entwurf der CSS-Shapes-Spezifikation enthielt eine shape-insideEigenschaft, mit der Sie den Inhalt in eine Form einschließen konnten. Für eine Weile gab es sogar Implementierungen in Chrome und Webkit. Das Umschließen von beliebig positionierten Inhalten in einen benutzerdefinierten Pfad erfordert jedoch viel mehr Aufwand und Recherche, um alle möglichen Szenarien abzudecken und Fehler zu vermeiden. Aus diesem Grund wurde die shape-insideEigenschaft auf CSS Shapes Level 2 verschoben und Implementierungen dafür zurückgezogen.

Mit ein wenig Aufwand und Kompromissen können Sie jedoch immer noch den Effekt erzielen, Inhalte in eine benutzerdefinierte Form zu packen. Der Hack besteht aus zwei schwimmenden Elementen shape-outside, die an gegenüberliegenden Seiten eines Containers positioniert sind. Der Kompromiss besteht darin, dass Sie ein oder zwei leere Elemente verwenden müssen, die keine semantische Bedeutung haben, sondern als Streben dienen, um die Illusion einer Form im Inneren zu erzeugen.


Lorem ipsum ...

Die Position der .left-shapeund der .right-shapeStrebenelemente am oberen Rand des Containers ist wichtig, da sie nach links und rechts verschoben werden, um den Inhalt zu flankieren.


. links - Form { 

  Form - außen : Polygon ( 0 0 ,   ...); Schwimmer : links ; 

  Breite : 50 %; 

  Höhe : 100 %; }

    





. rechts - Form { 

  Form - außen : Polygon ( 50 % 0 ,   ...); Schwimmer : rechts ; 

  Breite : 50 %; 

  Höhe : 100 %; }



Abbildung der Problemumgehung für Shape-Inside für Alice-Demo

Durch dieses Design nehmen die beiden schwebenden Streben den gesamten Raum innerhalb des Elements ein, aber die shape-outsideEigenschaften schaffen Platz für den Rest des Inhalts.

Wenn CSS-Formen vom Browser nicht unterstützt werden, führt dies zu hässlichen Effekten, indem der gesamte Inhalt nach unten verschoben wird. Aus diesem Grund ist es wichtig, die Funktion schrittweise zu verbessern.

In den früheren Beispielen für Formanimationen werden Sie feststellen, dass das Verschieben von Text lästig sein kann. Nicht alle Anwendungsfälle erfordern eine animierte Form. Sie können jedoch auch andere Eigenschaften animieren, die mit CSS-Formen interagieren, um einen sinnvollen Effekt zu erzielen.

In der Alice im Wunderland- Demonstration von CSS-Formen haben wir die Bildlaufposition verwendet, um den oberen Rand des Inhalts zu ändern. Der Text wird zwischen zwei schwebenden Elementen eingeklemmt. Während es sich nach unten bewegt, muss es gemäß dem shape-outsideder beiden schwebenden Elemente weiterleiten . Dies erweckt den Eindruck, dass der Text durch das Kaninchenloch läuft, und trägt zum Erlebnis des Geschichtenerzählens bei. Borderline unentgeltlich? Könnte sein. Aber es sieht cool aus.

Da das Textlayout nativ vom Browser ausgeführt wird, ist die Leistung besser als bei Verwendung einer JavaScript-Lösung. Das Ändern des oberen Randes des Bildlaufs löst jedoch viele Relayout- und Malereignisse aus, was die Leistung merklich verringern kann. Mit Vorsicht verwenden! Die Verwendung von CSS-Formen ohne Animation bringt jedoch keine spürbaren Leistungseinbußen mit sich.

Progressive Enhancement

Beginnen Sie mit der Annahme, dass der Browser keine CSS-Shapes-Unterstützung bietet, und bauen Sie darauf auf, wenn Sie die Funktion erkennen. Modernizr ist eine gute Lösung für die Featureerkennung, und im Abschnitt "Nicht-Kernerkennungen" finden Sie einen Test für CSS-Formen .

Einige Browser ermöglichen die Feature-Erkennung in CSS über die @supportsRegel, ohne dass externe Bibliotheken erforderlich sind. Google Chrome, das auch CSS-Formen unterstützt, versteht die @supportsRegel. So verwenden Sie es, um Folgendes schrittweise zu verbessern:


. element { / * Stile für alle Browser * / }

  





@supports ( shape - outside : circle ( 50 %)) { / * Stile nur für Browser, die CSS Shapes unterstützen * / . Element { 

    Form 

  

   - außen : Kreis ( 50 %); } }

  

Lea Verou hat mehr über die Verwendung der CSS @ support-Regel geschrieben .

Disambiguierung von CSS-Ausschlüssen

Was wir heute als CSS-Formen kennen, wurde in den frühen Tagen der Spezifikation CSS-Ausschlüsse und Formen genannt. Der Namenswechsel mag als Nuance erscheinen, ist aber eigentlich sehr wichtig. CSS-Ausschlüsse , jetzt eine separate Spezifikation, ermöglichen das Umschließen von beliebig positionierten Elementen mit Inhalten, ohne dass eine float -Eigenschaft erforderlich ist. Stellen Sie sich vor, Sie wickeln den Inhalt um ein absolut positioniertes Element. Das ist ein Anwendungsfall für CSS-Ausschlüsse. CSS-Formen definieren nur den Pfad, um den der Inhalt gewickelt wird.

Formen und Ausschlüsse sind also nicht dasselbe, sondern ergänzen sich. CSS-Shapes sind heute in Browsern verfügbar, während CSS-Ausschlüsse noch nicht mit Shapes-Interaktion implementiert sind.

Werkzeuge zum Arbeiten mit CSS-Formen

Sie können Pfade in klassischen Bildbearbeitungswerkzeugen erstellen, aber keines von ihnen exportiert zum Zeitpunkt des Schreibens die erforderliche Syntax für CSS-Shapes-Werte. Selbst wenn es so wäre, wäre es nicht allzu praktisch, so zu arbeiten.

CSS-Shapes sollen im Browser verwendet werden, wo sie auf andere Elemente auf der Seite reagieren. Es ist sehr nützlich, die Auswirkungen der Bearbeitung der Form auf den umgebenden Inhalt zu visualisieren. Es gibt einige Tools, die Ihnen bei diesem Workflow helfen:

Klammern : Die CSS Shapes Editor-Erweiterung für Klammern verwendet den Live-Vorschaumodus des Code-Editors, um einen interaktiven Editor zum Bearbeiten von Formwerten zu überlagern.

Google Chrome : Die CSS Shapes Editor-Erweiterung für Google Chrome erweitert die Entwicklertools des Browsers um Steuerelemente zum Erstellen und Bearbeiten von Formen. Es platziert einen interaktiven Editor über dem ausgewählten Element.

Der Inspektor in Google Chrome unterstützt das Hervorheben von Formen. Bewegen Sie den Mauszeiger über ein Element mit einer shape-outsideEigenschaft, um die Form zu veranschaulichen.

Formen aus Bildern : Wenn Sie es vorziehen, Bilder zu generieren und vom Browser Formen daraus extrahieren zu lassen, hat Rebecca Hauck ein gutes Tutorial für Photoshop geschrieben .

Polyfill : Google Chrome ist der erste große Browser, der CSS-Formen bereitstellt. Die Unterstützung der Funktion für Apples iOS 8 und Safari 8 ist in Kürze verfügbar. Andere Browser-Anbieter werden dies möglicherweise in Zukunft in Betracht ziehen. Bis dahin gibt es eine CSS-Shapes-Polyfüllung , die grundlegende Unterstützung bietet.

Fazit

In einem Web, in dem Inhalte meist in einfachen Feldern gespeichert sind, bieten CSS-Formen eine Möglichkeit, ein ausdrucksstarkes Layout zu erstellen und die Kluft zwischen Web- und Druckdesign zu überbrücken. Natürlich können Formen missbraucht werden und Ablenkungen verursachen. Wenn sie jedoch mit Geschmack und Urteilsvermögen angewendet werden, können Formen die inhaltliche Präsentation verbessern und die Aufmerksamkeit des Benutzers auf eine für ihn einzigartige Weise lenken.

Ich lasse dich mit einem Sammlung von Werken anderer, hauptsächlich aus dem Druck, die interessante Verwendungsmöglichkeiten für nicht rechteckige Layouts aufzeigen. Ich hoffe, dies inspiriert Sie dazu, CSS-Formen auszuprobieren und mit neuen Designideen zu experimentieren.

Vielen Dank an Pearl Chen, Alan Stearns und Zoltan Horvath für die Durchsicht dieses Artikels und die Bereitstellung wertvoller Erkenntnisse.