Dies ist der vierte Beitrag in einer Reihe über die neue CSS Shape () -Funktion. Bisher haben wir die h?ufigsten Befehle abgedeckt, mit denen Sie verschiedene Formen zeichnen, einschlie?lich Linien, B?gen und Kurven. Dieses Mal m?chte ich Ihnen zwei weitere Befehle vorstellen: Schlie?en und Bewegen. Sie sind in der Praxis ziemlich einfach und ich denke, Sie werden sie selten verwenden, aber sie sind unglaublich nützlich, wenn Sie sie brauchen.

Bessere CSS -Formen mit Shape ()

1. Linien und B?gen
2. Mehr ONARCs
3. Kurven
4. Schlie?en und bewegen (Sie sind hier!)

Der close Befehl

Im ersten Teil sagten wir, dass Shape () immer mit einem vom Befehlsbefehl beginnt, um den ersten Ausgangspunkt zu definieren, aber was ist mit dem Ende? Es sollte mit einem engen Befehl enden.

Aber Sie haben in den vorherigen Artikeln noch nie einen Close -Befehl verwendet!?

Das stimmt. Ich habe es nie getan, weil ich mich entweder "schlie?e" oder mich auf den Browser verlasse, um ihn für mich zu "schlie?en". So sagte es, es ist ein bisschen verwirrend, aber nehmen wir ein einfaches Beispiel, um besser zu verstehen:

 Clip-Pfad: Form (von 0 0, Linie bis 100% 0, Linie bis 100% 100%)

Wenn Sie diesen Code probieren, erhalten Sie eine Dreiecksform. Wenn Sie jedoch genau hinschauen, werden Sie feststellen, dass wir nur zwei Zeilenbefehle haben, um ein Dreieck zu zeichnen, müssen wir insgesamt drei Zeilen ben?tigen. Die letzte Linie zwischen 100% 100% und 0 0 ist implizit, und in diesem Teil schlie?t der Browser die Form für mich, ohne explizit einen Befehl zu nutzen zu müssen.

Ich h?tte Folgendes schreiben k?nnen:

 Clip-Pfad: Form (von 0 0, Linie bis 100% 0, Leitung auf 100% 100%, schlie?en)

Oder definieren Sie stattdessen die letzte Zeile alleine:

 Clip-Pfad: Form (von 0 0, Linie bis 100% 0, Linie bis 100% 100%, Linie auf 0 0)

Da der Browser jedoch in der Lage ist, die Form allein zu schlie?en, müssen wir den Befehl letzter Zeilen nicht hinzufügen, und wir müssen den Befehl schlie?en nicht explizit hinzufügen.

Dies k?nnte dazu führen, dass Sie der Meinung sind, dass der Close -Befehl nutzlos ist, oder? In den meisten F?llen ist es wahr (schlie?lich habe ich drei Artikel über Shape () geschrieben, ohne es zu verwenden), aber es ist wichtig, darüber zu wissen und was es tut. In bestimmten F?llen kann es nützlich sein, insbesondere wenn es in der Mitte einer Form verwendet wird.

In diesem Beispiel ist mein Ausgangspunkt das Zentrum und die Logik der Form besteht darin, vier Dreiecke zu zeichnen. Dabei muss ich jedes Mal wieder in die Mitte zurückkehren. Anstatt die Zentrum in die Mitte zu schreiben, schreibe ich einfach Schluss und der Browser kehrt automatisch zum Anfangspunkt zurück!

Intuitiv sollten wir Folgendes schreiben:

 Clip-Pfad: Form ( 
  aus der Mitte, 
  Linie auf 20% 0, Hline um 60%, Linie zu Mitte, / * Dreieck 1 * / /
  Leitung auf 100%20%, VLINE um 60%, Linie zu Mitte, / * Triangle 2 * / /
  Leitung auf 20%100%, Hline um 60%, Linie zu Mitte, / * Triangle 3 * / /
  Linie auf 0 20%, VLINE von 60% / * Dreieck 4 * / / /
)

