Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Noko Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

Masking HTML elements with gradient-based fadeouts

September 16th, 2012

Yesterday I sat down and implemented a cross-browser (WebKit and Firefox, I don’t count IE) way to achieve a “fade out the element on the right with a mask” effect for our upcoming web app Charm Customer Support—it’s harder than it should be, and here’s how it works:

Fist off, for WebKit-based browsers, the -webkit-mask-image CSS property is used with a CSS gradient. This is really easy to do and straight-forward. However, on Firefox, you need to use a SVG-based gradient that’s piped into the mask CSS property. As far as I know, you can’t just copy+paste the mask property into an external CSS file—if you do that you’ll need to specify the SVG gradient in an external SVG file as well.

Anyway, here’s how it looks like:

Bacon ipsum dolor sit amet pig capicola flank drumstick tri-tip cow pork. Tenderloin pork belly ham cow chuck strip steak andouille fatback beef ribs. Tongue jowl pig chicken flank drumstick pancetta strip steak capicola biltong. Swine jowl beef ribs filet mignon spare ribs, beef bresaola tail venison pork loin pancetta prosciutto meatloaf fatback turkey. Bresaola turducken beef ribs ribeye salami chicken hamburger meatloaf. T-bone spare ribs rump, strip steak tongue sirloin biltong capicola corned beef bresaola. Swine ham tail filet mignon t-bone flank.

And for future reference, here’s the code for it:

If anyone knows a way to make this work with IE, I’m happy to add it to this post (just fork the gist!).