Friday, June 26th, 2009
Fun with text-shadow
Zach Johnson is at it again, this time giving us a fun Friday treat with CSS text shadow, all via:
JAVASCRIPT:
-
-
document.getElementById('text-shadow-box').onmousemove = function(e) {
-
var xm = e.clientX - 300;
-
var ym = e.clientY - 175;
-
var d = Math.sqrt(xm*xm + ym*ym);
-
text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
-
-
xm = e.clientX - 600;
-
ym = e.clientY - 450;
-
spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
-
}
-
3.9 rating from 36 votes
Wow.
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 :-)
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.
Dion, why aren’t you linking to the full post?
Here it is:
http://www.zachstronaut.com/posts/2009/06/22/css-text-shadow-lighting-demo.html
@ragjunk: excellent ideas! thank you. :)
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.
Simply cool! thanks!
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.
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 http://ra-ajax.org – (move your mouse over the thumbs to the left…)
.
The same “philosophy” was being executed on when we created our SlidingMenu ( http://ra-ajax.org/Docs.aspx?class=Ra.Extensions.Widgets.SlidingMenu )
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:
http://www.zachstronaut.com/posts/2009/06/13/exploring-css-text-shadow.html
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
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
Your browser is #fail. Get a real one.