Aber wir k?nnen es ein wenig optimieren und dies stattdessen einfach tun:

 Clip-Pfad: Form ( 
  aus der Mitte, 
  Linie auf 20% 0, Hline um 60%, schlie?en,
  Leitung auf 100%20%, VLINE um 60%, schlie?en,
  Leitung auf 20%100%, Hline um 60%, schlie?en,
  Linie auf 0 20%, VLINE um 60%
)

Wir schreiben sicher weniger Code, aber eine andere wichtige Sache ist, dass der Befehl schlie?en, wenn ich den mittleren Wert mit einer anderen Position aktualisiere, dieser Position folgt .

Vergiss diesen Trick nicht. Es kann Ihnen helfen, viele Formen zu optimieren, indem Sie weniger Code schreiben.

Der Befehl verschieben

Lassen Sie uns unsere Aufmerksamkeit auf einen anderen Befehl () zuweisen (), den Sie m?glicherweise selten verwenden, k?nnen aber in bestimmten Situationen unglaublich nützlich sein: den Befehl move.

Meistens, wenn wir eine Form zeichnen müssen, ist es tats?chlich eine kontinuierliche Form . Es kann jedoch passieren, dass unsere Form aus verschiedenen Teilen besteht, die nicht miteinander verbunden sind. In diesen Situationen ist der Befehl MOVE das, was Sie brauchen.

Nehmen wir ein Beispiel, ?hnlich dem vorherigen, aber diesmal berühren sich die Dreiecke nicht:

Intuitiv denken wir vielleicht, dass wir vier getrennte Elemente mit einer eigenen Form () -Derefinition () brauchen. Aber das Beispiel ist eine einzelne Form!

Der Trick besteht darin, das erste Dreieck zu zeichnen, dann woanders ?bewegen“, um das n?chste zu zeichnen, und so weiter. Der Befehl move ?hnelt dem aus dem Befehl, aber wir verwenden ihn in der Mitte von Shape ().

 Clip-Pfad: Form (
  von 50% 40%, Linie auf 20% 0, Hline um 60%, schlie?en, / * Triangle 1 * / /
  auf 60%50%, Leitung auf 100%20%, VLINE um 60%, schlie?en, / * Dreieck 2 * / / /
  auf 50%60%wechseln, auf 20%100%, Hline um 60%, schlie?en, / * Dreieck 3 * / /
  Wechseln Sie auf 40% 50%, Leitung auf 0 20%, VLINE um 60% / * Dreieck 4 * / /
)

Nachdem wir das erste Dreieck gezogen haben, schlie?en wir es und ?bewegen“ zu einem neuen Punkt, um das n?chste Dreieck zu zeichnen. Wir k?nnen mehrere Formen mit einer einzigen Shape () -Dfinition () haben. Ein generischerer Code sieht nach unten aus:

 Clip-Pfad: Form (
  von x1 y1, ..., schlie?en, / * Form 1 * /
  Bewegen Sie sich zu x2 y2, ..., schlie?en, / * Form 2 * /
  ...
  Bewegen Sie sich zu xn yn, ... / * Form n * /
)

Die Befehle schlie?en vor den Bewegungsbefehlen sind nicht obligatorisch, sodass der Code darauf vereinfacht werden kann:

 Clip-Pfad: Form (
  von x1 y1, ..., / * Form 1 * /
  Bewegen Sie sich zu x2 y2, ..., / * Form 2 * /
  ...
  Bewegen Sie sich zu xn yn, ... / * Form n * /
)

Schauen wir uns einige interessante Anwendungsf?lle an, in denen diese Technik hilfreich sein kann.

Ausschnittsformen

Zuvor habe ich einen Trick darüber geteilt, wie man mit Clip-Pad: Polygon () ausgeschnittene Formen erstellt. Ausgehend von jeder Art von Polygon k?nnen wir es leicht invertieren, um seine ausgeschnittene Version zu erhalten:

