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.