Wie kann man Lückeneffekt auf das Karten- und Gutscheinlayout mit Gradientenhintergrund erzielen?

Verwenden Sie clever CSS -Maske, um einen Gradienten -Hintergrundkarten -Gutschein -Gap -Effekt zu erstellen

Im Design ist es häufig eine Herausforderung, Kartencoupons, insbesondere Lücken in der Gradientengradienten, Kerbeseffekte zu erhöhen. In diesem Artikel wird ausführlich vorgestellt, wie das mask von CSS verwendet wird, um diesen Effekt leicht zu erreichen.

Design -Puzzle: Karten -Gutscheinlücke unter Gradientenhintergrund

Wenn der Hintergrund des Kartengutscheins solide ist, können Sie die Lücke leicht erreichen, indem Sie ihn direkt mit einer festen Farbe maskieren. Aber der Gradientenhintergrund ist nicht der Fall, und eine einfache Maske zerstört den Gradienteneffekt. Daher ist eine Methode erforderlich, um die Lücke genau zu "ausgraben", während der Gradient beibehält.

Lösung: CSS -Maskeneigenschaften

Das CSS mask ist der Schlüssel zur Lösung dieses Problems. Es ermöglicht es uns, Elemente mit Bildern oder Gradienten zu "blockieren", wodurch eine Vielzahl komplexer mattes Effekte erzeugt werden, die für Notch -Designs in Gradientenhintergrund perfekt geeignet sind.

Der folgende Code -Snippet zeigt, wie man einen kreisförmigen Lücken unter Verwendung eines radialen Gradienten erstellt:

 .Card {
  -Webkit-Maske: Radialgradient (Kreis bei 20px 20px, #0000 20px, transparent 0); / * Safari und Chrom *//
  Maske: Radialgradient (Kreis bei 20px 20px, #0000 20px, transparent 0); / * Firefox */
}

Dieser Code erstellt eine kreisförmige Maske durch einen radialen Gradienten. #0000 bedeutet undurchsichtiges Schwarz (Okklusionsbereich) transparent Mittel transparent (Notch -Bereich). 20px 20px legt die Mittelposition an, 20px steuert den Notch -Radius. In Bezug auf die Browserkompatibilität wurde -webkit-mask hinzugefügt, um Safari und Chrome zu unterstützen.

Effektvorschau

Nach der Anwendung des obigen Code wird in der oberen linken Ecke des Gutscheins eine kreisförmige Lücke angezeigt, während der Gradientenhintergrund intakt bleibt.

Hilfswerkzeuge

Zusätzlich zum manuellen Schreiben von CSS -Code können einige Online -Design -Tools auch das Design und die Gap -Generierung des Kartengutscheins unterstützen. Beispielsweise können einige "Gutscheindesigner" oder "Grafikredakteure" intuitivere Funktionen für Notch -Erstellungen bieten.

Zusammenfassen

Mit dem CSS mask -Attribut können wir den Gradienten -Hintergrundkarten -Gutscheinen effizient Lücken in verschiedenen Formen hinzufügen, um den Designeffekt zu verbessern. Diese Methode ist einfach und einfach zu bedienen und kann das allgemeine Erscheinungsbild des Kartengutscheins beibehalten.

Das obige ist der detaillierte Inhalt vonWie kann man Lückeneffekt auf das Karten- und Gutscheinlayout mit Gradientenhintergrund erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!