Auf einer Internetseite an der ich arbeite sollen Bilder mit so schönen Spiegelungen ihrer selbst unter sich. Zuerst hatte ich die Spiegelungen im Photoshop in die Bilder eingearbeitet. Aber dann dachte ich mir dass das doch auch einfacher gehen müsste. Vielleicht findet sich ja etwas CSS das die Reflektion automatisch erzeugt. Gesucht – gefunden. Es gibt eine Möglichkeit. Aber leider nur für Webkit. Alle anderen Browser können so etwas nicht.
Ich persönlich bin der Meinung dass eine Webseite auf eigentlich jedem System funktionieren sollte. Also völlig unabhängig davon welche Funktionen ein Browser unterstützt und welche nicht. Das war auch der Grund warum ich ursprünglich die Spiegelungen direkt in die Bilder eingebaut hatte. Weil ich so keine Plugins und auch kein JavaScript benötigen würde. Doch dann dachte ich mir dass es auch nicht stört wenn ein Benutzer die Bilder ohne Reflektion zu Gesicht bekommen würde. Damit wäre auch ein JavaScript für mich zulässig, wenn dieses nur die Reflektionen herzaubert.
Also nochmals… gesucht – gefunden. Reflections.js tat genau das. Script einbinden und den Bildern eine zusätzliche Klasse zuweisen und alles andere geschieht automatisch.
Nur so hundert Prozent zufrieden war ich nicht. Ich wollte zwischen dem Bild und der Spiegelung ein Pixel Abstand. Für mich sieht das besser aus. So als würde das Bild ganz leicht über der Oberfläche schweben. Also habe ich kurz den Quelltext durchgesehen und den Abstand eingebaut.
Hier die originale Ausgabe durch Refelction.js und daneben meine angepasste Version.
Schon besser wie ich finde. Eine Kleinigkeit war da aber noch. Die spiegelnde Oberfläche auf der das Bild steht reflektiert ja eigentlich nicht nur das Bild. Sie reflektiert doch auch das Licht. Dieses wird dann von unten nochmals auf das Bild gespiegelt und erhellt dieses. Diesen Effekt hätte ich auch noch gerne. Ich dachte ich könnte einfach ein entsprechendes Bild per JavaScript erzeugen und über das ursprüngliche legen. Als ich den Quelltext von Reflection.js dann nochmals etwas genauer durchgegangen bin habe ich schnell bemerkt dass ich es mir wohl viel zu schwer machen will.
- Das Script benutzt für den IE eine eigene Methode und eine zweite Methode für moderne Browser welche Canvas verstehen. Da kam mir die Idee. Im ursprünglichen Skript wird das Image-Element durch ein Div getauscht und dann in eben dieses Div gesteckt. Zusätzlich wird ein Canvas-Objekt erstellt und unter das Bild positioniert. In dieses wird der gespiegelte Teil gezeichnet und per Alphakanal nach unten ausgeblendet. Wieso sollte ich also nicht gleich die ganzen Umstände sein lassen und einfach nur ein Canvas mit allem drinnen machen? Also kein Div, kein Bild mit zusätzlichem Canvas drunter, sondern nur ein Canvas das ich mit dem ursprünglichen Bild tausche. Damit war es dann eigentlich sehr einfach. Bild ins Canvas kopieren. Nochmals gespiegelt drunter kopieren. Leichten aufhellenden Verlauf unten ans Bild. Spiegelung per Alphakanal ausblenden. Fertig ist das neue Bild.
- Bei hellen Bildern bemerkt man eigentlich keinen Unterschied. Aber bei dunklen Bildern merkt man es. Und ich finde es sieht einfach besser aus.
Hier nochmal zum Vergleich jeweils erst ohne Aufheller und dann mit:
Natürlich hat das ganze auch ein paar Fehlerchen.
> Für den IE habe ich keine neue Version gebastelt. Bei dem bleibt es beim Bild ohne Aufhellung.
> Animierte Bilder funktionieren nicht. Die waren aber auch schon vorher nicht perfekt. Denn die Animation wurde nicht in die Spiegelung übertragen. Jetzt ist sie halt ganz verschwunden. Aber ich benutze eh keine animierten Bilder.
Also was solls? Es ist nicht schlechter als vorher, dafür aber viel mehr nach meinem Geschmack.
Weil das ganze mit Sicherheit nicht in allen Fällen so glatt laufen würde und ich keine Lust habe irgendwelchen Support zu leisten für Leute die einfach nur irgendwelche Skripte bei sich drauf schmeissen ohne zu wissen was diese denn genau machen… aus diem Grund gibt es hier auch keinen Code oder gar fertige Skripte. Wer etwas ähnliches realisieren will sollte damit nur eine Idee für die Umsetzung bekommen. Die tatsächliche Programmierung bleibt aber doch jedem selbst überlassen.
Schlagworte: CSS, HTML, JavaScript