Friday, June 26th, 2009

Fun with text-shadow

Category: CSS, Examples

Zach Johnson is at it again, this time giving us a fun Friday treat with CSS text shadow, all via:


  1. document.getElementById('text-shadow-box').onmousemove = function(e) {
  2.     var xm = e.clientX - 300;
  3.     var ym = e.clientY - 175;
  4.     var d = Math.sqrt(xm*xm + ym*ym);
  5. = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
  7.     xm = e.clientX - 600;
  8.     ym = e.clientY - 450;
  9. = xm + 'px ' + ym + 'px';
  10. }

Posted by Dion Almaer at 11:26 am

3.8 rating from 41 votes


Comments feed TrackBack URI


Comment by Darkimmortal — June 26, 2009

The spotlight mechanism demonstrated here can be used to create a lightbox, highlight the areas of UI to draw user’s attention or similar purposes. So, the mechanism used in the demo has more uses than text shadowing. This is really cool. It is amazing what some people can do with simple things :-)

Comment by ragjunk — June 26, 2009

It’s a really cool effect, but to nitpick, it’s a little jarring because the box the text is sitting on doesn’t cast a shadow.

Comment by eyelidlessness — June 26, 2009

Dion, why aren’t you linking to the full post?
Here it is:

Comment by andysky — June 26, 2009

@ragjunk: excellent ideas! thank you. :)

Comment by andysky — June 26, 2009

What would really be cool is if you had some causal text on a page and only when you mouse over it you can read private data. That way, if you are reading something confidential and someone comes around that wants to be nosy, you could just quickly move the mouse in a corner where nothing is actually revealed.

Comment by breakthrough — June 26, 2009

Simply cool! thanks!

Comment by JenHogan — June 29, 2009

I tried div { color:transparent; text-shadow:10px 10px 10px black; }
But this renders no shadow due to the transparent font color.

Shouldn’t that work?
Would be nice.

Comment by Lon42 — June 29, 2009

I think that all though this application is just “cute” and mostly not that useful in real life situations, I think there’s a general design pattern waiting underneath there which is to “don’t show what’s not needed” or at least “phase it down”. Kind of like what we’re doing with the BehaviorUnveiler at – (move your mouse over the thumbs to the left…)
The same “philosophy” was being executed on when we created our SlidingMenu ( )

Comment by ThomasHansen — June 29, 2009

Lon42 – You can get around that problem by negatively indenting or positioning non-transparent text outside of the viewport and then offsetting the shadow back onto the screen.

I’m doing it here:

Comment by zachstronaut — June 29, 2009

I can’t say I’m overly keen on all these “design” related CSS features – I can’t imagine how the bloaty sites like mySpace and Facebook are going to end up. As a purist I’d much rather see the web get leaner for performance over “cooler” for bloat…

That said, I do like the concept! Kudos

Comment by oopstudios — July 1, 2009

You know, it’s one thing not to support MSIE — it’s another to throw js errors into infinity requiring a complete browser shutdown to escape.

Thanks for the warning, NOT. #fail

Comment by wwwmarty — July 1, 2009

Your browser is #fail. Get a real one.

Comment by zachstronaut — July 1, 2009

Very nice. Stuff like this got me inspired. Just finished up with adding support for text shadow animation to the UIZE JavaScript Framework. I think you’ll find something interesting to look at here…

UIZE provides powerful ways to control the animation of the smallest components of CSS style property animations, allowing some mind-blowing effects to be produced.

Comment by uize — December 4, 2009

Leave a comment

You must be logged in to post a comment.