Die Box-reflect-Eigenschaft ist nur einer von vielen tollen neuen CSS3-Effekten, die Webkit in die Tabelle einfügt. Leider ist es nicht die einfachste Anwendung. Es gibt eine Menge Syntax, die verwirrend sein kann. Heute werden wir sie gründlich durchgehen und detailliert erklären, damit Sie den Dreh raus bekommen.
Beachten Sie, dass Box-reflect an dieser Stelle nur von Webkit-Browsern unterstützt wird. Dies ist ein überflüssiger visueller Effekt. Sie können ihn also verwenden, solange Sie akzeptieren, dass er nur in Chrome und Safari gerendert wird.
Grundlegende Syntax: Die Richtung ist alles was Sie brauchen
Trotz der Tatsache, dass es in der Praxis so komplex ist, -webkit-box-reflect beginnt extrem einfach zu bedienen. Um einem Element eine Reflektion hinzuzufügen, müssen Sie nur die Eigenschaft deklarieren und die Eigenschaft festlegen Richtung Wert.
Im obigen Beispiel habe ich die Richtung Wert zu unten. Dies ist der einzige Wert, den Sie zu 98% oder mehr benötigen. Nur für den Fall, dass Sie wirklich kreativ werden, können Sie eine Reflexion in vier verschiedene Richtungen angeben:
Für welche Richtung Sie sich entscheiden, der Browser wählt diesen als Ankerpunkt und kippt das Bild. Wenn Sie beispielsweise unser ursprüngliches Beispiel in einen Wert von geändert haben RechtSie würden folgendes bekommen.
Versatz
Nach dem Richtung Wert können Sie optional einen Versatz Wert. Dies ist ziemlich einfach und setzt einfach Abstand zwischen dem Bild und seiner Reflexion, fast so, als würde das Bild über einer Glasoberfläche schweben. So funktioniert das:
Hier ist eine Vorschau auf den Unterschied zwischen einem Wert von? 0? und einen Wert von? 20px ?.
Interessanterweise sind Sie nicht auf Pixel als Messung beschränkt. Hier einige andere Werte, die ebenfalls funktionieren:
Webkit-Farbverläufe
Warum sprechen wir über Webkit-Farbverläufe? Ist dies nicht ein Artikel über Reflexionen? Die Antwort ist, dass der dritte Wert, Maskenfeld-Bild, verwendet verschiedene komplizierte Werkzeuge, um einige fortgeschrittene Effekte zu erzielen, das primäre Wesen -Webkit-Gradient. Sie können einfach nicht verstehen, wie CSS-Reflexionen funktionieren, ohne zuvor Gradienten zu verstehen.
Es gibt verschiedene Arten von Farbverläufen und Browser unterscheiden sich in ihrer Syntax. Für die Zwecke dieses Artikels bleiben wir jedoch bei den linearen Webkit-Farbverläufen. Lassen Sie uns gleich hineingehen und den Code für einen grundlegenden Webkit-Verlauf betrachten.
Dieser Code führt zu dem folgenden Farbverlauf:
Dieser Code kann verwirrend sein, also brechen wir ihn auf. Es gibt drei Hauptteile: Typ, Start- / Haltepunkt und von / bis Farbe. Es gibt verschiedene Typen, aber wir müssen nur in lineare Gradienten geraten, so dass dieser Wert gleich bleibt.
Mit den Start- und Haltepunkten können Sie den Verlauf in die von Ihnen verwendete Richtung neigen. Im obigen Beispiel haben wir in der Mitte oben begonnen und in der Mitte unten beendet, was zu einer perfekten vertikalen Farbabstufung führt. Wenn wir jedoch damit anfangen zu spielen, können wir unterschiedliche Ergebnisse erzielen.
Diesmal fingen wir oben links an und endeten rechts unten, was zu einem schrägen Verlauf wie dem unten gezeigten führt.
Ebenso die von und zu Mit diesen Werten können Sie die Farbe am Anfang und am Ende des Farbverlaufs einstellen. In den obigen Beispielen sind wir von Schwarz zu Weiß gegangen. Sie können jedoch beliebige Farben in einem beliebigen CSS-Farbformat verwenden.
Hier ist ein weiteres Beispiel, das einen schönen roten Verlauf erzeugt.
Farbstopps
Zusätzlich zu den Start- und Haltepunkten können Sie auf dem Weg verschiedene Farbstopps festlegen. Im Grunde sagen Sie dem Browser an Punkt x, dass der Farbverlauf dieser Farbe entspricht.
Hier ist ein Beispiel für einen Verlauf, der von Schwarz nach Schwarz geht und normalerweise zu einer Volltonfarbe führt. Wir haben jedoch einen Farbstopp bei 50% eingenommen und auf Weiß gesetzt, was zu einem Verlauf führt, der bei Schwarz beginnt, auf halbem Weg zu Weiß übergeht und dann wieder zurück zu Schwarz wird.
Die Reflexion maskieren
Nun, da wir wissen, wie Farbverläufe funktionieren, haben wir den dritten Teil unseres Reflexionspuzzle für Webkit. Nach der Erklärung der Richtung und Versatz Werte, Ihr Spiegelbild ist immer noch ziemlich langweilig, aber durch die Verwendung einer Verlaufsmaske haben wir plötzlich viel mehr Kontrolle.
Lassen Sie uns die Farbverlaufssyntax hinzufügen und sehen, was uns einfällt:
Wie Sie sehen, sind wir hier von oben nach unten gegangen und haben einen Kurvenball hineingeworfen von Farbe als transparent. Da wir im Wesentlichen eine Maske erstellen, lässt die transparente Farbe den Farbverlauf über jedem Hintergrund ausblenden. Ebenso repräsentiert das Weiß des Farbverlaufs einfach die volle Deckkraft für die Reflexion an diesem Punkt.
Dieser Code ergibt das folgende Bild:
Wie Sie sehen, ermöglicht das Ausblenden der Reflexion mit Farbverlauf eine bestimmte dynamische Ebene, die einen Hinweis auf mehr Realismus gibt, den wir zuvor erreicht haben. Eines der verwirrendsten Dinge hier ist das, obwohl wir es erklärt haben transparent Am oberen Rand des Verlaufs und am unteren Rand undurchsichtig, was wir wirklich bekommen, ist das genaue Gegenteil! Dies liegt daran, dass unser Spiegelbild eine verkehrte Version des Bildes ist, sodass alles gespiegelt wird.
Wenn Sie dadurch verwirrt werden, müssen Sie lediglich alle Gradientenwerte umdrehen. Der folgende Code führt zu demselben Verlauf und ist für manche verständlicher, da er bei Weiß beginnt und bei Transparent endet, genau wie das Ergebnis oben.
Die Reflexion verkürzen
An diesem Punkt haben Sie vielleicht bemerkt, dass unser Nachdenken ziemlich lang ist. In Fällen, in denen Sie mit einem großen Bild wie uns arbeiten, möchten Sie den Farbverlauf wahrscheinlich etwas verkürzen, so dass er früher transparent wird.
Also, wie funktioniert diese Arbeit, fragen Sie? Hier kommen diese Farbstopps ins Spiel. Wir möchten einen Farbverlauf von transparent bis weiß erstellen und dann irgendwo auf dem Weg einen transparenten Farbstop einfügen, der die Reflexion früher ausblendet. Schauen wir uns den Code an.
Die Deckkraft der Reflexion verringern
Jede Diskussion, die ich je für Box-Reflect gesehen habe, hört dort auf. Leider denke ich, dass unser Gradient immer noch nicht sehr glaubwürdig ist. Immer, wenn ich in Photoshop Reflexionen erstelle, reduziere ich immer die Deckkraft der Reflexionsschicht. Selten würden Sie eine echte Reflexion sehen, die so stark ist wie das Objekt, das sie reflektiert!
An diesem Punkt sieht unser Nachdenken dumm aus und wir brauchen einen Weg, um seine Deckkraft zu reduzieren. Die offensichtliche Lösung, die ich zuerst dachte, um zu versuchen, erwies sich als die richtige Lösung: rgba. Da die Farben, die wir im Verlauf definieren, nur die Transparenz des Verlaufs bestimmen, können Sie mit der Verwendung von rgba anstelle von reinem Weiß die Deckkraft verringern und ein glaubwürdigeres Ergebnis erzielen.
Im folgenden Code habe ich einfach das Wort "Weiß" ausgetauscht. für sein rgba-Äquivalent bei 20% (0,2).
Hier sind zwei verschiedene Ergebnisse mit nur dem Alpha Wert der Eigenschaft rgba, die bearbeitet wird. Wie Sie sehen, ist das Ergebnis viel besser als wir es mit solidem Weiß erhalten würden!
Verwenden einer Bildmaske
Hier ist ein kleiner Trick, den ich von Peter Gasston in The Book of CSS3 gelernt habe. Anstatt Ihre Maske mit CSS-Farbverläufen zu erstellen, können Sie eigentlich nur ein Bild verwenden. Mit dieser Methode können Sie ziemlich verrückte Ergebnisse erzielen.
Alles, was Sie tun, ist, eine Quell-URL zu deklarieren, als ob Sie ein Hintergrundbild für ein Element festlegen würden. Obwohl der Nachteil besteht, dass ein Bild geladen werden muss, ist der Code tatsächlich viel sauberer.
Um dies zu testen, habe ich zwei separate PNG-Dateien mit transparentem Hintergrund erstellt und gespeichert. Einer enthält nur durchgehend schwarz, während der andere einen radialen Verlauf verwendet.
Wenn wir das obige Snippet verwenden, um diese Bilder auf unser Spiegelbild anzuwenden, erhalten wir Folgendes:
Ich kann für mein Leben nicht an eine praktische Verwendung dieser Technik denken, aber wenn Sie sich einen kreativen Gedanken machen, sind die Möglichkeiten endlos.
Auswirkungen auf das Layout
Wenn Sie verwenden -webkit-box-reflectEs ist wichtig zu verstehen, wie die Reflexion mit Ihrem Layout interagiert. Interessanterweise nicht!
Die Reflexion ist eher ein Hintergrundbild als ein Element, das den Fluss des Dokuments beeinflusst. Um zu sehen, wie das funktioniert, hier zwei Beispiele, das erste mit einer Reflexion und das zweite ohne.
Beachten Sie als ungewöhnlichen und unerwarteten Nebeneffekt, dass, obwohl die Spiegelung auf der linken Seite das Seitenlayout nicht verändert, die Farbe des Texts irgendwie durcheinander gerät.
Kombination mit anderen CSS-Effekten
Ein letzter Hinweis zu Reflexionen: Sie können sie mit anderen reinen CSS-Effekten kombinieren, um großartige Ergebnisse zu erzielen. Hier ist ein Beispiel für ein Bild mit abgerundeten Ecken und ein anderes mit einem Rahmen. Beide Effekte werden in der Reflexion perfekt dargestellt.
Dies ist jedoch nicht der Fall alles CSS-Effekte werden in der Reflexion wiedergegeben. Zum Beispiel, was passiert, wenn Sie eine Box Schatten. Beachten Sie, wie es nur auf dem Originalbild und nicht in der Spiegelung erscheint.
Fazit
Zusammenfassend ist alles, was Sie wirklich brauchen, um eine funktionierende Reflexion zu erstellen, eine Richtung Wert. Jedoch durch die Verwendung Richtung, Versatz und ein Gradient Zusammen können Sie bessere Ergebnisse erzielen und die Steigung effektiv ausblenden.
Der Effekt wird erheblich verbessert, wenn Sie rgba verwenden, um die Gesamtopazität der Reflexion zu reduzieren. Sie können dann Ränder, abgerundete Ecken und verschiedene andere Effekte anwenden. Diese werden automatisch auf die Reflexion angewendet.
Wenn Sie wirklich verrückt werden möchten, können Sie ein Abbild verwenden, um die Reflexion zu maskieren. Das Bild wird nur zum Anwenden von Transparenz verwendet. Wenn also eine durchgehende Farbe vorhanden ist, Ihre Spiegelung undurchsichtig ist und wo Transparenz ist, ist Ihre Spiegelung transparent.