15 comments

Post a comment

  1. Pingback from 颠覆网络35天 ─ 文字阴影聚光灯 < MJiA on June 25th, 2009 at 11:31 pm:

    [...] 原文地址：the text-shadow spotlight 系列地址：颠覆网络35天 [...]

    Reply

  2. Hans Schmucker wrote on June 26th, 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!

    Reply

  3. thinsoldier wrote on June 26th, 2009 at 3:56 pm:

    When will he be able to use a css gradient instead of a png for the spotlight effect?

    Reply

  4. Hans Schmucker wrote on June 26th, 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.

    Reply

  5. Zachary Johnson wrote on June 26th, 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!

    Reply

  6. Jeff Walden wrote on June 27th, 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. ;-)

    Reply

  7. Eduardo wrote on June 30th, 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.

    Reply

  8. Pingback from Upgrade to Firefox 3.5 on Ubuntu 9.04 – Jaunty Jackalope | gaarai.com on July 1st, 2009 at 5:27 pm:

    [...] a text shadow spotlight effect using Javascript and [...]

    Reply

  9. Pingback from 谋智社区 » Blog Archives » 颠覆网络35天 ─ 文字阴影聚光灯 on August 18th, 2009 at 10:59 pm:

    [...] 原文地址：the text-shadow spotlight 系列地址：颠覆网络35天 [...]

    Reply

  10. Pingback from Firefox 3.5 – evolucija spleta - Zakladi interneta on September 16th, 2009 at 2:30 pm:

    [...] text shadow spotlight [...]

    Reply

  11. Shubham wrote on March 8th, 2010 at 12:38 pm:

    awesome spotlight effect with CSS…great work..!

    Reply

  12. sidash wrote on December 18th, 2010 at 7:53 am:

    fantastic!!!
    but I don’t see JavaScript(

    Reply

  13. Pingback from JavaScript / JQuery spotlight effect on an application - ScriptLance Programming Project on June 7th, 2011 at 10:01 pm:

    [...] sites for how the spotlight effect may work: http://www.csbsupport.com/samplecode/id389.htm (IE) http://hacks.mozilla.org/2009/06/text-shadow-spotlight/ (Firefox) http://www.flashandmath.com/intermediate/spot/spotlight.html (IE) [...]

    Reply

  14. Webliberty wrote on July 13th, 2011 at 3:52 am:

    The shade round the text beautifully looks, only here not in all browsers is displayed…

    Reply

  15. Chester wrote on August 11th, 2011 at 12:24 am:

    wow! It’s realy cool effect! Thanks!

    Reply

Add your comment

  5.