I mean where the object appears to be reflecting something offscreen in front of it.
This needs an image of something to show blended. I'll try to animate a mockup. On Sun, Jun 23, 2013 at 11:37 PM, Isabel Santos <[email protected]> wrote: > Hi Wesley, > > I'm not sure what you want, it really depends on the kind of reflection, > and the movement of the elements, but if you want a simple reflection > simulation (like reflecting 2d images, not 3d, on an horizontal plane, for > instance) you have the negative scale transform to invert the image (or for > some browsers the reflect), opacity variation or even masks. > Of course the reflection needs to follow the elements transforms, and be > aware that it may turn the animations jumpy on some browsers or platforms > due to css rendering times. > You can check this example: > > http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/ > > If you use svg you also have svg filters to simulate reflections without > repeating the code. > (With svg it may be safer to use js then css inside the svg) > > And also, there are some awesome javascript libraries like raphael ( > http://raphaeljs.com/) that integrate html5, css and js that can help you > do just about anything you think of... > > hope it helps, > isabel > > > > On Sun, Jun 23, 2013 at 8:59 PM, Wesley Acheson > <[email protected]>wrote: > >> Hi I have a page with elements moving via css transitions. >> >> I would like to have a reflection map effect where by as the elements >> move they are either overlaid with an element that has a partially >> transparent image as a background. Or alternatively the elements are >> partially transparent themselves and they clip a background image on an >> ancestor element. This would give the illusion that they are reflective. >> >> What's not possible though is to manipulate the reflection via JS as the >> movement is in css and thus I don't know the exact position. >> >> Is this possible in css 3? I don't mind using proprietary extensions. >> >> Even a background image that was fixed to the page would work. >> >> Wes >> ______________________________________________________________________ >> css-discuss [[email protected]] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > > ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
