Latest Tweets:
Try -webkit-box-reflect: <direction> <offset> <mask-box-image> in any WebKit-based browser. You can even say <img src=”bubbles.jpg” style=”border:5px solid white;-webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));”> Quoted: “Reflections will update automatically as the source changes. If you hover over links, you’ll see the hover effect happen in the reflection. If you reflect the <video> element, you will see the video playing in the reflection. “Giving an element a reflection has the effect of creating a stacking context (so it joins opacity, masks and transforms). The reflection is non-interactive, so from the point of view of hit testing, it’s like it isn’t there. The reflection will have no effect on layout (other than being part of a container’s overflow), and can be thought of as similar to box-shadow in this respect.” — What to do next? Custom .htc + JavaScript pack to comfy all other players out there, which finds this spec and does some custom implementation, for sure. — Origin: Evadne Wu 2010/02/07
