hacks.mozilla.org

10 Responses to “the text-shadow spotlight”

1. 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. 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. 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. 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. 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. 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.

1. 1 颠覆网络35天 ─ 文字阴影聚光灯 < MJiA
   Pingback on Jun 25th, 2009 at 11:31 pm
2. 2 Upgrade to Firefox 3.5 on Ubuntu 9.04 – Jaunty Jackalope | gaarai.com
   Pingback on Jul 1st, 2009 at 5:27 pm
3. 3 谋智社区 » Blog Archives » 颠覆网络35天 ─ 文字阴影聚光灯
   Pingback on Aug 18th, 2009 at 10:59 pm
4. 4 Firefox 3.5 – evolucija spleta - Zakladi interneta
   Pingback on Sep 16th, 2009 at 2:30 pm