In Design sind Reflexionen stilisierte Spiegelbilder von Objekten. Auch wenn sie nicht so beliebt sind wie Schatten, haben sie ihre Momente – denken Sie nur an das erste Mal, als Sie die verschiedenen Schriftformate in MS Word oder PowerPoint erkundet haben: Ich wette, Reflexion war Ihr zweitbeliebtester Stil, nach Schatten, und Sie haben andere wie Umriss und Glühen beiseite gelassen. Oder vielleicht erinnern Sie sich, als Reflexionen der letzte Schrei waren, als Apple sie für fast alles verwendete.

Reflexionen sind immer noch cool! Und im Gegensatz zu früheren Zeiten können wir Reflexionen tatsächlich mit CSS erstellen! Hier ist, was wir in diesem Artikel erstellen werden

Für ein Reflexionsdesign gibt es zwei Schritte

1. Erstellen Sie eine Kopie des ursprünglichen Designs.
2. Gestalten Sie diese Kopie.

Der authentischste und standardisierteste Weg, um derzeit ein Spiegelbild in CSS zu erhalten, wäre die Verwendung der element()-Eigenschaft. Sie befindet sich jedoch noch in der experimentellen Phase und wird zum Zeitpunkt der Erstellung dieses Artikels nur in Firefox unterstützt. Wenn Sie neugierig sind, können Sie diesen Artikel lesen, den ich geschrieben habe, der damit experimentiert.

Anstatt also element() zu verwenden, werde ich zwei identische Designs hinzufügen und eines als Reflexion in meinen Beispielen verwenden. Sie können diesen Teil mit JavaScript dynamisch gestalten oder Pseudo-Elemente verwenden, aber in meinen Demos verwende ich pro Design ein Paar identischer Elemente.

<div class="units">
  <div>trinket</div>
  <div>trinket</div>
</div>

.units > * {
  background-image: url('image.jpeg');
  background-clip: text;
  color: transparent;
  /* etc. */
}

Das ursprüngliche Design ist eine herausragende Textgrafik, die aus der Kombination eines Hintergrundbildes, einer transparenten Textfarbe und der background-clip-Eigenschaft mit dem Wert text erstellt wird.

Das untere Element des Paares wird dann umgedreht und mithilfe von transform näher an das ursprüngliche Design verschoben. Das ist die Reflexion

.units > :last-child {
  transform: rotatex(180deg) translatey(15px); 
}

Das nun aufrecht stehende untere Element erhält einige Stile, um Fades und andere grafische Effekte auf der Reflexion zu erzeugen. Ein graduelles Ausblenden der Reflexion kann mit einem linearen Farbverlaufsbild erreicht werden, das als Maskierungsebene für das aufrecht stehende Element verwendet wird.

.units > :last-child {
  transform: rotatex(180deg) translatey(15px); 
  mask-image: linear-gradient(transparent 50%, white 90%);
}

Standardmäßig ist der mask-mode der mask-image-Eigenschaft alpha. Das bedeutet, dass die transparenten Teile eines Bildes, wenn das Bild als Maskierungsebene für ein Element verwendet wird, auch die entsprechenden Bereiche des Elements transparent machen. Deshalb blendet ein linear-gradient mit einem transparenten Verlauf oben die umgedrehte Reflexion am Ende aus.

Wir können auch andere Gradientenstile ausprobieren, mit oder ohne Kombination. Nehmen wir zum Beispiel dieses mit Streifen. Ich habe das Muster zusammen mit dem zuvor gezeigten Fade-Effekt hinzugefügt.

.units > :last-child {
  /* ... */
  mask-image: 
    repeating-linear-gradient(transparent, transparent 3px, white 3px, white 4px),
    linear-gradient( transparent 50%, white 90%);
}

Oder dieses mit radial-gradient

.units > :last-child {
  /* ... */
  mask-image: radial-gradient(circle at center, white, transparent 50%);
}

Eine weitere Idee ist, das Spiegelbild zu verzerren, indem skew() zur transform-Eigenschaft hinzugefügt wird. Dies verleiht der Reflexion eine gewisse Bewegung.

.units > :last-child {
  /* ... */
  transform: rotatex(180deg) translatey(15px) skew(135deg) translatex(30px);
}

Wenn Sie möchten, dass die Reflexion dezent und eher wie ein Schatten ist, dann kann das Ausblenden, Aufhellen oder Reduzieren der Deckkraft den Trick tun.

.units > :last-child {
  /* ... */
  filter: blur(4px) brightness(1.5);
}

Manchmal kann eine Reflexion auch selbst schattig sein. Anstatt also das Hintergrundbild (des ursprünglichen Designs) oder eine Volltonfarbe für den Text zu verwenden, habe ich versucht, der Reflexion eine Reihe von transluzenten Schatten in Rot-, Blau- und Grüntönen zu geben, die gut zum ursprünglichen Design passen.

.units > :last-child {
  /* ... */
  text-shadow: 
    0 0 8px rgb(255 0 0 / .4),
    -2px -2px 6px rgb(0 255 0 / .4),
    2px 2px 4px rgb(0 255 255 / .4);
}

Sehen die rgb()-Werte seltsam aus? Das ist eine neue Syntax, die Teil einiger aufregender neuer CSS-Farbfeatures ist.

Bringen wir all diese Ansätze in einer großen Demo zusammen

Zusammenfassung

Der Schlüssel zu einer guten Reflexion ist, subtilere Effekte als das Hauptobjekt zu wählen, aber nicht so subtil, dass sie schwer zu erkennen sind. Dann gibt es noch andere Überlegungen, einschließlich der Farbe, Richtung und Form der Reflexion.

Ich hoffe, Sie haben hier einige Inspirationen gefunden! Sicher, alles, was wir hier betrachtet haben, war Text, aber Reflexionen können auch gut für jedes auffällige Element in einem Design funktionieren, das genügend Platz darum hat und von einer Reflexion profitieren kann, um sich auf der Seite hervorzuheben.