Friday, June 26th, 2009
Category: CSS
, Examples
<
>p
>
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';
-
}
-
- The birth of Tux
Have some geek fun with this "penguin tutorial." You'll learn about The...
- Scenes from VMworld Europe 2010: Cloud signs
Clouds are fun decorations at VMware's booth at VMworld Europe...
- Ajax work can be fun, jQuery creator says
Writing JavaScript for Ajax should be fun, says John Resig, the creator of jQuery, a tool he designed to ease developers pain working with the...
- Penguin sports
Hit the penguins with a snowball. Knock them into the bull's eye. Watch their little feets wiggle. Or, hit a few penguin fungos. This is free! This is...
- Family fun for IT people
IT professionals looking for a fun family day out should put Sunday 17 September in their diaries, for that is the date of this year's WCIT Charity...
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.
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…
http://www.uize.com/examples/hover-fader-text-shadow-animation.html
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.