Mozilla Hacks

the text-shadow spotlight

By

Posted on June 25, 2009 in 35 Days, CSS, and Firefox

15 comments

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

    June 25th, 2009 at 23:31

  2. Hans Schmucker

    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!

    June 26th, 2009 at 09:19

  3. thinsoldier

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

    June 26th, 2009 at 15:56

  4. Hans Schmucker

    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.

    June 26th, 2009 at 16:19

  5. Zachary Johnson

    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!

    June 26th, 2009 at 18:34

  6. Jeff Walden

    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. ;-)

    June 27th, 2009 at 02:03

  7. Eduardo

    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.

    June 30th, 2009 at 12:21

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

    July 1st, 2009 at 17:27

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

    August 18th, 2009 at 22:59

  10. […] text shadow spotlight […]

    September 16th, 2009 at 14:30

  11. Shubham

    awesome spotlight effect with CSS…great work..!

    March 8th, 2010 at 12:38

  12. sidash

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

    December 18th, 2010 at 07:53

  13. […] 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) […]

    June 7th, 2011 at 22:01

  14. Webliberty

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

    July 13th, 2011 at 03:52

  15. Chester

    wow! It’s realy cool effect! Thanks!

    August 11th, 2011 at 00:24

Comments are closed for this article.