Implementierung von Single-Div-Zeichentechniken in CSS

Sie können häufig Artikel über das Zeichnen mit CSS sehen, beispielsweise über die Verwendung von reinem HTML + CSS zum Zeichnen eines Doraemon-Bildes. Der Weg dies zu erreichen besteht darin, Divs zu stapeln und das Bild Stück für Stück Schritt für Schritt zu realisieren. An dieser Technik selbst ist nichts auszusetzen, sie ist aber etwas weniger schwierig. Solange Sie Geduld haben, können viele Grafiken langsam realisiert werden.

Aufgrund der Nachfrage nach CSS-Zeichnungen hat sich allmählich eine neue Denkrichtung herausgebildet, die darin besteht, Grafiken mit einem einzigen Tag zu realisieren. Das heißt, eine komplexe Grafik wird mit nur einem Tag fertiggestellt. Verglichen mit der Möglichkeit, Tags unendlich zu verwenden und Divs kontinuierlich zu stapeln, ist dies zweifellos viel schwieriger und erfordert ein tieferes Verständnis von CSS.

Beispielsweise wird die folgende Grafik durch ein Div-Element vervollständigt, welches von A Single Div abgeleitet ist:

In diesem Artikel werden einige Techniken zum Zeichnen mit einem einzelnen Etikett vorgestellt. Mithilfe dieser Techniken können Sie mit einem einzelnen Etikett einige komplexe Grafiken erstellen~😅

Richtige Verwendung von Pseudoelementen

Obwohl es sich um ein einzelnes Tag handelt, werden in fast allen Beispielen zur Implementierung von Grafiktiteln mit einem einzelnen Tag drei Elemente verwendet. Dies ist der Kernteil der Single-Label-Implementierung von Grafiken:

Zusätzlich zum Stil des Elements selbst haben wir auch zwei Pseudoelemente des Elements - ::before und ::after , was tatsächlich insgesamt 3 Elemente sind.

Die herzförmige Grafik unten kann beispielsweise nur mit einem Div realisiert werden. So geht's:

Diese Art unregelmäßiger Formen ist mit reinem CSS recht kompliziert zu erstellen und erfolgt normalerweise mithilfe von SVG, das natürlich clip-path in CSS verwendet. Aber wenn Sie sich die Grafik genau ansehen, brauchen wir clip-path nicht. Versuchen Sie, das Bild in drei Teile aufzuteilen:

Wow, tatsächlich benötigen wir hier nur das Element selbst, um das Quadrat zu realisieren, und die beiden Pseudoelemente des Elements nutzen die absolute Positionierung, um zwei Kreise zu realisieren, die übereinander gelegt werden können! Der gesamte Code ist auch sehr einfach:

div {
    Position: relativ;
    transformieren: drehen (45 Grad);
    Hintergrund: rgba (255, 20, 147, 0,85);
    Breite: 140px;
    Höhe: 140px;
}
div::vorher,
div::nach {
    Inhalt: "";
    Position: absolut;
    oben: 0;
    links: -70px;
    Breite: 140px;
    Höhe: 140px;
    Randradius: 50 %;
    Hintergrund: rgb(255, 20, 147);
}
div::vor {
    oben: -70px;
    links: 0;
}

Den vollständigen Beispielcode finden Sie hier: CodePen Demo -- A Signle Div heartShape

Farbverläufe und Mehrfachverläufe

Es ist keine Übertreibung, wenn man sagt, dass der Farbverlauf die am häufigsten verwendete CSS-Eigenschaft in Single-Tag-Grafiken ist.

Der Grund ist, dass unser Farbverlauf mehrere Farbverläufe sein kann! Farbverläufe sind nicht auf einen einzigen linearen oder radialen Farbverlauf beschränkt. Für den Hintergrund wird die Überlagerung mehrerer Farbverläufe unterstützt, was sehr wichtig ist.

OK, schauen wir uns dieses Tai Chi-Diagramm an:

Tatsächlich besteht das Tai-Chi-Diagramm aus mehreren Kreisen unterschiedlicher Farben. Es ist durchaus in Ordnung, hier mehrere verschiedene Divs zu stapeln und miteinander zu kombinieren. Unser Ziel ist es jedoch, es mit einem einzigen Tag abzuschließen.

Wenn die Grafiken nur aus Kreisen oder Linien bestehen, sollten Sie die Verwendung mehrerer linearer (radialer) Farbverläufe in Betracht ziehen. Wir können das obige Bild aufschlüsseln.

Es besteht eigentlich aus einem linearen Farbverlauf und vier Kreisen, die durch radiale Farbverläufe erzeugt werden:

