Fun Times Styling -Kontrollkastenzustände

Im Webdesign können wir den Stil von Texteingangsfeldern, Links und sogar Schaltflächen ignorieren, aber die Kontrollkästchen sind unterschiedlich. Daher bringt das Stildesign des Kontrollkasten immer Frische.

Obwohl das Kontrollkästchen -Design nicht kompliziert ist, müssen wir nicht auf einfache Änderungen des Hintergrundfarbens oder beim Hinzufügen/Entfernen von Grenzen beschränkt sein, um Zustandsänderungen anzugeben. Hervorragende Ergebnisse können ohne hervorragende Designfähigkeiten leicht erzielt werden. Dieser Artikel zeigt Ihnen verschiedene Methoden.

Grundwissen

Im folgenden Beispiel wird im Kontrollkästchen im Grunde genommen ein Dreischicht-Layout angewendet: Das untere Kontrollkästchen ist das Kontrollkästchen und das Oberteil sind zwei überlagerte Elemente oder Pseudoelemente. Abhängig davon, welches Element sichtbar ist, gibt es den ausgewählten oder deaktivierten Status des Kontrollkästchens an.

Im Code verwenden alle Layouts (einschließlich Kontrollkästchen) Gitter. Sie können andere geeignete Layouts entsprechend der tatsächlichen Situation auswählen. Weitere Anweisungen für Code und Design finden Sie in den Code -Kommentaren.

Darüber hinaus enthält jedes Element, das oben im Kontrollkästchen überlagert ist pointer-events: none festgelegt, um zu vermeiden, dass Benutzer auf das Kontrollkästchen klicken oder auf das Kontrollkästchen klicken.

Schauen wir uns nun den ersten Ansatz an.

Methode 1: Hintergrund als Statusindikator mischen

Der Hybridmodus in CSS ist eine vielseitige Technologie. Die manipulierenden Farben in Bezug auf zwei oder mehr Elemente oder Hintergründe sind in einigen unerwarteten Szenarien sehr nützlich.

Das Kontrollkästchen ist ein Beispiel.

 <label for="un">un</label>

 input [type = checkbox] :: vor,
