DIV box reflektion wie bei IMG

[Nico]

Hi,
ich suche eine Möglichkeit, eine div Box, in der ein Text in Arial steht, mit einer reflektion am unterem rand auszustatten, also in etwa wie hier, nur mit einer DIV box und nicht mit einem Bild.

LG Nico

[Novi]

Hallo,

du könntest es genauso machen. Mit einem Script alle Texte auslesen und in ein Canvas-Element schreiben.

Viele Grüße Novi

[LX]

Dazu müsste man innerhalb von canvas ein HTML-Rendering nachbauen... möglicherweise sogar performanter als mein Vorschlag, aber durchaus aufwendiger.

Wenn Du dennoch den Entschluss fassen solltest, das umzusetzen, wäre ich sehr daran interessiert, den Code vom HTML/CSS-Renderer im Canvas-Element zu sehen.

Gruß, LX

[LX]

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

[Nico]

Ich dachte man könnte die vielleicht zu einem Bild zusammen speichern und dieses bild dann spiegeln. Mit PHP oder so und dann mit javascript reflektieren.

[LX]

Aber sicher doch. Wenn Du die nicht triviale Aufgabe bewältigen kannst, HTML/CSS in PHP zu rendern, ist das ganz einfach.

Mein Vorschlag wäre: erstelle doch manuell eine solche Spiegelung mit so verschwommenen Inhalten, dass es zu jeder Box passt.

Gruß, LX