Verwenden des radialen Farbverlaufs in CSS zum Erzielen eines Karteneffekts

Verwenden des radialen Farbverlaufs in CSS zum Erzielen eines Karteneffekts

Vor einigen Tagen erhielt eine Kollegin ein Punkte-Mall-Projekt, das eine Funktion zum Eintauschen von Karten und Coupons gegen Geschenke beinhaltete. Ich habe eine Weile darüber nachgedacht, mir sind aber keine guten Ideen eingefallen, also habe ich mich wieder der Arbeit an meinem eigenen Projekt gewidmet. Ich dachte jedoch, dass ich in Zukunft möglicherweise auf ähnliche Bedürfnisse stoßen würde, und habe daher am Wochenende die Implementierung mehrerer Karten- und Couponeffekte studiert und geklärt.

Gängige Kartenstile sind die folgenden:

Verwendung von Pseudoelementen (kleinere Version)

ticket.weniger

.ordinary-mixins-ticket-horizontal(@Breite,@Höhe,@r,@oben, @Farbe) {
  Position: relativ;
  Box-Größe: Rahmenbox;
  Polsterung: 0 @r;
  Breite: @width;
  Höhe: @Höhe;
  Hintergrundclip: Inhaltsbox;
  Hintergrundfarbe: @color;

  &::vor {
    Position: absolut;
    oben: 0;
    links: 0;
    Inhalt: "";
    Anzeige: Block;
    Breite: @r + 1px;
    Höhe: 100%;
    Hintergrund: radialer Farbverlauf (@r Kreis links oben, transparent @r, @Farbe @r + 1px);
  }

  &::nach {
    Position: absolut;
    oben: 0;
    rechts: 0;
    Inhalt: "";
    Anzeige: Block;
    //Das @r + 1px dient hier dazu, Lücken beim Vergrößern oder Verkleinern einer bestimmten Seitenbreite zu vermeiden: @r + 1px;
    Höhe: 100%;
    //Das @r + 1px dient hier dazu, Aliasing im Hintergrund zu verhindern: radial-gradient(@r Kreis rechts oben @r, transparent @r, @color @r + 1px);
  }
}

.übergeordnet {
  .ordinary-mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

App.js

importiere React von „react“;
importiere './App.css';
importiere „./ticket.less“;

Funktion App() {
    zurückkehren (
        <div Klassenname="App" Stil={
            {
                Anzeige: "flex",
                justifyContent: "zentriert",
                alignItems: "zentriert",
                Höhe: 600
            }
        }>
            <div Klassenname={'übergeordnet'}>
                <div Klassenname = "Kind">666</div>
            </div>
        </div>
    );
}

Standard-App exportieren;

Verbesserter Stil 1 (kleinere Version) 

.mixins-ticket-vertical(@width, @height, @r, @left, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  // @left - 1px dient dazu, Lücken beim Zoomen in bestimmten Prozentwerten zu vermeiden. // @r + 1px dient dazu, gezackte Kanten zu vermeiden. // 51 % dient dazu, einen kleinen leeren Bereich in der Mitte eines Elements zu vermeiden. Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) @left - 1px oben ~'/' 100 % 51 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-color @r + 1px) @left - 1px unten ~'/' 100% 51% keine Wiederholung,
    radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px ) -(@Breite - @links) oben ~'/' 100% 51% keine Wiederholung,
    radialer Farbverlauf (Kreis unten rechts, transparent @r, @r-Farbe @r + 1px) - (@Breite - @links) unten ~'/' 100 % 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.mixins-ticket-vertical-two(@width, @height, @r, @left, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  // @left + 1px dient dazu, Lücken beim Vergrößern zu vermeiden// @r + 1px dient dazu, gezackte Kanten zu vermeiden// 51% dient dazu, einen kleinen leeren Bereich in der Mitte eines Elementhintergrunds zu vermeiden: radial-gradient(Kreis oben links, transparent @r, @r-Farbe @r + 1px) rechts oben ~'/' (@width - @left) 51% no-repeat,
  radial-gradient(Kreis unten links, transparent @r, @l-color @r + 1px) rechts unten ~'/' (@width - @left) 51% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) oben links ~'/' @left + 1px 51% keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @l-Farbe @r + 1px) links unten ~'/' @left + 1px 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.übergeordnet {
  .mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-vertical-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

Verbesserter Stil 1 (Scss-Version)

@mixin mixins-ticket-vertical($Breite, $Höhe, $r, $links, $l-Farbe, $r-Farbe) {
  Breite: $Breite;
  Höhe: $höhe;
  // $left - 1px dient dazu, Lücken beim Zoomen in bestimmten Prozentwerten zu vermeiden. // $r + 1px dient dazu, gezackte Kanten zu vermeiden. // 51% dient dazu, einen kleinen leeren Bereich in der Mitte eines Elements zu vermeiden. Hintergrund: radialer Farbverlauf (Kreis oben links, transparent $r, $l-Farbe $r + 1px) $left - 1px oben / 100 % 51 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent $r, $l-Farbe $r + 1px) $left - 1px unten / 100% 51% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent $r, $r-Farbe $r + 1px ) -($Breite - $links) oben / 100% 51% keine Wiederholung,
  radialer Farbverlauf (Kreis unten rechts, transparent $r, $r-Farbe $r + 1px) – ($Breite – $links) unten / 100 % 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.übergeordnet {
  @include mixins-ticket-vertical(200px, 200px, 10px, 150px, #fc3a28, #fc3a28);
}

.Kind {
  Zeilenhöhe: 200px;
}

Verbesserter Stil 2 (kleinere Version) 

.mixins-ticket-horizontal(@width, @height, @r, @top, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) links oben - 1px ~'/' 51 % 100 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-Farbe @r + 1px) links -(@Höhe - @oben) ~'/' 51% 100% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) rechts oben - 1px ~'/' 51% 100% keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @r-Farbe @r + 1px) rechts - (@Höhe - @oben) ~'/' 51 % 100 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.mixins-ticket-horizontal-two(@width, @height, @r, @top, @l-color, @r-color) {
  Breite: @width;
  Höhe: @Höhe;
  Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @r-Farbe @r + 1px) links unten ~'/' 51% (@Höhe - @oben) keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-color @r + 1px) oben links ~'/' 51% @top + 1px keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) rechts unten ~'/' 51% (@Höhe - @oben) keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @l-Farbe @r + 1px) rechts oben ~'/' 51 % @top + 1px keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));
}

