Kastenknöpfe

Wir werden zu diesen "boxy buttons" kommen, aber wir werden letztendlich box-shadow verwenden, um sie zu erstellen, also machen wir eine schnelle box-shadow-Reise.

Der grundlegende Anwendungsfall für box-shadow ist, einem Element das Aussehen von Dreidimensionalität zu verleihen, indem ein Schatten darunter angewendet wird, als ob es von der Oberfläche abgehoben wäre.

Die leichten Schatten, die auf diese weißen Kästchen angewendet werden, werden durch

.module {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

Das heißt

1. Erstellen Sie eine exakte Kopie der Form dieses Elements (unter Berücksichtigung des border-radius, z. B.) und platzieren Sie diese unter dem Element
2. Verschieben Sie es horizontal um 0 und vertikal um 1 Pixel (nach unten)
3. Weichen Sie es um 3 Pixel auf. Nach der Weichzeichnung gibt es einen optionalen Parameter namens Spread, der es Ihnen ermöglicht, den Schatten zu vergrößern oder zu verkleinern, der standardmäßig auf 0 gesetzt ist (was weder das eine noch das andere tut).
4. Der Hintergrund davon wird schwarz mit 0,2 Deckkraft sein

Das ist aber sehr *basic*. Komm schon. Wir können noch verrückter werden. Betrachten Sie

1. Sie können mit diesen Verschiebungen extrem werden.
2. Sie müssen den Schatten überhaupt nicht weichzeichnen.
3. Die Farben müssen nicht subtil sein.

Und am wichtigsten ist

4. Sie können mehrere Schatten anwenden

Hier sind drei unterschiedlich verschobene Schatten ohne Weichzeichnung

.module {
  width: 100px;
  height: 100px;
  background: white;
  box-shadow:
    5px 5px 0 #FF9800,
    10px 10px 0 #FFC107,
    15px 15px 0 #607D8B;
}

Wir könnten diese Verschiebungen weiter treiben und die "Schatten" vollständig vom Element trennen

.module {
  width: 50px;
  height: 50px;
  background: white;
  box-shadow:
    55px 55px 0 #FF9800,
    110px 110px 0 #FFC107,
    165px 165px 0 #607D8B;
}

Jetzt, da wir wissen, dass wir die Fähigkeit haben, unbegrenzte Schatten jeder Größe zu haben, die überall platziert werden können ... können wir Pixel-Art zeichnen! Alles mit einem einzigen Element! Hier ist ein Burger, Pommes und Shake von Marcus Connor

Steve Jobs von Codrin Pavel

Oder wie wäre es mit der Mona Lisa, erstellt mit etwa 7.500 Schatten, von Jay Salvat

Auf einer *etwas* praktischeren Ebene können Sie box-shadow *schichten*, um Dreidimensionalität und gerichtete Schatten zu simulieren. Boxy buttons!

Der Trick ist, dass wir Schatten ohne Weichzeichnung verwenden und sie übereinander legen. Wenn wir das 1 Pixel pro Zeile tun und abwechselnd die Seiten wechseln, während wir es tun, gibt uns die Art und Weise, wie die Schatten übereinander gestapelt sind, die Möglichkeit, ein 3D-Box-Aussehen zu kreieren. Hier sind die Grundlagen

.boxy-button {
  --bottom-color: #999;
  --right-color: #ddd;

  box-shadow:
      1px 0   0 var(--right-color),
      1px 1px 0 var(--bottom-color),
      2px 1px 0 var(--right-color),
      2px 2px 0 var(--bottom-color),
      3px 2px 0 var(--right-color),
      3px 3px 0 var(--bottom-color),
      4px 3px 0 var(--right-color),
      4px 4px 0 var(--bottom-color);
}

Wenn wir damit weitermachen, können wir einen sehr "boxy" Button erstellen.

Fügen Sie einige Übergänge hinzu und wir können ihn sogar sehr druckfähig wirken lassen

Wir könnten die Ein-Zeile-auf-einmal-Schatten-Technik auch für den "äußeren" Schatten verwenden, indem wir den Farbverlauf fälschen, indem wir die Deckkraft des Schattens jedes Mal ein wenig reduzieren. Das ergibt eher einen *gerichteten* Schatten-Look, der cool sein kann.

Hier ist ein Beispiel, bei dem die Richtung anders herum geht (dank negativer box-shadow-Verschiebungen) und gerichtete Schatten verwendet werden.

Das ist eine Menge Code für einen lustigen Button, aber sind Buttons es nicht wert? Mit deutlich weniger Code können wir einen weiteren ziemlich lustigen Offset-Look erzielen, diesmal mit etwas inset box-shadow-Tricks und kleinen Pseudoelementen, um den fortlaufenden Rand-Look zu fälschen.