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.

View the Demo in Firefox 3.5

10 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

Add your comment