CSS3-Bildreflexion [CSS3-Tipps]
Bisher haben wir viele neue Eigenschaften in besprochen CSS3. Darüber hinaus gibt es noch einige andere Eigenschaften, die derzeit nicht in den offiziellen CSS3-Spezifikationen enthalten sind und die es wert sind, sie auszuprobieren. Eine davon ist die Box reflektieren Eigenschaft, die von initiiert wird Webkit. Diese Eigenschaft kann sich auf die angegebenen Objekte beziehen.
Grundreflexion
Die grundlegende Implementierung ist sehr intuitiv. Sagen wir, wir wollen die Reflexion unter dem realen Objekt. Wir können schreiben:
img -webkit-box-reflect: unten;
Dieses Beispiel zeigt, wie wir ein Bild reflektieren unten (die Position) das Objekt. Aber in diesem Fall können wir die Reflexion auch an die halten Recht, links, und über.
Reflexionsversatz
Versatz wird verwendet, um die Lücke zwischen der Reflexion und dem reflektierten realen Objekt zu definieren. Sehen wir uns den Code-Ausschnitt unten an;
img -webkit-box-reflect: unter 10px;
Im obigen Code haben wir die Reflexion vom realen Objekt durch getrennt 10px;
- Demo anzeigen
Maskierung mit Farbverläufen
Der Reflexionseffekt, den wir normalerweise sehen, ist das Ausblenden am unteren Rand und zeigt nur die Hälfte oder weniger des realen Objekts. Um diesen Effekt zu replizieren, können wir uns bewerben CSS3-Farbverläufe das Objekt zu maskieren;
-Webkit-Box-reflect: unter 0px -webkit-Gradient (linear, links oben, links unten, von (transparent) bis (rgba (250, 250, 250, 0,1)));
Dieser Code führt zur folgenden Präsentation:
Wir können auch verwenden Farbstopp Übergänge kontrollieren und die Reflexion schöner aussehen lassen:
img -webkit-box-reflect: unter 0px -webkit-gradient (linear, links oben, links unten, von (transparent), Farbstopp (70%, transparent)) bis (rgba (250, 250, 250, 0,1 )));
- Demo anzeigen
Alternativen für Firefox
Diese Eigenschaft funktioniert jedoch derzeit nur in Webkit-Browsern (Safari und Chrome). Um den gleichen Effekt in Firefox zu erzielen, benötigen Sie eine andere Route: using -Moz-Element () Funktion. Diese Funktion generiert oder repliziert den Inhalt im Wesentlichen aus bestimmten HTML-Elementen. Schauen wir uns das folgende Beispiel an;
Wir haben ein Bild in einer Und um die Reflexion zu halten, werden wir verwenden Das Leider gibt es immer noch keine einfache Möglichkeit, eine nett Reflexionseffekt in Firefox mit dieser Methode. Der obige Code erzeugt einfach die Reflexion ohne den Fade-Effekt.moz-reflect Ich würde;
:nach dem Pseudoelement, wie folgt; # moz-reflect: after content: ""; Bildschirmsperre; Hintergrund: -moz-element (# moz-reflect) keine Wiederholung; Breite: Auto; Höhe: 375px; Rand unten: 100px; -oz-Transformation: scaleY (-1);
-moz-transform Mit negativer Skala wird das erzeugte Objekt auf den Kopf gestellt. Stellen Sie außerdem sicher, dass Höhe ist genau genug für das reale Objekt Höhe um unnötige zusätzliche Linien zum Positionieren der Reflexion zu vermeiden.Weitere Referenzen