Wir k?nnen dasselbe mit Shape () tun. Die Idee ist, einen Schnittpunkt zwischen der Hauptform und der Rechteckform zu haben, die den Elementgrenzen entspricht. Wir brauchen zwei Formen, daher die Notwendigkeit des Befehls zur Bewegung.

Der Code ist wie folgt:

 .Form {
  Clip-Pfad: Form (von ...., bewegen Sie sich auf 0 0, Hline bis 100%, VLine bis 100%, Hline bis 0);
}

Sie erstellen zun?chst Ihre Hauptform und "bewegen" auf 0 0 und erstellen die Rechteckform (denken Sie daran, es ist die erste Form, die wir im ersten Teil dieser Serie erstellen). Wir k?nnen sogar weiter gehen und eine CSS -Variable einführen, um leicht zwischen der normalen und der umgekehrten Form zu wechseln.

 .Form {
  Clip-Pfad: Form (von .... var (-i,));
}
.invert {
  --I:, wechseln Sie zu 0 0, Hline auf 100%, VLine auf 100%, Hline auf 0;
}

Standardm??ig ist-ich ist nicht definiert, so dass var (-i,) leer sein wird und wir die Hauptform erhalten. Wenn wir die Variable mit der Rechteckform definieren, erhalten wir die umgekehrte Version.

Hier ist ein Beispiel mit einer abgerundeten Sechskantform:

In Wirklichkeit sollte der Code wie folgt sein:

 .Form {
  Clip-Pfad: Form (BEIMEDD von .... var (-i,));
}
.invert {
  --I:, wechseln Sie zu 0 0, Hline auf 100%, VLine auf 100%, Hline auf 0;
}

Beachten Sie, dass ich zu Beginn von Shape () die Bemessung hinzufüge. Ich werde Sie nicht mit einer detaillierten Erkl?rung dafür st?ren, was es tut, aber in einigen F?llen ist die umgekehrte Form nicht sichtbar und die L?sung besteht darin, am Anfang Bailliten hinzuzufügen. Sie k?nnen die MDN -Seite für weitere Details überprüfen.

Eine weitere Verbesserung, die wir tun k?nnen, ist, eine Variable hinzuzufügen, um den Raum um die Form um die Form zu steuern. Nehmen wir an, Sie m?chten die Sechseckform des vorherigen Beispiels kleiner machen. Es ist langweilig, den Code des Hexagon zu aktualisieren, aber es ist einfacher, den Code der Rechteckform zu aktualisieren.

 .Form {
  Clip-Pfad: Form (BEIMEDD von ... var (-i,)) Content-Box;
}
.invert {
  -D: 20px;
  Polsterung: var (-d);
  --i:, wechseln Sie zu Calc (-1*var (-d)) calc (-1*var (-d)),
        Hline zu Calc (100% var (-d)),
        VLINE zu Calc (100% var (-d)),
        Hline to calc (-1*var (-d));
}

Wir aktualisieren zun?chst das Referenzfeld der Form, um Content-Box zu sein. Dann fügen wir etwas Polster hinzu, die den Bereich der Form logisch reduzieren, da sie die Polsterung (noch den Rand) nicht mehr enth?lt. Die Polsterung ist standardm??ig ausgeschlossen (unsichtbar) und hier kommt der Trick, bei dem wir die Rechteckform aktualisieren, um die Polsterung wieder aufzunehmen.

Deshalb ist die -i -Variable so ausführlich. Es verwendet den Wert der Polsterung, um den Rechteckbereich zu erweitern und das gesamte Element so abzudecken, als h?tten wir keine Inhaltsbox.

Sie k?nnen nicht nur jede Art von Form leicht umkehren, sondern auch den Raum um ihn herum steuern! Hier ist eine weitere Demo, die das CSS-Tricks-Logo verwendet, um zu veranschaulichen, wie einfach die Methode ist:

Genau dieses gleiche Beispiel ist in meinem SVG-zu-CSS-Konverter verfügbar und bietet Ihnen den Shape () -Coder, ohne die gesamte Mathematik ausführen zu müssen.

Sich wiederholende Formen

Ein weiterer interessanter Anwendungsfall des Move -Befehls ist, wenn wir die gleiche Form mehrmals wiederholen müssen. Erinnern Sie sich an den Unterschied zwischen by und den zu Richtlinien? Die By -Richtlinie erm?glicht es uns, relative Koordinaten unter Berücksichtigung des vorherigen Punktes zu definieren. Wenn wir also unsere Form nur durch by erstellen, k?nnen wir den gleichen Code so oft wiederverwenden, wie wir es wollen.

Beginnen wir mit einem einfachen Beispiel für eine Kreisform:

 Clip -Pfad: Form (aus XY, ARC von 0 -50px von 1%, ARC von 0 50px von 1%)

Ausgehend von XY zeichne ich einen ersten Bogen, der sich um 50px nach oben bewegt, dann kehre ich mit einem anderen Bogen mit demselben Offset zurück, aber nach unten. Wenn Sie mit der Syntax etwas verloren sind, überprüfen Sie Teil 1, um Ihren Speicher über den ARC -Befehl zu aktualisieren.

Wie ich die Form gezogen habe, ist nicht wichtig. Was wichtig ist, ist, dass ich immer den Wert von XY ist, ich werde immer den gleichen Kreis, aber in einer anderen Position bekommen. Sehen Sie, wohin ich mit dieser Idee gehe? Wenn ich einen weiteren Kreis hinzufügen m?chte, wiederhole ich einfach den gleichen Code mit einem anderen x y.

 Clip-Pfad: Form (
  aus x1 y1, bogen von 0 -50px von 1%, ARC von 0 50px von 1%,
  Bewegen
)

Und da der Code gleich ist, kann ich die Kreisform in eine CSS -Variable speichern und so viele Kreise zeichnen, wie ich m?chte:

 .Form {
  --Sh:, ARC von 0 -50px von 1%, ARC von 0 50px von 1%;
  
  Clip-Pfad: Form (
    aus x1 y1 var (-sh),
    Bewegen Sie sich zu x2 y2 var (-sh),
    ... 
    Wechseln Sie zu Xn yn var (-sh)
  ) 
}

Du willst keinen Kreis? Einfach, Sie k?nnen die -Sh -Variable mit jeder gewünschten Form aktualisieren. Hier ist ein Beispiel mit drei verschiedenen Formen:

Und raten Sie mal, was? Sie k?nnen das Ganze mit der Ausschnittstechnik umkehren, indem Sie die Rechteckform am Ende hinzufügen:

Dieser Code ist ein perfektes Beispiel für die Kraft der Form (). Wir haben keine Code -Duplikation und k?nnen die Form einfach mit CSS -Variablen anpassen. Dies ist etwas, was wir mit der Funktion path () nicht erreichen k?nnen, da es keine Variablen unterstützt.

Abschluss

Das ist alles für diese vierte Ausgabe unserer Serie auf der CSS Shape () -Funktion! Wir haben keine super komplexen Formen hergestellt, aber wir haben gelernt, wie zwei einfache Befehle viele M?glichkeiten ?ffnen k?nnen, was mit Shape () getan werden kann.

Nur zum Spa?, hier ist eine weitere Demo, die einen klassischen Drei-Punkt-Lader mit der letzten Technik neu erstellt. Beachten Sie, wie viel weiter wir gehen konnten, und fügen Sie den Mix Dinge wie Animation hinzu:

Bessere CSS -Formen mit Shape ()

1. Linien und B?gen
2. Mehr ONARCs
3. Kurven
4. Schlie?en und bewegen (Sie sind hier!)

Das obige ist der detaillierte Inhalt vonBessere CSS -Formen mit Shape () - Teil 4: Schlie?en und Bewegung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!