Spaß bei der Gestaltung von Checkbox-Zuständen

Wir lassen ein Texteingabefeld vielleicht ungestylt. Wir lassen einen Link vielleicht ungestylt. Sogar einen Button. Aber Kontrollkästchen ... wir lassen sie nicht in Ruhe. Deshalb wird das Stylen von Kontrollkästchen niemals langweilig.

Obwohl das Designen von Checkboxen nicht besonders kompliziert ist, müssen wir uns nicht mit einfachen Farbänderungen des Hintergrunds oder dem Hinzufügen und Entfernen von Rändern zufriedengeben, um Zustandsänderungen anzuzeigen. Wir müssen auch keine ausgefallenen Designfähigkeiten einsetzen – die wir nicht besitzen –, damit das funktioniert. Ich zeige Ihnen, wie.

Grundlagen

In den folgenden Demos haben die Checkboxen praktisch das gleiche Drei-Schichten-Layout – unten befindet sich eine Checkbox und darauf zwei gestapelte Elemente oder Pseudo-Elemente. Die Checkbox wird als ausgewählt oder nicht ausgewählt angezeigt, je nachdem, welches der beiden sichtbar ist.

Wenn Sie sich den CSS-Code in den Pens ansehen, werden Sie feststellen, dass alle Layouts – einschließlich des für die Checkboxen – Grids sind. Sie können auch andere Layouts verwenden, die für Ihren Anwendungsfall passen (und mehr dazu im CSS-Tricks Grid Guide lernen). Zusätzliche Hinweise zu Code- und Designalternativen finden Sie am Ende des Quellcodes in den Pens.

Zusätzlich haben alle Elemente, die auf der Checkbox gestapelt sind, pointer-events: none, damit sie das Klicken oder Tippen auf die Checkbox nicht verhindern.

Kommen wir nun zur ersten Methode.

Idee 1: Gemischte Hintergründe als Zustand

Blending in CSS ist eine vielseitige Technik. Das Manipulieren von Farben relativ zu zwei oder mehr Elementen oder Hintergründen kann in Kontexten nützlich sein, an die Sie vielleicht nicht gedacht haben.

Ein solcher Fall ist die Checkbox.

<input id="un" type="checkbox"> <label for="un">un</label>
<!-- more checkboxes --> 

input[type=checkbox]::before,
input[type=checkbox]::after {
  mix-blend-mode: hard-light;
  pointer-events: none;
  /* more style */
}
input[type=checkbox]::before {
  background: green;
  content: '✓';
  color: white;
  /* more style */
}
input[type=checkbox]::after {
  background: blue;
  content: '⨯';
  /* more style */
}
input[type=checkbox]:checked::after {
  mix-blend-mode: unset;
  color: transparent;
}

In dieser Demo habe ich die Pseudo-Elemente der Checkbox grün und blau gestaltet, sie gestapelt und ihnen jeweils einen mix-blend-mode-Wert gegeben. Das bedeutet, dass sich der Hintergrund jedes Elements mit seinem Hintergrund vermischt.

Ich habe den Wert hard-light verwendet, der das Ergebnis von entweder multiply oder screen emuliert, je nachdem, ob die obere Farbe dunkler oder heller ist. Sie können mehr über verschiedene Mischmodi bei MDN erfahren.

Wenn die Box ausgewählt ist, wird der mix-blend-mode-Wert des ::after-Pseudo-Elements aufgehoben, was zu einer anderen Optik führt.

Idee 2: Eine 3D-Animation erstellen

Das Animieren eines Farbblocks macht Spaß. Wenn man sie dreidimensional erscheinen lässt, ist es noch besser. CSS bietet die Mittel, um Elemente in einem emulierten 3D-Raum darzustellen. So erstellen wir mit diesen Mitteln eine 3D-Box und rotieren sie, um die Zustandsänderung der Checkbox anzuzeigen.

<div class="c-checkbox">
  <input type="checkbox" id="un">
  <!-- cube design -->
  <div><i></i><i></i><i></i><i></i></div>
</div>
<label for="un">un</label>
<!-- more checkboxes -->

.c-checkbox > div {
  transition: transform .6s cubic-bezier(.8, .5, .2, 1.4);
  transform-style: preserve-3d;
  pointer-events: none;
  /* more style */
}
/* front face */
.c-checkbox > div > i:first-child {
  background: #ddd;
  transform:  translateZ( -10px );
}
/* back face */
.c-checkbox > div > i:last-child {
  background: blue;
  transform:  translateZ( 10px );
}
/* side faces */
.c-checkbox > div > i:nth-of-type(2),
.c-checkbox > div > i:nth-of-type(3) {
  transform: rotateX(90deg)rotateY(90deg);
  position: relative;
  height: 20px;
  top: 10px;
}
.c-checkbox > div > i:nth-of-type(2) {
  background: navy;
  right: 20px;
}
.c-checkbox > div > i:nth-of-type(3) {
  background: darkslategray;
  left: 20px;
}

Das <div> nach der Checkbox wird zum Container eines 3D-Raums – seine Kindelemente können entlang der x-, y- und z-Achse platziert werden –, nachdem ihm transform-style: preserve-3d; zugewiesen wurde.

Mit der transform-Eigenschaft platzieren wir zwei <i>-Elemente (grau und blau gefärbt) mit etwas Abstand zueinander entlang der z-Achse. Zwei weitere werden dazwischen eingeklemmt und bedecken ihre linken und rechten Seiten. Es ist wie eine Pappschachtel, die bis auf oben und unten geschlossen ist.

