the text-shadow spotlight at hacks.mozilla.org

Published

on June 25, 2009

. 10 Comments

Zachary Johnson has put together another fun demo. He’s using some JavaScript and the new text-shadow property to build a spotlight effect. It’s embedded below. If you can’t view it, click through to his post.

1 Hans Schmucker
June 26, 2009 at 9:19 am

Hihi, I’m feeling like a little child again: That was one of the first Java applets that I had seen years and years ago and now we can do it so easily in the browser.

Thanks, Zach!
2 thinsoldier
June 26, 2009 at 3:56 pm

When will he be able to use a css gradient instead of a png for the spotlight effect?
3 Hans Schmucker
June 26, 2009 at 4:19 pm

Maybe we already are… I haven’t looked into this in a while:
Apply a CSS filter that references a graident filled SVG element as image. Since feImage should behave like “use” it should be possible to apply it that way.
4 Zachary Johnson
June 26, 2009 at 6:34 pm

thinsoldier, it would be awesome if we had -moz-mask and/or -moz-gradient CSS so that the spotlight could be pure CSS instead of a PNG.

On a side note, if you are using Firefox 3.0.11 you are seeing the spotlight but missing the shadow. Try out Firefox 3.5!
5 Jeff Walden
June 27, 2009 at 2:03 am

An idea for pure-CSS spotlight, sketched out with actual implementation left as an exercise for the reader: inset box-shadow and border-radius. I look forward to someone else doing the actual legwork.
6 Eduardo
June 30, 2009 at 12:21 pm

Nice demo.

Christopher, you could change:

document.getElementById(’text-shadow-box’).onmousemove = onMouseMove;

to

window.addEventListener(”mousemove”, …);

so the effect works when mouse is out of frame.

Vlad talks about our first steps in investigating Firefox for Android Phones: http://bit.ly/7iq88F 1 day ago
The File API spec by Mozilla's own @arun is an easy read. Most of it will be in Firefox 3.6: http://bit.ly/3CGKPp 4 days ago
web developer survey - now closed with 5000+ responses from 119 countries - http://bit.ly/1suI0j - thanks to everyone who helped! 5 days ago
@RebeccaRipple There are a lot of free fonts out there, too. Check out fontsquirrel and several other sites that have them. in reply to RebeccaRipple 5 days ago
@trygve_lie Yeah, but with a different goal - no signing required here and this is about perf not permissions. in reply to trygve_lie 5 days ago
More updates...

hacks.mozilla.org