Tag Archives: animation

Website effects Emboss, Engrave, MotionBlur, Wave, Opacity, Grey Scale and transforms – Mirror, Rotation, Invert

Note that the following effects works only in Internet Explorer. Also, websites that has floating elements and may be related to hasLayout read more here and here.

Internet Explorer have lesser known feature “Filters and Transitions“.
With Microsoft Internet Explorer 4.0 and above, you can apply various multimedia-style visual effects and animation to your Web page. You can implement these effects in Web pages using Cascading Style Sheets (CSS) properties. By combining filters and transitions with basic scripting, you have a powerful tool for creating visually engaging and interactive documents.
msdn.microsoft.com

Effects:
Demo Emboss | Demo Engrave | Demo MotionBlur | Demo Wave | Demo Gray Scale | Demo XRay | Demo Opacity

Transformations:
Demo Mirror | Demo Rotation 90 | Demo Rotation 180 | Demo Invert

Reset

Actually, you can copy / paste the following JavaScript code in any site, and get effects applied (one line at the time).

Source code for Effects:
javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.Emboss(enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.Engrave(enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.MotionBlur(strength=5,direction=45,enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.Wave(freq=7, lightStrength=77,phase=777,strength=8,enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(grayScale=1,enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(XRay=1,enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(opacity=0.2,enabled=true)"; void 0

Source code for transitions:
javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1,enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1,enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2,enabled=true)"; void 0

javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(Invert=1,enabled=true)"; void 0

Reset:
javascript:document.body.style.cssText = "filter:progid:DXImageTransform.Microsoft.BasicImage(enabled=false)"; void 0

P.S. Tested on IE6 and IE8. In Internet Explorer 8 Demo does not work from http://ma.wishmesh.com root, but works from post itself (http://ma.wishmesh.com/2010/07/website-effects-emboss-engrave-motionblur-wave-opacity-grey-scale-and-transforms-mirror-rotation-invert/).