Comments on: Fun with text-shadow

By: uize

uize — Fri, 04 Dec 2009 06:53:57 +0000

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.

By: zachstronaut

zachstronaut — Wed, 01 Jul 2009 18:22:04 +0000

Your browser is #fail. Get a real one.

By: wwwmarty

wwwmarty — Wed, 01 Jul 2009 15:06:29 +0000

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

By: oopstudios

oopstudios — Wed, 01 Jul 2009 12:00:39 +0000

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

By: zachstronaut

zachstronaut — Mon, 29 Jun 2009 14:32:29 +0000

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

By: ThomasHansen

ThomasHansen — Mon, 29 Jun 2009 13:40:39 +0000

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 )

By: Lon42

Lon42 — Mon, 29 Jun 2009 08:24:39 +0000

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.

By: JenHogan

JenHogan — Mon, 29 Jun 2009 06:56:54 +0000

Simply cool! thanks!

By: breakthrough

breakthrough — Fri, 26 Jun 2009 21:19:07 +0000

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.

By: andysky

andysky — Fri, 26 Jun 2009 18:32:17 +0000

@ragjunk: excellent ideas! thank you. :)

By: andysky

andysky — Fri, 26 Jun 2009 18:30:13 +0000

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

By: eyelidlessness

eyelidlessness — Fri, 26 Jun 2009 17:37:40 +0000

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.

By: ragjunk

ragjunk — Fri, 26 Jun 2009 17:24:39 +0000

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 :-)

By: Darkimmortal

Darkimmortal — Fri, 26 Jun 2009 16:31:18 +0000

Wow.