input [type = checkbox] :: After {
  Mix-Blend-Mode: hartes Licht;
  Zeiger-Events: Keine;
  /*Mehr Stile*/
}
input [type = checkbox] :: vor {
  Hintergrund: grün;
  Inhalt: '✓';
  Farbe: weiß;
  /*Mehr Stile*/
}
input [type = checkbox] :: After {
  Hintergrund: Blau;
  Inhalt: '⨯';
  /*Mehr Stile*/
}
input [type = checkBox]: checked :: After {{
  Mix-Blend-Mode: Unstet;
  Farbe: transparent;
}

In diesem Beispiel habe ich die Pseudoelemente des Kontrollkasten auf Grün und Blau gesetzt, sie zusammen überlagern und mix-blend-mode Wert für jedes Element festgelegt. Dies bedeutet, dass der Hintergrund jedes Elements mit seiner Hintergrundfarbe gemischt wird.

Ich habe den hard-light verwendet, der die Multiplikation oder Filtereffekte simuliert, basierend darauf, ob die obere Farbe dunkel oder hell ist. Sie können tief in die verschiedenen Hybridmodi auf MDN eintauchen.

Wenn das Kontrollkästchen ausgewählt ist, wird mix-blend-mode Wert des ::after Pseudoelement auf unset festgelegt, was zu unterschiedlichen visuellen Effekten führt.

Methode 2: 3D -Animation erstellen

Animation Farbblöcke macht Spaß. Es wäre besser, wenn es 3D aussehen würde. CSS können 3D -räumliche Renderingelemente simulieren. So können wir ein 3D -Feld erstellen und es drehen, um die Änderung im Kontrollkästchen -Status anzugeben.

<div>
  <div>
<i></i><i></i><i></i><i></i>
</div>
</div>
<label for="un">un</label>

 .C-Checkbox> div {
  Übergang: Transformation.
  Transform-Stil: Preserve-3d;
  Zeiger-Events: Keine;
  /*Mehr Stile*/
}
/*Front*/
.C-Checkbox> Div> I: Erstkind {
  Hintergrund: #ddd;
  Transformation: TranslateZ (-10px);
}
/*zurück*/
.C-Checkbox> Div> I: Last-Kind {
  Hintergrund: Blau;
  Transformation: TranslateZ (10px);
}
/*Seite*/
.C-Checkbox> Div> I: N-ten vom Typ (2),
.c-Checkbox> div> i: n-vom-type (3) {
  Transformation: rotatex (90 °) Drehung (90 Grad);
  Position: Relativ;
  Höhe: 20px;
  Top: 10px;
}
.c-Checkbox> div> i: n-vom-type (2) {
  Hintergrund: Marine;
  Rechts: 20px;
}
.c-Checkbox> div> i: n-vom-type (3) {
  Hintergrund: DarkSlateGray;
  links: 20px;
}

Nach dem Kontrollkästchen<div> Das Element wird zu einem 3D-Raumbehälter-nach <code>transform transform-style: preserve-3d;<i></i> Elemente (grau und blau), es gibt einen bestimmten Abstand zwischen ihnen. Zwei weitere Elemente zwischen sich und bedeckten ihre linken und rechten Seiten. Es ist wie eine Kartonbox, die mit der Ober- und Unterseite mit der Ober- und Unterseite mit der Ober- und Unterseite bedeckt ist.

Wenn das Kontrollkästchen ausgewählt ist, dreht sich dieses graue und blaue Feld seitlich zur anderen Seite. Da ich schon<div> Übergänge hinzugefügt, sodass seine Rotation animiert ist.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Eingabe: Checked Div { Transformation: Rotatey (180 Grad); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <h3> Methode 3: Verwenden Sie abgerundete Ecken</h3> <p> Die abgerundeten Ecken des Kontrollkasten ändern? Nichts Interessantes. Wechseln Sie die abgerundeten Ecken anderer Kontrollkästchen in der Nähe? Das ist ein bisschen interessant.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;label for=&quot;un&quot;&gt;un&lt;/label&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div><div class="contentsignin">Nach dem Login kopieren</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> Eingabe { Hintergrund: #ddd; Border-Radius: 20px; /*Mehr Stile*/ } Eingabe: Nicht (: Erst vom Typ) :: vor { Inhalt: ''; Transformation: Translatey (-60px); Zeiger-Events: Keine; } Eingabe: Checked * Eingabe :: vor, Eingabe: Last-of-Type: Checked { Border-Radius: 20px; Hintergrund: Blau; } Eingabe: Überprüft * Eingabe: Überprüft * input :: vor { Border-Top-Links-Radius: Uneinig! Wichtig; Grenze-rechte Radius: Uneinig! Wichtig; } Eingabe: Checked :: vor { Border-Bottom-Links-Radius: Uneinig! Wichtig; Grenz-Bottom-Right-Radius: Uneinig! Wichtig; } /* Zwischen dem zweiten und letzten Kontrollkästchen*// Eingabe: N-ten vom Typ (4): geprüft * Eingabe: geprüft { Border-Top-Links-Radius: Uneinig; Grenze-rechte Radius: Uneinig; }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Wenn Sie zuvor mit der Demo interagiert haben, werden Sie feststellen, dass beim Klicken oder Klicken auf ein Kontrollkästchen nicht nur der eigene Rand, sondern auch die Grenzen der Kontrollkästchen vorne und hinten geändert werden können.</p> <p> Jetzt haben wir keinen Selektor, um das vorherige Element auszuwählen, nur das folgende Element. Daher steuern wir das Erscheinungsbild des vorherigen Kontrollkästchens darin, die Pseudoelement des Kontrollkästchens zu verwenden, um sein vorheriges Kontrollkästchen zu stylen. Bei einem anderen Kontrollkästchen außer dem ersten Kontrollkästchen wird ein Pseudoelement erhältlich, das vor dem Kontrollkästchen an die Oberseite des Kontrollkästchen verschoben wird.</p> <p> Angenommen, die Kontrollkästchen A, B und C sind nacheinander angeordnet. Wenn ich auf B klicke, kann ich das Erscheinungsbild von A ändern, indem ich die Pseudoelement von B festlegen, das Erscheinungsbild von B ändern, indem ich die Pseudoelement von C festlegt und das Erscheinungsbild von C ändere, indem ich die Pseudo-Elemente von D. festlegt.</p> <p> Ausgehend von B sind die Pseudoelemente von B, C und D zugänglich-solange der nächste Element-Selektor zwischen ihnen im Layout verwendet werden kann.</p> <p> Die vier Ecken jedes Kontrollkästchens werden zunächst abgerundet, wenn sie ausgewählt und nicht überprüft werden. Wenn jedoch ein Kontrollkästchen ausgewählt ist, werden die oberen Ecken des nächsten Kontrollkästchens und die unteren Ecken des Kontrollkästchens vorne gerade (indem sie ihre abgerundeten Ecken überschreiben und löschen).</p> <h3> Methode 4: Verwenden Sie die CSS -Maske</h3> <p> Schaltflächen umschalten… Soweit Code betrifft, sind sie auch Kontrollkästchen. So können wir diese Kontrollkästchen als Umschalttasten entwerfen, die mit einer CSS -Maske durchgeführt werden können. Kurz gesagt, dies ist eine Technik, um Bilder zu verwenden, um ihre Hintergrundteile zu filtern.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt;</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">.One.skin { Hintergrund: No-Repeat Center -40px URL ('Foto-1584107662774-8d575e8f3550? W = 350 &amp; q = 100'); } .Two.skin { Hintergrund: No-Repeat Center -110PX URL ('Foto-1531430550463-9658D67C492D? W = 350 &amp; Q = 100'); -Maske: Radialgradient (Kreis bei 45px 45px, RGBA (0,0,0,0) 40px, RGBA (0,0,0,1) 40px); Maskenbild: var (-Maske); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p> Zwei Skins (die Landschaftsfotos zeigen) befinden sich oben im Kontrollkästchen. Der obere erhält eine <code>mask-image die wie ein typischer Toggle-Taste geformt ist-links ist ein transparenter Kreis und der Rest ist vollständig undurchsichtig in der Farbe. Durch den transparenten Kreis können wir das Foto unten sehen, während der Rest des mask-image das Foto oben anzeigt.

Wenn das Kontrollkästchen angeklickt wird, bewegt sich der transparente Kreis nach rechts, sodass wir das Bild oben durch den Kreis sehen können, während der Rest das Foto unten zeigt.

 Eingabe: überprüft ~ .two.skin {
  -Maske: Radialgradient (Kreis bei 305px 45px, RGBA (0,0,0,1) 40px, RGBA (0,0,0,0) 40px);
  Maskenbild: var (-Maske);
}

Methode 5: Verwenden Sie den Box Shadow

Schauen wir uns schließlich die einfachsten an - aber ich denke, es ist auch der effektivste - Ansatz: die Schatten innerhalb der Animation.

 <label for="un">un</label>

 Eingabe {
  Übergang: Box-Shadow .3s;
  Hintergrund: Lightgrey;
  /*Mehr Stile*/
}
Eingabe: überprüft { 
  Box-Shadow: Einschub 0 0 0 20px blau;
}

Einige CSS-Eigenschaften können standardmäßig animiert werden, von denen eines box-shadow ist. Diese subtile Animation ist perfekt für minimalistische Themen.

Das war's! Ich hoffe, das inspiriert Sie das nächste Mal, wenn Sie an einem Kontrollkästchen arbeiten. CSS bietet uns viele Möglichkeiten, Änderungen in den Staaten anzuzeigen. Ich habe Spaß und teilen Sie, wenn Sie interessante Ideen haben.