Erstellen realistischer Überlegungen mit CSS

Im 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-Wort oder PowerPoint erkundet haben: Ich wette, Reflection war Ihr zweithäufigster Stil neben Shadow, der auf andere verzichtet, wie sie umrissen und leuchten. Oder vielleicht erinnern Sie sich, wenn Reflexionen der Wut zurück waren, als Apple sie bei fast allem verwendete.

Reflexionen sind immer noch cool! Und im Gegensatz zu den vergangenen Jahren können wir tatsächlich Reflexionen mit CSS machen! Folgendes werden wir in diesem Artikel machen:

Es gibt zwei Schritte zu einem Reflexionsdesign:

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

Der authentischste und standardisierte Weg, um ein Spiegelbild in CSS zu erhalten, besteht darin, die Eigenschaft Element () zu verwenden. Aber es ist immer noch in seiner experimentellen Phase und wird zum Zeitpunkt des Schreibens dieses Artikels nur in Firefox unterstützt. Wenn Sie neugierig sind, können Sie diesen Artikel ansehen, den ich diese Experimente damit geschrieben habe.

Also, anstatt Element (), werde ich zwei der gleichen Designs hinzufügen und eine als Reflexion in meinen Beispielen verwenden. Sie können diesen Teil mit JavaScript so dynamisch sein oder Pseudoelemente verwenden, aber in meinen Demos verwende ich ein Paar identischer Elemente pro Design.

 <div>
  <div> schmuck </div>
  <div> schmuck </div>
</div>

 .units> * {
  Hintergrundbild: URL ('Image.jpeg');
  Hintergrund-Clip: Text;
  Farbe: transparent;
  /* usw. */
}

Das ursprüngliche Design ist eine Knock-out-Textgrafik, die aus der Kombination eines Hintergrundbildes, einer transparenten Textfarbe und der Hintergrund-Clip-Eigenschaft mit seinem Textwert erstellt wurde.

Das untere Element des Paares wird dann auf den Kopf gestellt und näher an das ursprüngliche Design mit Transformation bewegt. Dies ist die Reflexion:

 .units>: last-Kind {
  Transformation: rotatex (180 °) Translatey (15px); 
}

Das inzwischen umgedrehte untere Element wird einige Stile annehmen, um Verblassen und andere grafische Effekte auf die Reflexion zu erzeugen. Ein allmähliches Verblassen der Reflexion kann mit einem linearen Gradientenbild erreicht werden, das als Maskenschicht auf dem umgedrehten Element verwendet wird.

 .units>: last-Kind {
  Transformation: rotatex (180 °) Translatey (15px); 
  Maskenbild: linearer Gradient (transparent 50%, weiß 90%);
}

Standardmäßig ist der Maskenmodus der Maskenbild-Eigenschaft Alpha. Das bedeutet, dass die transparenten Teile eines Bildes, wenn das Bild als Maskenebene für ein Element verwendet wird, auch ihre entsprechenden Bereiche des Elements transparent drehen. Deshalb verblasst ein linearer Gradient mit transparenter Abstufung an der Spitze die verkehrte Reflexion am Ende.

Wir können auch andere Gradientenstile probieren, mit oder ohne sie zu kombinieren. Nehmen Sie zum Beispiel diesen mit Streifen. Ich habe das Muster zusammen mit dem Fade -Effekt von früher hinzugefügt.

 .units>: last-Kind {
  / * ... */
  Maskenbild: 
    Wiederholungs-Linie-Gradient (transparent, transparent 3px, weiß 3px, weißer 4px),
    linearer Gradient (transparent 50%, weiß 90%);
}

Oder dieser mit radialgradient:

 .units>: last-Kind {
  / * ... */
  Maskenbild: Radialgradient (Kreis in der Mitte, weiß, transparent 50%);
}

Eine andere Idee ist es, das Spiegelbild zu morphieren, indem Sie der Eigenschaft Transformation SCEW () hinzufügen. Dies gibt der Reflexion eine gewisse Bewegung.

 .units>: last-Kind {
  / * ... */
  Transformation: rotatex (180 °) translatey (15px) schräg (135 °) translatex (30px);
}

Wenn Sie die Reflexion benötigen, um subtil und eher wie ein Schatten zu sein, können Sie ihn ausschöpfen, sie aufhellen oder seine Deckkraft verringern, kann den Trick machen.

 .units>: last-Kind {
  / * ... */
  Filter: Blur (4px) Helligkeit (1,5);
}

Manchmal kann auch eine Reflexion selbst schattig sein. Anstatt das Hintergrundbild (aus dem ursprünglichen Design) oder eine Blockfarbe für den Text zu verwenden, habe ich versucht, der Reflexion eine Reihe von durchscheinenden Schatten aus roten, blauen und grünen Farben zu geben, die gut mit dem ursprünglichen Design passen.

 .units>: last-Kind {
  / * ... */
  Textschatten: 
    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 diese RGB () -Werte komisch aus? Das ist eine neue Syntax, die Teil einiger neuer CSS -Farbfunktionen ist.

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

Einpacken

Der Schlüssel zu einer guten Reflexion liegt darin, mit Effekten zu passen, die subtiler sind als das Hauptziel, aber nicht so subtil, dass es schwierig ist, es zu bemerken. Dann gibt es andere Überlegungen, einschließlich der Farbe, Richtung und Form des Reflexion.

Ich hoffe du hast ein paar Inspirationen davon! Sicher, wir haben uns nur einen Text angesehen, aber Reflexionen können gut für jedes auffällige Element in einem Design funktionieren, das einen vernünftigen Raum um ihn herum hat und von einer Reflexion profitieren kann, um sich auf der Seite zu erheben.

Das obige ist der detaillierte Inhalt vonErstellen realistischer Überlegungen mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!