LX: DIV box reflektion wie bei IMG

Beitrag lesen

Im Falle des Canvas-Elements ist das relativ einfach machbar. Bei einer ganzen div-Box müsstest Du diese mehrfach klonen und jeweils einen relativen 1px hohen Ausschnitt mit Alpha-Transparenz so wählen, dass die Reflektion entsteht:

+------------------+
I                  I
I       DIV        I
I                  I
+------------------+
11111111111111111111
22222222222222222222
33333333333333333333
44444444444444444444

Da dies schon bei 10px hohen Reflektionen den mehr als 10fachen Rendering-Aufwand bedeutet, rate ich Dir davon jedoch ab. Weniger als 10px werden sich kaum lohnen, so dass es generell keine gute Idee ist.

Wenn Du es trotzdem probieren willst, kannst Du es gern ohne JavaScript, dafür mit HTML testen. Schreibe den gleichen Inhalt unter die Box in ein zusätzliches div mit overflow hidden; height: 1px; padding-top: -npx (n für die jeweilige Höhe); opacity: n (von 0.75 bis 0.05).

Gruß, LX

--
RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
RFC 1925, Satz 11a: Siehe Regel 6a