In diesem Artikel werden wir CSS-Verläufe untersuchen, indem wir verschiedene Flags erstellen und dabei jeweils ein einzelnes HTML-Element verwenden. Im Rahmen der Erfahrung werden wir auch die Pseudoelemente ::before und ::after sowie die Clip-Path-Eigenschaft überprüfen.
Wir werden einfache Flaggen codieren und die Codierung der Wappen vermeiden, da diese in CSS schwierig wären. Es wäre nicht unmöglich, aber es ist auch keine lohnenswerte Aufgabe. Verwenden Sie dazu SVG.
Ich habe die Wikipedia-Seite für die verschiedenen Flaggen verwendet, um Abmessungen, Größen, Positionen und Farben zu erhalten. Ich entschuldige mich im Voraus, falls darin Fehler enthalten sind.
Beginnen wir mit dem Hinzufügen des HTML-Codes unserer Flaggen und einiger allgemeiner Stile:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Hier ist eine kurze Erklärung, was sie tun:
Einige davon sind überdimensioniert – ja, Sie können CSS überkonstruieren –, weil die meisten Flags sie nicht benötigen. Vor allem diejenigen, die wir in diesem Artikel codieren werden … aber irgendwann werden Sie einige finden, die die Eigenschaften erfordern, und warum nicht sie direkt in der Klasse haben, anstatt sie mehrmals einzeln hinzufügen zu müssen?
Ein linearer Farbverlauf erzeugt einen progressiven Farbübergang in eine einzige Richtung (entlang einer Linie, daher der Name). Standardmäßig ist die Richtung vertikal von oben nach unten, was das Erstellen von Flaggen vereinfacht.
Beginnen wir mit der polnischen Flagge. Es hat zwei Farben, die die gleiche Höhe einnehmen: die Oberseite ist weiß und die Unterseite ist rot. Dies ist einer der einfachsten Farbverläufe, die Sie finden werden.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Dieser Farbverlauf legt Weiß als Farbe von oben fest, bis er 50 % (die Hälfte der Flagge) erreicht, und wechselt dann zu Rot, was ebenfalls bei 50 % beginnt.
Wir haben auch ein Seitenverhältnis hinzugefügt: 8 / 5; denn das ist das offizielle Verhältnis für die Flagge Polens (5:8). Sie können diese Eigenschaft in den folgenden Beispielen gerne ignorieren, aber denken Sie daran, sie hinzuzufügen, sonst hat die Flagge keine Breite und ist unsichtbar!
CSS-Verläufe sind nicht auf zwei Farben beschränkt, sie können so viele haben, wie Sie möchten – beachten Sie jedoch, dass einige Browser den Verlauf möglicherweise nicht richtig anzeigen, wenn zu viele Farben vorhanden sind.
Ein Beispiel hierfür wäre die Deutschlandflagge, bei der wir von oben nach unten drei Farben haben:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Wir haben die Notation dieses Beispiels absichtlich mehrzeilig und besonders lang gemacht. Beachten Sie, wie wir nach dem Wert zwei Werte hinzugefügt haben. Sie sind jeweils der Anfangs- und Endanschlag für jede Farbe. Im obigen Beispiel beginnt Schwarz von oben (0 %) und reicht bis zu einem Drittel der Flagge (33,33 %), Rot beginnt direkt danach (33,33 %) und reicht bis zu zwei Dritteln der Flagge (66,66 %). ), und schließlich beginnt Gelb direkt nach 66,66 % und reicht bis zum unteren Rand der Flagge (100 %). Im Falle einer Flagge stimmen die End- und folgenden Startwerte überein, wenn dies nicht der Fall ist, ändert der Browser die Farben schrittweise.
Angesichts der Tatsache, dass die erste Farbe standardmäßig bei 0 beginnt und die letzte bei 100 % endet, können wir diese Werte aus dem linearen Farbverlauf eliminieren. Außerdem führt jeder Startwert, der niedriger als der vorherige Endwert ist, zu einem scharfen Stopp zwischen den Farben. Wir wollen das für unsere Flags und wollen nicht zu viel tippen, also können wir einfach den niedrigstmöglichen Wert für den Startwert eingeben: 0 % oder einfach 0. Auf diese Weise würde das obige CSS auf etwas reduziert, das etwas ergibt ein ähnliches Ergebnis, aber das ist deutlich kürzer:
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Es wäre langweilig – und nutzlos –, wenn wir nur vertikale lineare Farbverläufe erzeugen könnten. Es gibt Möglichkeiten, die Richtung zu ändern, in der der Farbverlauf gezeichnet wird. Schauen wir uns ein paar davon an:
Nehmen wir als Beispiel die belgische Flagge. Die Farben sind nicht vertikal, sondern horizontal gestapelt: Schwarz, Gelb und Rot jeweils von links nach rechts. Wir können dies auf mindestens zwei verschiedene Arten erreichen:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Ein radialer Farbverlauf erzeugt einen progressiven Farbübergang von einem Ursprungspunkt in alle Richtungen und erzeugt einen radialen Effekt, der wie eine Farbellipse aussieht (oder wie ein Kreis, wenn die Seiten gleich sind). Standardmäßig ist dieser Punkt der absolute Mittelpunkt des Elements – horizontal und vertikal.
Ein paar wichtige Dinge, die Sie beachten sollten:
Mit diesen ersten Gedanken (und Schlüsselwörtern) im Hinterkopf erstellen wir einige Flaggen!
Die Flagge Japans ist ein großer roter Kreis in der Mitte einer weißen Flagge. Dies ist einer der einfachsten radialen Farbverläufe, die wir finden können, und wir können das zuvor besprochene Schlüsselwort „circle“ verwenden, da die Flagge rechteckig ist. Wenn wir es nicht verwenden, erhalten wir stattdessen eine Ellipse.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Wir haben das Schlüsselwort „Größe der nächsten Seite“ mit dem Schlüsselwort „Kreisform“ kombiniert, um einen Kreis zu generieren, der 60 % der Höhe hat (da die Ober- und Unterseite näher beieinander liegen als die linke und rechte).
Wenn wir nur Kreise und Ellipsen vom Mittelpunkt des Elements aus erstellen könnten, könnten wir einige Flaggen mit CSS replizieren (z. B. Laos oder Burundi). Dennoch konnten wir keine anderen mit außermittigen Kreisen entwickeln (z. B. Costa Rica oder Äthiopien).
Mit der radial-gradient()-Methode können wir den Ursprungspunkt des Gradienten angeben. Wir tun dies, indem wir at posX posY nach den Schlüsselwörtern size und shape (falls vorhanden) verwenden. Versuchen wir, damit die Flagge Bangladeschs zu erstellen:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Was passiert, wenn wir beginnen, die Mitte des Farbverlaufs zu verschieben? Der Abstand zur hintersten Ecke ändert sich! Das führt zu trigonometrischen Berechnungen, um die Größe entsprechend anzupassen … oder stattdessen könnten wir einen anderen Bezugspunkt identifizieren, der nicht die am weitesten entfernte Ecke ist (wie in diesem Fall die nächstgelegene Seite).
Um dies zu vermeiden, können wir eine absolute Größe für Breite und Höhe angeben. Wenn wir das tun, können wir nicht erkennen, ob es sich um einen Kreis oder eine Ellipse handelt, da diese absoluten Werte die Form bestimmen.
Ein konischer Farbverlauf erzeugt einen progressiven Farbübergang von einem Ursprungspunkt, der im Uhrzeigersinn um ihn herum rotiert. Es mag komplex klingen, sich das so vorzustellen, deshalb verwende ich lieber ein Beispiel, wenn ich es den Leuten erkläre: Stellen Sie sich einen regelmäßigen linearen Farbverlauf vor, der auf Papier gedruckt ist (so weit, so gut); Jetzt nimmst du das Papier, faltest eine Seite um und rollst es zu einem Kegel (daher der Name!). Die resultierende Figur sieht von oben wie ein konischer Farbverlauf aus. Ich hoffe, das war hilfreich.
Wie bei den radialen Farbverläufen ist der Standardursprungspunkt eines konischen Farbverlaufs der absolute Mittelpunkt des Elements. Ebenso wie die radialen Verläufe können wir diesen Punkt ändern, indem wir at posX posY.
verwendenDies ist eine ziemlich einfach zu erstellende Flagge mit einem konischen Farbverlauf. Zuerst müssen wir die Mitte auf 40 % horizontal und 50 % vertikal positionieren und dann die Haltepunkte angeben.
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Wie gesagt, ein Kinderspiel! Da es nicht viel dahinter steckt, ist hier eine Tatsache, die Sie vielleicht nicht über die Flagge Benins wissen: Gelb steht für die Schätze der Nation, Rot steht für den Mut ihrer Vorfahren und Grün steht für die Hoffnungen der Demokratie.
Auf dieser Grundlage sehen wir uns eine Möglichkeit an, die Flagge der Tschechischen Republik zu zeichnen:
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Das funktioniert ganz gut, aber beachten Sie, dass wir #fff zweimal verwenden. Wäre es nicht schön, wenn wir es nur einmal verwenden könnten? Wie Sie vielleicht schon erraten haben, lautet die Antwort: Wir können es! Ein Farbverlauf muss nicht unbedingt bei 0 Grad beginnen. Mit from [angle] können wir eine Startposition angeben.
Nehmen wir zum Beispiel an, wir möchten mit der roten Farbe beginnen:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Der Winkel kann ein positiver oder negativer Wert sein, dann würden wir den Startpunkt im oder gegen den Uhrzeigersinn verschieben.
Wir haben gelernt, wie man lineare, radiale und konische Farbverläufe verwendet, um relativ einfache Flaggen zu erzeugen … aber manchmal können Flaggen kompliziert werden und ein einzelner Farbverlauf reicht nicht aus. Was können wir in diesem Fall tun?
CSS erlaubt mehrere Hintergrundbilder (und Verläufe) in einem Element. Wir müssen ihre Werte durch ein Komma trennen. Auch wenn dies möglicherweise nicht intuitiv ist, ist es wichtig, sich daran zu erinnern, dass die oberen Hintergründe die unteren überlappen und verdecken.
Die Flagge Schwedens ist ein gelbes Kreuz auf blauem Hintergrund. Wir können jeden gelben Balken mit einem linearen Farbverlauf transparent-gelb-transparent erzeugen:
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Dieses Beispiel hat mehr, als man auf den ersten Blick sieht:
Während die vorherige Flagge mehrere Farbverläufe in Aktion zeigte, war es aufgrund der Verwendung von Transparenzen nicht besonders gut, deren Stapelung zu zeigen. Sehen wir uns also ein weiteres Beispiel an – eines, das mehrere Farbverläufe unterschiedlicher Art verwendet.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Beim Kombinieren von Hintergründen sind Sie nicht auf nur einen Verlaufstyp beschränkt. Sie können jede Art verwenden.
Bisher haben wir lineare, radiale und konische Farbverläufe gesehen und wie sie kombiniert werden können. Aber in allen Fällen nahm das Gefälle die gesamte Flagge ein. Bei einigen Transparenzen sieht es vielleicht nicht so aus, aber die Größe der Farbverläufe entsprach immer 100 % der Breite und Höhe.
Aber es gibt Möglichkeiten, die Größe des Farbverlaufs zu ändern, um ihn besser an unsere Bedürfnisse anzupassen. Am einfachsten ist es, eine Hintergrundgröße anzugeben. Wenn die Größe kleiner als der Container ist, wird der Hintergrund wiederholt (es sei denn, wir verwenden etwas wie „background-repeat: none“)
Sehen wir uns ein Beispiel mit der Flagge von Katar an. Die Flagge wiederholt ein Muster neunmal und lässt sich leicht mit einem konischen Farbverlauf nachbilden. Wenn wir angeben, dass die Breite des Farbverlaufs 100 % der Flagge und seine Höhe ein Neuntel der Flaggenhöhe betragen soll, wiederholt der Browser den Hintergrund, bis der Container gefüllt ist, und vervollständigt die Zeichnung für uns.
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Sobald wir eine Größe angegeben haben, können wir natürlich auch die Position angeben, an der sich der Farbverlauf befinden soll. Das würden wir mit „background-position“ machen (und hier kommt die Eigenschaft „background-repeat“ zum Einsatz).
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Beachten Sie, dass wir für die letzte Farbe keine Größe und Position angeben müssen. Sie können nur einen festlegen, der automatisch den gesamten Container belegt.
Wir können die Werte der Hintergrundbilder, Größen und Positionen durch Kommas trennen. Das ist praktisch, wenn es nur wenige von ihnen gibt, aber wenn wir mehrere Hintergründe haben, kann es sehr nervig sein. Es ist leicht, sich zu verirren und Werte zu vermischen.
Stattdessen können wir die Kurzform der Hintergrundeigenschaft verwenden, um alle Werte auf einmal bereitzustellen: Hintergrund: Verlaufsposition/-größenwiederholung, wie unten gezeigt:
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Wir haben lineare, radiale und konische Farbverläufe gesehen, aber jede Variation ermöglicht es uns, „Farbmuster“ hinzuzufügen. Flaggen eignen sich hierfür perfekt: Viele bestehen aus sich wiederholenden horizontalen Linien.
Ich spreche von den sich wiederholenden Farbverläufen. Sie verhalten sich genauso wie die regulären Farbverläufe und wiederholen das angegebene Muster, bis es 100 % oder 360 Grad erreicht. Es gibt drei sich wiederholende Farbverläufe:
Nehmen wir als Beispiel die griechische Flagge. Wir könnten 3 oder 4 große lineare Farbverläufe haben, um dies zu erreichen, oder wir können drei sich wiederholende lineare Farbverläufe verwenden:
Um das Kreuz oben links zu erreichen, müssen wir sowohl Position als auch Größe für die ersten beiden linearen Farbverläufe definieren.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(#000 33.33%, #f00 0 66.66%, #fc0 0);
}
Die Flagge Ugandas hat einen wunderschönen Graukronenkranich, den wir aus praktischen Gründen nicht in CSS codieren. Wir konzentrieren uns auf die anderen beiden Flaggenteile: einen weißen Kreis in der Mitte und mehrere horizontale Linien in Schwarz, Gelb und Rot.
Diese Zusammensetzung kann auf zwei verschiedene Arten erreicht werden:
Die erste Option wäre so:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Die zweite Option würde so aussehen:
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Aber am Ende sehen beide Optionen gleich aus. Es ist wichtig, sich daran zu erinnern, dass es in CSS, wie in jedem anderen Programmierstil, normalerweise mehr als einen Weg gibt, unsere Ziele zu erreichen.
Der Begriff „Einzelelement-Flags“ kann irreführend sein. Alle nicht leeren HTML-Elemente enthalten mindestens zwei Pseudoelemente, die wir auch zum Zeichnen verwenden können: ::before und ::after. Wir haben also wirklich drei Elemente, die separat gestylt werden können und viele Möglichkeiten bieten:
Wenn Sie die Flagge Katars wie oben beschrieben mit Farbverläufen codiert haben, ist Ihnen möglicherweise aufgefallen, dass die dreieckigen Kanten des Farbverlaufs auf einigen Monitoren zu scharf und hässlich aussehen. Es gibt viele Möglichkeiten, dieses Problem zu lösen, aber eine Lösung, die mir gefällt, ist die Verwendung eines Pseudoelements mit Clip-Pfad, um glattere und klarere Linien zu erzeugen.
Diese Option vereinfacht den Code im Vergleich zur Verwendung mehrerer linearer Farbverläufe und dem Pixeldifferenz-Trick, der im folgenden Abschnitt erläutert wird.
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Die Pseudoelemente müssen in diesem Fall nicht auf komplexe Muster beschränkt sein. Nehmen Sie zum Beispiel die Flaggen von Kuba, den Bahamas oder Jordanien. Sie haben auf der linken Seite Dreiecke, die wir mit konischen Farbverläufen gezeichnet haben. Bei diesen Verläufen gibt es ein Problem: Die Kanten sehen auf bestimmten Monitoren zu hart oder pixelig aus – im folgenden Abschnitt finden Sie einen Trick, um dieses Problem mit linearen Verläufen zu lösen. Stattdessen könnten wir das Dreieck mit einem Pseudoelement (einem Dreipunkt-Polygonpfad) erstellen und die Kanten würden glatter aussehen. Ähnlich der Flagge von Bahrain oben.
Ich habe die ungefähren Punkte der Scheitelpunkte für einen fünfzackigen Stern erhalten und sie mithilfe von Clip-Pfad in den Pseudoelementen ::before und ::after angewendet. Viele CSS-Künstler ziehen den Einsatz von Clip-Path-Cheat in Betracht, und der Stern kann mit konischen Farbverläufen gezeichnet werden. Aber der Einfachheit halber belasse ich es als Clip-Pfad.
Durch das Hinzufügen eines konischen Farbverlaufs als Flaggenhintergrund und der Sterne in den Pseudoelementen können wir im Handumdrehen die Flagge Panamas zeichnen:
<div>
<pre class="brush:php;toolbar:false">.flag {
display: inline-grid;
height: 1em;
vertical-align: top;
position: relative;
overflow: hidden;
}
Denken Sie daran, dass beim Kombinieren von Hintergründen diese in der Reihenfolge gestapelt werden, in der sie aufgelistet sind. Das heißt, der erste wird oben platziert und überlappt die darunter und danach.
Während es aus gestalterischer Sicht sinnvoll ist, kann es aus CSS-Sicht kontraintuitiv sein, da die Kaskade dafür sorgt, dass das letzte Auftreten einer Eigenschaft oder Klasse Vorrang vor den zuvor definierten hat.
In dem Artikel habe ich erwähnt, dass die Verlaufskanten möglicherweise zu scharf oder pixelig aussehen. Dies geschieht aufgrund der Art und Weise, wie der Browser die Verläufe rendert – und es ist ärgerlich, insbesondere weil dies bei Hard-Stop-Kanten in SVG nicht der Fall ist.
Zum Beispiel sieht die Zeile hier möglicherweise nicht auf allen Monitoren gut aus:
.flag.poland {
background: linear-gradient(white 50%, red 50%);
aspect-ratio: 8 / 5;
}
Ein Trick, um dies zu vermeiden, besteht darin, einen Pixelunterschied zwischen dem Endpunkt und dem nächsten Anfangspunkt hinzuzufügen. Entweder durch Subtrahieren bzw. Addieren von 0,5 Pixel von jedem von ihnen oder, einfacher, einfach durch Subtrahieren/Addieren von 1 Pixel von einem von ihnen. Diese Linie wird auf allen Monitoren glatt aussehen:
.flag.germany {
aspect-ratio: 5 / 3;
background: linear-gradient(
#000 0.00% 33.33%,
#f00 33.33% 66.66%,
#fc0 66.66% 100.00%
);
}
Ein häufiger Fehler beim Arbeiten mit sich wiederholenden Farbverläufen besteht darin, keinen Startpunkt für die erste Farbe hinzuzufügen. Dadurch sieht der Farbverlauf unkonventionell aus. Wenn Ihre sich wiederholenden Farbverläufe nicht wie erwartet funktionieren, überprüfen Sie immer, ob Sie dort eine 0 (oder einen anderen Wert) hinzugefügt haben!
Pseudoelemente können auf den ersten Blick einschüchternd wirken, aber sie unterscheiden sich nicht mehr von anderen Elementen, sie werden lediglich mit ihnen an das HTML-Element angehängt.
Vergessen Sie nicht, die Inhaltseigenschaft mit einem Wert hinzuzufügen (eine leere Zeichenfolge ist üblich, wenn sie nur angezeigt werden soll). Andernfalls sind die Pseudoelemente nicht sichtbar!
Beim Zeichnen in CSS und beim Erstellen von CSS-Grafiken behaupten viele Leute, dass die Verwendung der Clip-Path-Eigenschaft Betrug sei. Es erleichtert die Arbeit und ist ein nützliches Werkzeug in Ihrem Gürtel. Ich würde es nicht wegwerfen, nur weil es „Betrug“ ist.
Lernen Sie, wie Sie den Clip-Pfad – und die Maske – verwenden. Dies wird sich irgendwann in einem Projekt als nützlich erweisen.
Jetzt ist es an der Zeit, CSS-Verläufe zu üben. Bitte probieren Sie es aus und versuchen Sie, einige Flaggen selbst nachzubilden. Hier ist eine Liste von Ländern mit guten Flaggen zum Üben (sortiert nach Komplexität):
Und denken Sie daran: Es gibt keine eindeutige Möglichkeit, eine Flagge zu codieren. Jeder von ihnen kann auf viele verschiedene Arten durchgeführt werden. Verwenden Sie die Farbverläufe, mit denen Sie vertrauter sind oder von denen Sie wissen, dass sie am besten aussehen.
Das obige ist der detaillierte Inhalt vonAlvaro Montoro präsentiert: Spaß mit Flaggen… mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So aktualisieren Sie Douyin
Detaillierte Erklärung des Linux-Befehls dd
So lösen Sie das Problem, dass localhost nicht geöffnet werden kann
Was soll ich tun, wenn eDonkey Search keine Verbindung zum Server herstellen kann?
Verwendung der Snoopy-Klasse in PHP
Gängige Methoden zur Erkennung von Website-Schwachstellen
Der Unterschied zwischen Git und SVN
Tutorial zum Kauf und Verkauf von Bitcoin auf Huobi.com
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