Der komplette Code eines Tai Chi-Diagramms benötigt daher nur ein div und noch nicht einmal die Hilfe von Pseudoelementen:

div {
    Breite: 200px;
    Höhe: 200px;
    Randradius: 50 %;
    Hintergrundbild: radialer Farbverlauf (#000 12,5px, transparent 12,5px),
        radialer Farbverlauf (#fff 12,5px, transparent 12,5px),
        radialer Farbverlauf (#fff 50px, transparent 50px),
        radialer Farbverlauf (#000 50px, transparent 50px),
        linearer Farbverlauf (90 Grad, #000 100px, #fff 100px);
    Hintergrundposition: Mitte 50px, Mitte -50px, Mitte 50px, Mitte -50px, 0 0;
}

Für den vollständigen Beispielcode können Sie hier klicken CodePen Demo -- A Single Div PURE CSS Tai Chi

Schatten und Mehrfachschatten

Eine dem Farbverlauf sehr ähnliche Eigenschaft ist box-shadow . Eine der Eigenschaften von box-shadow ist, dass es mehrschichtig sein kann und mehrere eingebaute Schattenregeln haben kann. Es ist einfach der ultimative Killer für das Zeichnen mit einzelnen Beschriftungen!

Wir versuchen, mithilfe eines Div folgende Grafiken zu erzielen:

Auf den ersten Blick ist diese Grafik tatsächlich recht komplex. Wolken und Regentropfen scheinen nicht etwas zu sein, das man mit nur einem Tag oder einem Pseudoelement erreichen kann.

Tatsächlich ist das nicht der Fall. Schauen wir uns zunächst diese Wolke an. Obwohl sie einen unregelmäßigen Umriss hat, ist sie eigentlich nur ein Kreis. Ideal für die Verwendung mehrerer radialer Farbverläufe oder mehrerer Schatten!

Tatsächlich ist es nur ein Kreis, und dann werden Schatten verwendet, um die Überlagerung mehrerer Kreise zu realisieren. Die Beispielanimation ist leicht zu verstehen:

Die Codemenge ist tatsächlich sehr gering. Hier ist der Code zur Implementierung einer Cloud:

div{
  Breite: 100px;
  Höhe: 100px;
  Hintergrund:#fff;
  Randradius: 50 %;
  Kastenschatten:
    120px 0px 0 -10px #fff,
    95px 20px 0 0px #fff,
    30px 30px 0 -10px #fff,
    90px -20px 0 0px #fff,
    40px -40px 0 0px #fff;
}

CodePen-Demo – Ein einzelnes Div Cloudy

Ähnlich wie im Beispielcode für Wolken werden auch Regentropfen mit Hilfe mehrerer Schatten umgesetzt:

div {
    Position: absolut;
    Breite: 3px;
    Höhe: 6px;
    Randradius: 50 %;
    Animation: Regenregen, 0,7 s, unendlich linear;
    Boxschatten: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
            rgba(0, 0, 0, 0,3) -50px 75px, rgba(0, 0, 0, 0,3) 55px 50px,
            rgba(0, 0, 0, 0,3) -18px 100px, rgba(0, 0, 0, 0,3) 12px 95px,
            rgba(0, 0, 0, 0,3) -31px 45px, rgba(0, 0, 0, 0,3) 30px 35px;
}

@keyframes Regen_Regen {
    0% {
        Boxschatten: rgba(0, 0, 0, 0) -10px 30px, rgba(0, 0, 0, 0) 40px 40px,
            rgba(0, 0, 0, 0,3) -50px 75px, rgba(0, 0, 0, 0,3) 55px 50px,
            rgba(0, 0, 0, 0,3) -18px 100px, rgba(0, 0, 0, 0,3) 12px 95px,
            rgba(0, 0, 0, 0,3) -31px 45px, rgba(0, 0, 0, 0,3) 30px 35px;
    }
    // Etwas Code für die Schattenverschiebungs-Frame-Animation weglassen …
    100 % {
        Boxschatten: rgba(0, 0, 0, 0) -10px 120px, rgba(0, 0, 0, 0) 40px 120px,
            rgba(0, 0, 0, 0,3) -50px 75px, rgba(0, 0, 0, 0,3) 55px 50px,
            rgba(0, 0, 0, 0,3) -18px 100px, rgba(0, 0, 0, 0,3) 12px 95px,
            rgba(0, 0, 0, 0,3) -31px 45px, rgba(0, 0, 0, 0,3) 30px 35px;
    }
} 

Wir haben nur das Element selbst und ein Pseudoelement des Elements verwendet. Das verbleibende Pseudoelement reicht aus, um den Schattenkreis unten zu realisieren. Den vollständigen Democode finden Sie hier: A Signle Div Rainy

Kurzzusammenfassung

An dieser Stelle können wir kurz zusammenfassen, dass die Realisierung von Grafiken mit einem einzelnen Etikett, insbesondere von komplexen Grafiken, im Wesentlichen auf den drei oben genannten Techniken basiert, nämlich:

• Beim Zeichnen einzelner Etiketten werden das Element selbst und seine beiden Pseudoelemente ::before und ::after verwendet.
• Sinnvoller Einsatz mehrerer Farbverlaufs-Overlays
• Sinnvoller Einsatz mehrerer Schatten-Overlays

Üben

Lassen Sie uns üben und ein einzelnes Div verwenden, um den folgenden Captain America-Schild zu implementieren:

Mit der obigen Vorbereitung können mehrere Kreise tatsächlich mehrere radiale Farbverläufe und mehrere Schatten verwenden, und der Stern in der Mitte kann auch problemlos mithilfe von Zeichen oder clip-path erreicht werden:

div {
    Position: absolut;
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: 
        radialer Gradient(
            in der Mitte,
            #0033b0 20%,
            #ce0021 20%,
            #ce0021 35%,
            #eee 35%,
            #eee 55%,
            #ce0021 55 %
        );
    Randradius: 50 %;
}
div::vor {
    Inhalt: „★“;
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Zeilenhöhe: 47px;
    Schriftgröße: 55px;
}

Wir erhalten eine Grafik wie diese:

Der Grafik scheint etwas Glanz zu fehlen, daher können wir dem Div einen linear-gradient hinzufügen, um der Oberfläche des Schildes einige Glanzlichter zu verleihen:

div {
    Position: absolut;
    Breite: 200px;
    Höhe: 200px;
    Hintergrund: linearer Farbverlauf (45 Grad, rgba (255, 255, 255, 0) 35 %, rgba (255, 255, 255, 0,4) 50 %, rgba (255, 255, 255, 0) 65 %),
        linearer Farbverlauf (-45 Grad, rgba (255, 255, 255, 0) 35 %, rgba (255, 255, 255, 0,4) 50 %, rgba (255, 255, 255, 0) 65 %),
        linearer Farbverlauf (nach rechts, rgba (0, 0, 0, 0) 35 %, rgba (0, 0, 0, 0,2) 50 %, rgba (0, 0, 0, 0) 65 %),
        linearer Farbverlauf (nach unten, rgba (0, 0, 0, 0) 35 %, rgba (0, 0, 0, 0,2) 50 %, rgba (0, 0, 0, 0) 65 %),
        radialer Gradient(
            Ellipse in der Mitte,
            #0033b0 20%,
            #ce0021 20%,
            #ce0021 35%,
            #eee 35%,
            #eee 55%,
            #ce0021 55 %
        );
    Randradius: 50 %;
}
div::vor {
    Inhalt: „★“;
    Position: absolut;
    oben: 50 %;
    links: 50%;
    transformieren: übersetzen(-50 %, -50 %);
    Zeilenhöhe: 47px;
    Schriftgröße: 55px;
}

OK, dann lässt es sich durchaus realisieren:

Den kompletten Code findet ihr hier: A Signle Div Shield

Ein Etikett für ein Band

Schauen wir uns diese Grafik noch einmal an, eine Bandgrafik:

Es sieht kompliziert aus, aber eigentlich sind es nur Kreise und Linien. Es lässt sich eigentlich mit einem einzigen Tag implementieren, ist aber sehr zeitaufwändig und erfordert eine genaue Kontrolle background-size und background-position jedes Farbverlaufs im background-image :

Verwenden Sie zunächst mehrere Farbverläufe, um die gesamte Hintergrundstruktur zu erzielen:

div {
    Breite: 180px;
    Höhe: 120px;
    Rahmenradius: 5px;
    Hintergrundbild: linearer Farbverlauf (nach rechts, #444 10px, transparent 10px),
        linearer Farbverlauf (nach links, #444 10px, transparent 10px),
        linearer Farbverlauf (135 Grad, Nr. 444 20 Pixel, transparent 20 Pixel),
        linearer Farbverlauf (-135 Grad, #444 20px, transparent 20px),
        linearer Gradient(
            nach unten,
            transparent 35px,
            #be0974 35px,
            #be0974 43px,
            #da6a57 43px,
            #da6a57 51px,
            #eebc31 51px,
            #eebc31 59px,
            #92a25b 59px,
            #92a25b 67px,
            #46a7c0 67px,
            #46a7c0 75px,
            transparent 75px
        ),
        linearer Gradient(
            nach unten,
            transparent 10px,
            #f7f7f7 10px,
            #f7f7f7 85px,
            transparent 85px
        ),
        linearer Farbverlauf (nach oben, transparent 26px, #444 26px),
        linearer Gradient(
            105 Grad,
            #444 70px,
            #333 70px,
            #333 73px,
            transparent 73px
        ),
        linearer Gradient(
            -105 Grad,
            #444 70px,
            #333 70px,
            #333 73px,
            transparent 73px
        ),
        linearer Farbverlauf (nach oben, #444 24px, #777 24px, #777 26px, #444 26px);
    Kastenschatten: -4px -4px 2px rgb(0 0 0 / 20 %);
}

Man erhält folgende Grafik:

Verwenden Sie box-shadow , um durch eines der Pseudoelemente die Kreispunkte auf dem Band zu realisieren:

div:nach {
    Position: absolut;
    Inhalt: "";
    Breite: 5px;
    Höhe: 5px;
    Hintergrund: #999;
    Randradius: 50 %;
    box-shadow: 165px 0 0 #999, 0 104px 0 #999, 165px 104px 0 #999, 55px 101px 0 1px #222, 68px 98px 0 1px #222, 98px 98px 0 1px #222, 110px 101px 0 1px #222, 51px 38px 0 #444, 114px 38px 0 #444, 44px 46px 0 #444, 58px 46px 0 #444, 107px 46px 0 #444, 121px 46px 0 #444, 51px 53px 0 #444, 114px 53px 0 #444, 51px 46px 0 6px #ccc, 114px 46px 0 6px #ccc;
    links: 5px;
    oben: 5px;
} 

Das letzte verbleibende Pseudoelement wird verwendet, um den Stil des mittleren Teils des Bandes zu implementieren:

div:vor {
    Position: absolut;
    Inhalt: "";
    Breite: 90px;
    Höhe: 26px;
    Rand links: -45px;
    links: 50%;
    oben: 41px;
    Hintergrundfarbe: #ccc;
    Hintergrundbild: linearer Farbverlauf (nach unten, #444 5px, transparent 5px),
        linearer Farbverlauf (nach oben, #444 5px, transparent 5px),
        linearer Farbverlauf (nach rechts, #444 30px, transparent 30px),
        linearer Farbverlauf (nach links, #444 30px, transparent 30px),
        radialer Farbverlauf (Kreis bei 10px 12px, #a0522d 32px, transparent 32px);
    Rahmenradius: 30px;
}

Auf diese Weise wird ein einzelnes Label zur Implementierung verwendet. Die Demo stammt von A Single Div. Sie können hier klicken, um den vollständigen Code anzuzeigen: CodePen Demo – A single Div Disk.

Natürlich kann ein einzelnes Tag noch viel mehr erreichen. Sehen Sie sich Folgendes an, was alles mit einem Div erreicht werden kann:

Mit anderen hochrangigen Attributen

Natürlich sind die obigen Zeichnungen mit Hilfe von Pseudoelementen, background und box-shadow noch relativ konventionell. Wir können auch versuchen, innerhalb eines Div mix-blend-mode , filter und mask hinzuzufügen, um interessantere Effekte zu erzielen.

Beispielsweise verwendet der folgende Effekt ein Div, um den Geistereffekt zu erzielen:

Neben der Verwendung eines Div zum Erzielen des Grundeffekts werden auch einige filter verwendet, um einige Fusionseffekte zu erzielen.

Den vollständigen Code finden Sie hier: CodePen Demo -- A Single Div Ghost

endlich

Es ist immer noch sehr interessant, nur CSS zu verwenden, um ein einzelnes Div zu zeichnen. Es kann auch eine gute Übung für CSS sein, obwohl es im Geschäftsleben möglicherweise nicht verwendet wird:)

Hier sind noch ein paar weitere Websites zum Zeichnen einzelner Etiketten, die Sie sich ansehen und nachahmen können:

• Ein einzelnes Div
• MagicCSS
• CodePen – Einzelnes Div

Nun, dieser Artikel endet hier, ich hoffe, er hilft Ihnen 😃

Weitere wunderbare technische CSS-Artikel sind in meinem Github – iCSS – gesammelt. Sie werden ständig aktualisiert. Klicken Sie einfach auf einen Stern, um sich anzumelden und zu sammeln.

Oben sind die Details der Implementierung von Single-Div-Zeichentechniken in CSS aufgeführt. Weitere Informationen zum Zeichnen von CSS-Single-Div-Einzelbeschriftungen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!