Schreiben Sie mit CSS in drei Schritten einen Coupon für eine Shopping-Card

Heute ist der 618. und alle großen Einkaufszentren veranstalten Werbeaktionen. Heute werden wir CSS verwenden, um einen Coupon für eine Einkaufszentrumkarte zu erstellen:

Sind Sie immer noch besorgt über die verschiedenen Formate von Einkaufszentrum-Gutscheinen wie den oben genannten? Ich kenne mich mit CSS nicht aus und Canvas ist zu schwierig. Was soll ich tun?

Wie viele Schritte sind nötig, um einen Einkaufszentrum-Gutschein mit CSS zu schreiben?

Insgesamt sind es drei Schritte:

• Öffnen Sie diese URL (geben Sie https://qishaoxuan.github.io/css_tricks/hollowOut/ im Browser ein)
• Finden Sie den Stil, den Sie brauchen
• Kopieren und Einfügen

Nachdem wir es dem Test übergeben haben, analysieren wir die CSS-Karte.

Lassen Sie uns die Grundlagen vorbereiten

radialer Farbverlauf:

Hintergrund: radialer Farbverlauf (Formgröße an Position, Startfarbe, …, letzte Farbe);

Auf diese Weise können wir leicht ein zentriertes kreisförmiges Hintergrundbild schreiben

.Mittelkreis {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: radialer Farbverlauf (Kreis bei 50px 50px, transparent 10px, #00adb5 0);
  }

linearer Farbverlauf

Hintergrund: linearer Farbverlauf (Richtung, Farbstopp1, Farbstopp2, …);

Wir müssen den spezifischen Verlauf des Farbverlaufs nicht kennen. Schreiben Sie einfach einen einfachen, der die Verlaufseigenschaften ohne Verlaufshintergrundbild verwendet:

.linearer Gradient {
    Breite: 100px;
    Höhe: 100px;
    Hintergrund: linearer Farbverlauf (nach rechts, #00adb5, #00adb5);
  }

Hintergrund

Sie können mehrere Bilder für background festlegen. Beachten Sie dabei background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip]; Verwenden Sie diese , sie zu trennen.

Beginnen Sie mit der Zusammenstellung der Grundlagen

Schreiben Sie die einfachste

Positionieren Sie den Kreis einfach im Beispiel des mittleren Kreises oben links.

.linker Kreis{
  Breite: 100px;
  Höhe: 100px;
  Position: relativ;
  Hintergrund: radialer Farbverlauf (Kreis bei 0 50px, transparent 10px, #00adb5 0) oben links/100px 100 % keine Wiederholung;
}

Weiteres Lernen

Erinnern Sie sich, background ein repeat hat? Das heißt, wir müssen nur einen Teil des Stils festlegen und dann repeat verwenden. Sehen Sie sich das Bild an. Ist das nicht eine Kombination aus linear-gradient und radial-gradient ohne Gradient? Mithilfe der Pseudoklasse können wir es ausschreiben.

.hohle Kreise {
  Breite: 300px;
  Höhe: 100px;
  Position: relativ;
  Hintergrund: #00adb5;
  Rand unten: 10px;
}
.hohlkreise::nach {
  Inhalt: '';
  Position: absolut;
  Höhe: 5px;
  Breite: 100 %;
  links: 0;
  unten: -5px;
  Hintergrundbild: linearer Farbverlauf (nach rechts, #00adb5 5px, transparent 5px, transparent),
  radialer Farbverlauf (10px Kreis bei 10px 5px, transparent 5px, #00adb5 5px);
  Hintergrundgröße: 15px 5px;
}

Etwas komplizierter

Es scheint sehr einfach zu sein, ist es nicht einfach, einen weiteren Kreis des vorherigen zu zeichnen? Wir müssen jedoch berücksichtigen, dass die Farben auf beiden Seiten unterschiedlich sind. Daher müssen wir vier Hintergrundbilder zeichnen, jeden Kreis in den Ecken des Quadrats positionieren und sie dann miteinander kombinieren.

.zwei-Kreise {
  Breite: 300px;
  Höhe: 100px;
  Hintergrund: radialer Farbverlauf (Kreis oben rechts, transparent 10px, #00adb5 0) oben links / 60px 51% keine Wiederholung,
    radial-gradient(Kreis rechts unten, transparent 10px, #00adb5 0) unten links /60px 51% keine Wiederholung,
    radial-gradient(Kreis oben links, transparent 10px, #eeeeee 0) oben rechts /240px 51% keine Wiederholung,
    radialer Farbverlauf (Kreis unten links, transparent 10px, #eeeeee 0) unten rechts /240px 51 % keine Wiederholung;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.