Wenn die Checkbox ausgewählt ist, wird diese graue und blaue Box seitlich gedreht, um die andere Seite zu zeigen. Da ich dem <div> bereits eine transition hinzugefügt habe, wird seine Drehung animiert.

input:checked + div { 
  transform: rotateY( 180deg ); 
}

Idee 3: Mit Border-Radius spielen

Den border-radius einer ausgewählten Box ändern? Nicht so toll. Auch den border-radius anderer nahegelegener Boxen ändern? Jetzt haben wir etwas.

<input type="checkbox" id="un"> <label for="un">un</label>
<!-- more rows of checkboxes -->

input {
  background: #ddd;
  border-radius: 20px;
  /* more style */
}
input:not(:first-of-type)::before {
  content: '';    
  transform: translateY(-60px); /* move up a row */
  pointer-events: none;
}
input:checked + * + input::before,
input:last-of-type:checked {
  border-radius: 20px;
  background: blue;
}
input:checked + * + input:checked + * + input::before {
  border-top-left-radius: unset !important;
  border-top-right-radius: unset !important;
}
input:checked::before {
  border-bottom-left-radius: unset !important;
  border-bottom-right-radius: unset !important;
}
/* between the second-last and last boxes */ 
input:nth-of-type(4):checked + * + input:checked {
  border-top-left-radius: unset;
  border-top-right-radius: unset;
}

Wenn Sie gerade mit der Demo interagiert haben, werden Sie feststellen, dass eine Checkbox beim Anklicken oder Antippen nicht nur ihre eigenen Ränder, sondern auch die Ränder der Boxen davor *und* danach ändern kann.

Nun haben wir keine Selektoren, die Elemente davor auswählen können, sondern nur die danach. Um das Aussehen einer vorhergehenden Box zu steuern, haben wir das Pseudo-Element einer Checkbox verwendet, um die Box davor zu gestalten. Mit Ausnahme der ersten Box erhält jede andere Box ein Pseudo-Element, das oben auf der vorherigen Box platziert wird.

Nehmen wir an, die Boxen A, B und C stehen nacheinander. Wenn ich B anklicke, kann ich das Aussehen von A ändern, indem ich das Pseudo-Element von B gestalte, B indem ich das Pseudo-Element von C gestalte und C indem ich das Pseudo-Element von D gestalte.

Von B aus sind die Pseudo-Elemente von B, C und D zugänglich – solange der Nachfolger-Selektor zwischen ihnen im Layout verwendet werden kann.

Die vier Ecken jeder Checkbox sind zunächst abgerundet, sowohl ausgewählt als auch nicht ausgewählt. Wenn jedoch eine Box ausgewählt ist, werden die oberen Ecken der folgenden Box und die unteren Ecken der vorherigen Box geglättet (indem ihre border-radius überschrieben und entfernt werden).

Idee 4: Eine CSS-Maske verwenden

Toggles, Schalter… sie sind im Code ebenfalls Checkboxen. Wir können die Boxen für diese hier als Toggles gestalten, und das geschieht mit einer CSS-Maske, über die Chris bereits geschrieben hat. Aber kurz gesagt: Es ist eine Technik, bei der wir ein Bild verwenden, um Teile seines Hintergrunds auszublenden.

<input type="checkbox">
<div class="skin one"></div>
<div class="skin two"></div>

.one.skin {
  background: no-repeat center -40px url('photo-1584107662774-8d575e8f3550?w=350&q=100');
}
.two.skin {
  background: no-repeat center -110px url('photo-1531430550463-9658d67c492d?w=350&q=100');
  --mask: radial-gradient(circle at 45px 45px , rgba(0,0,0,0) 40px, rgba(0,0,0,1) 40px);
  mask-image: var(--mask); -webkit-mask-image: var(--mask);
}

Zwei Skins (die Landschaftsfotos anzeigen) liegen über einer Checkbox. Der oberste erhält ein mask-image in Form eines typischen Toggle-Schalters – ein transparenter Kreis links und der Rest eine voll deckende Farbe. Durch den transparenten Kreis sehen wir das darunterliegende Foto, während der Rest des Maskenbildes das obere Foto zeigt.

Wenn eine Checkbox angeklickt wird, wird der transparente Kreis nach rechts verschoben, sodass wir das obere Bild durch den Kreis sehen, während der Rest das untere Foto zeigt.

input:checked ~ .two.skin {
  --mask: radial-gradient(circle at 305px 45px, rgba(0,0,0,1) 40px, rgba(0,0,0,0) 40px);
  mask-image: var(--mask); -webkit-mask-image: var(--mask);
}

Idee 5: box-shadow verwenden

Zum Schluss die einfachste – aber meiner Meinung nach effektivste – Methode von allen: ein animierter innerer box-shadow.

<input id="un" type="checkbox"> <label for="un">un</label>

input {
  transition: box-shadow .3s;
  background: lightgrey;
  /* more style */
}
input:checked { 
  box-shadow: inset 0 0 0 20px blue;
}

Es gibt einige CSS-Eigenschaften, die standardmäßig animiert werden können, und eine davon ist box-shadow. Diese Art von subtiler Animation passt gut zu einem minimalistischen Thema.

---

Das war's! Ich hoffe, das inspiriert Sie für das nächste Mal, wenn Sie mit Checkboxen arbeiten. CSS bietet uns so viele Möglichkeiten, Zustandsänderungen anzuzeigen, also haben Sie etwas Spaß und teilen Sie uns mit, wenn Sie interessante Ideen haben.