.übergeordnet {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

Verbesserter Stil 3 (kleinere Version) 

.mixins-ticket-horizontal-line(@width, @height, @r, @top, @l-color, @r-color,@border-offset,@border-color) {
  Breite: @width;
  Höhe: @Höhe;
  Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) links oben - 1px ~'/' 51 % 100 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-Farbe @r + 1px) links -(@Höhe - @oben) ~'/' 51% 100% keine Wiederholung,
  radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px) rechts oben - 1px ~'/' 51% 100% keine Wiederholung,
  radialer Farbverlauf (Kreis rechts unten, transparent @r, @r-Farbe @r + 1px) rechts - (@Höhe - @oben) ~'/' 51 % 100 % keine Wiederholung;
  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));

  &::nach {
    Position: absolut;
    links: 0;
    rechts: 0;
    oben: @top;
    Rand: automatisch;
    Inhalt: '';
    Breite: berechnet (~ „100 %“ – 2 * @r – @Randversatz);
    Rahmen oben: 1px gestrichelt @Rahmenfarbe;
  }
}

.übergeordnet {
  .mixins-ticket-horizontal(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
  //.mixins-ticket-horizontal-two(200px, 200px, 10px, 150px, #fc3a28,#fc3a28);
}
.Kind {
  Zeilenhöhe: 200px;
}

Verbesserter Stil 4 (kleinere Version)

.mixins-ticket-vertical-three(@width, @height, @r, @left, @l-color, @r-color,@sm-r,@sm-offset,@sm-color) {
  Breite: @width;
  Höhe: @Höhe;
  // @left - 1px dient dazu, Lücken beim Zoomen in bestimmten Prozentwerten zu vermeiden. // @r + 1px dient dazu, gezackte Kanten zu vermeiden. // 51 % dient dazu, einen kleinen leeren Bereich in der Mitte eines Elements zu vermeiden. Hintergrund: radialer Farbverlauf (Kreis oben links, transparent @r, @l-Farbe @r + 1px) @left - 1px oben ~'/' 100 % 51 % keine Wiederholung,
  radial-gradient(Kreis unten links, transparent @r, @l-Farbe @r + 1px) @links - 1px unten ~'/' 100% 51% keine Wiederholung,
    radial-gradient(Kreis oben rechts, transparent @r, @r-Farbe @r + 1px ) -(@Breite - @links) oben ~'/' 100% 51% keine Wiederholung,
    radialer Farbverlauf (Kreis unten rechts, transparent @r, @r-Farbe @r + 1px) - (@Breite - @links) unten ~'/' 100 % 51 % keine Wiederholung;

  Filter: Schlagschatten (2px 2px 2px rgba (0, 0, 0, .2));

  &::nach {
    Inhalt: '';
    Position: absolut;
    oben: 0;
    rechts: -@sm-r;
    Breite: @sm-r;
    Höhe: 100%;
    Hintergrundbild: radialer Farbverlauf (Kreis bei @sm-r, transparent @sm-r, @r-Farbe @sm-r + 1px);
    //Hintergrundgröße: @sm-r;
    Hintergrundgröße: @sm-r @sm-offset;
  }
}

.übergeordnet {
  .mixins-ticket-vertical-three(200px, 200px, 10px, 150px, #fc3a28, #fc3a28,5px,20px,#fc3a28);
}

.Kind {
  Zeilenhöhe: 200px;
}

Vorsichtsmaßnahmen

// Ticket.weniger

//Hintergrund: radialer Farbverlauf (Kreis oben rechts, transparent @r, @lcolor 0) - (@width - @left) oben ~'/' 100 % 55 % keine Wiederholung;
// Zerlegen Sie die obige Codezeile in Folgendes:
//Hintergrundbild: radial-gradient(Kreis oben rechts, transparent @r, @lcolor 0);
//Hintergrundposition: -(@width - @left) oben;
//Hintergrundgröße: 100 % 55 %;
//Hintergrundwiederholung: keine Wiederholung;

/*Hinweis: Hier gibt es zuerst einen transparenten Bereich von 50 Pixeln, und dann wird der zweite Bereich auf 0 gesetzt, was als Zurücksetzen des Stilbereichs von hier aus verstanden werden kann*/
/*Hintergrund: radial-gradient(Kreis oben rechts, transparent 50px, rot 0, #66a8ff 50%);*/

/*Wenn in Chrome die Farbe zwischen zwei Bereichen direkt mit einer Abweichung von 0 übergeht, kommt es zu starkem Aliasing*/
/*Hintergrund: radialer Farbverlauf (10px links, transparent 50 %, #F6327C 50 %);*/
/*Hintergrund: radialer Farbverlauf (10px links, transparent 50 %, #F6327C 55 %);*/

/*Schatteneffekt hinzufügen*/
/*Filter: Schlagschatten(2px 2px 2px rgba(0,0,0,.2));*/

/*Mehrere radiale Farbverläufe akkumuliert*/
/*Hintergrund: 
radialer Farbverlauf (50px 100px Ellipse, transparent 40px, gelb 41px, rot 49px, transparent 50px),
radial-gradient(30px Kreis, rot, rot 29px, transparent 30px);*/

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von radialen Farbverläufen in CSS zum Erzielen von Karten- und Couponeffekten. Weitere relevante radiale Farbverläufe in CSS zum Erzielen von Karten- und Couponeffekten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  HTML-Formular und die Verwendung interner Formular-Tags

>>:  Mobiles Internet-Zeitalter: Responsive Webdesign ist zum allgemeinen Trend geworden

Artikel empfehlen

Spezifische Verwendung des MySQL-Parameters binlog_ignore_db

Vorwort: Nach dem Studium des vorherigen Artikels...

Schreiben Sie einen einfachen Rechner mit JavaScript

Die Wirkung ist wie folgt:Referenzprogramm: <!...

MySQL-Techniken zum schnellen Datenvergleich

Im MySQL-Betrieb und bei der Wartung möchte ein F...

Ein Leitfaden zum Schreiben flexibler, stabiler und qualitativ hochwertiger HTML- und CSS-Codestandards

Die goldene Regel Befolgen Sie immer die gleichen...

So erhalten Sie den Maximal- oder Minimalwert einer Zeile in SQL

Originaldaten und Zieldaten SQL-Anweisungen imple...

JavaScript – Verwenden von Slots in Vue: Slot

Inhaltsverzeichnis Verwenden von Slots in Vue: Sl...

Verwenden von Shadowsocks zum Erstellen eines transparenten LAN-Gateways

Inhaltsverzeichnis Installieren und konfigurieren...

js+css zur Realisierung eines dreistufigen Navigationsmenüs

In diesem Artikelbeispiel wird der spezifische Co...

Allgemeine Lösungen für das Ablaufen der Lese-/Schreibtrennung in MySQL

Die Fallstricke der Lese- und Schreibtrennung in ...

Beispielcode für die Projektbereitstellung zur Trennung von Front-End und Back-End in Flask und Vue

Ich habe vor einiger Zeit ein Projekt entwickelt....

Wie autorisiert man in Linux den gesamten Inhalt eines Ordners für einen bestimmten Benutzer?

【Problemanalyse】 Wir können den Befehl chown verw...

So verwalten Sie große Datei-Uploads und Breakpoint-Resumes basierend auf js

Inhaltsverzeichnis Vorwort Frontend-Struktur Back...

Windows verhindert, dass der Remote-Desktop für längere Zeit automatisch getrennt wird

Jeder, der schon einmal Windows Remote Desktop zu...

Asynchroner Lebenszyklus von AsyncHooks in Node8

Async Hooks ist eine neue Funktion von Node8. Sie...

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Im vorherigen Artikel wurde beschrieben, wie man ...