CSS verwendet radialen Farbverlauf zur Implementierung von Coupon-Stilen

In diesem Artikel erfahren Sie, wie Sie mithilfe des radialen Farbverlaufs in CSS den in der folgenden Abbildung gezeigten Coupon-Stil-Effekt erzielen:

Grundlegende Zeichenstile

Zuerst zeichnen wir den Grundstil des Coupons, der sehr einfach ist und nicht im Detail erklärt wird.

<div class="Gutschein">
  <div Klasse="links"></div>
  <div class="right">Gib 100 minus 30 aus</div>
</div>

/* scss */
.Gutschein {
  Breite: 600px;
  Höhe: 200px;
  Anzeige: Flex;
  .links {
    Breite: 30%;
    Höhe: 100%;
    Hintergrundfarbe: #f76260;
  }
  .Rechts {
    Höhe: 100%;
    Rand: 1px durchgezogen #ddd;
    biegen: 1;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Schriftgröße: 40px;
  }
}

Anatomie einer Sawtooth-Implementierung

Der gezackte Teil kann tatsächlich als zehn zusammengefügte Bildfragmente gesehen werden, wie unten gezeigt. Jedes Segment ist 6 Pixel breit, was dem Radius der Sägezahnlinie entspricht, und 20 Pixel hoch. Wir müssen also nur dieses Segment zeichnen und den Vorgang wiederholen, um den Rest auszufüllen.

Wir fügen dem Pseudoelement „Gutschein“ den gezackten Stil hinzu und fertig:

&::vor {
  Inhalt: '';
  Position: absolut;
  Höhe: 100%;
  Breite: 6px;
  links: 0;
  oben: 0;
  Hintergrundbild: radialer Farbverlauf (Kreis bei 0px 10px, weiß 6px, #f76260 6px);
  Hintergrundgröße: 6px 20px;
}

Der Kerncode hier ist background-image: radial-gradient(circle at 0px 10px, white 6px, #f76260 6px); . Es handelt sich eigentlich um eine Kurzschreibweise: background-image: radial-gradient(circle at 0px 10px, white 0, white 6px, #f76260 6px, #676260 100%);, was bedeutet, dass der radiale Farbverlauf an der Position (0px, 10px) beginnt, die Verlaufsform ein Kreis ist und sich von 0 bis 6px allmählich von Weiß zu Weiß ändert, was eine reine Farbe ist; von 6px bis zum Rand der Grafik ändert er sich allmählich von #f76260 zu #f76260, was ebenfalls eine reine Farbe ist.

Um unseren Code im Zickzack-Stil wiederzuverwenden, können wir ein SCSS-Mixin definieren:

/**
  * Um bessere Ergebnisse zu erzielen, sollten Sie Folgendes sicherstellen:
  * 1. $height ist durch $num teilbar * 2. 2 * $radius < $height / $num
  */
@mixin leftSawtooth($höhe, $num, $radius, $farbe, $bgColor) {
  $segmentHeight: $Höhe / $num;
  Höhe: $höhe;
  &::vor {
    Inhalt: '';
    Position: absolut;
    Höhe: 100%;
    Breite: $radius;
    links: 0;
    oben: 0;
    Hintergrundbild:
      radialer Farbverlauf (Kreis bei 0px $segmentHeight / 2, $bgColor $radius, $color $radius);
    Hintergrundgröße: $radius $segmentHeight;
  }
}

Dies macht die Nutzung sehr komfortabel:

@include leftSawtooth(600px, 10, 6px, #f76260, weiß);

Verbesserte Version

Die gezackte Farbe der aktualisierten Version stimmt nicht mit der Hintergrundfarbe des linken Teils überein. Es wird einige Unterschiede bei der Implementierung geben, aber die Idee ist dieselbe.

Zeichnen Sie zunächst den Grundstil:

.Gutschein {
  Breite: 600px;
  Höhe: 200px;
  Rand: 20px automatisch;
  Anzeige: Flex;
  Position: relativ;
  Rand: 1px durchgezogen #ddd;
  .links {
    Breite: 30%;
    Höhe: 100%;
    Rahmen rechts: 1px gestrichelt #ddd;
  }

  .Rechts {
    Höhe: 100%;
    biegen: 1;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: zentriert;
    Schriftgröße: 40px;
  }
}

Zeichnen Sie dann den gezackten Teil. Beachten Sie, dass der Radius des Kreises hier dem leeren Teil von 5 Pixeln plus dem 1-Pixel-Rand entspricht, sodass die Zeichnung des Hintergrundfragments einen zusätzlichen Farbverlauf benötigt:

Hintergrundbild: radialer Farbverlauf (Kreis bei 0px 10px,
  weiß 5px, /* Die Farbe innerhalb des Kreises ist die Hintergrundfarbe*/
  #ddd 5px,
  #ddd 6px,
  transparent 6px /* Die Farbe außerhalb des Kreises ist transparent*/
);

Beachten Sie, dass wir die Farbe innerhalb des Kreises auf die Hintergrundfarbe und die Farbe außerhalb des Kreises auf die transparente Farbe setzen. Die Gründe dafür werden später erläutert. Die aktuelle Wirkung kommt dem Ziel immer näher, dennoch gibt es einige Unterschiede:

Die Lösung besteht darin, das Pseudoelement um die Größe des Rahmens nach links zu verschieben. Auf diese Weise wird die Linie auf der linken Seite des Halbkreises durch die Farbe innerhalb des Kreises abgedeckt, während die Linie erhalten bleibt, da andere Stellen transparent sind (deshalb wird die Farbe innerhalb des Kreises als Hintergrundfarbe und die Farbe außerhalb des Kreises als transparente Farbe festgelegt).

Der komplette Mixin sieht folgendermaßen aus:

@mixin leftSawtoothBorder($höhe, $num, $radius, $bgColor, $borderColor, $borderWidth) {
  $segmentHeight: $Höhe / $num;
  $extendedRadius: $radius + $borderWidth;
  Höhe: $höhe;
  &::vor {
    Inhalt: '';
    Position: absolut;
    Höhe: 100%;
    Breite: $extendedRadius;
    links: -$borderWidth;
    oben: 0;
    Hintergrundbild: radialer Farbverlauf (Kreis bei 0px $segmentHeight / 2,
      $bgColor $radius,
      $borderColor $radius,
      $borderColor $extendedRadius,
      transparent $extendedRadius
    );
    Hintergrundgröße: $extendedRadius $segmentHeight;
  }
}

Zusammenfassen

Oben ist die Einführung von CSS mit radialem Farbverlauf, um einen Coupon-Stil zu erreichen. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!
Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!