Zachstronaut.com Home

CSS text-shadow Fun: Realtime Lighting Demo

published:: 2009.06.22
topics:: css; javascript

After my last post about the CSS text-shadow property it occurred to me that it could be used to create some fun pseudo-realtime lighting effects.

In the example below I am using a PNG to create a spotlight, and I am using JavaScript to update the text-shadow style on the text in order to simulate realtime shadows from a single light source. Move your mouse over the box to cast a shadow with the spotlight.

Should work in Firefox 3.5, Safari, Opera, and Chrome. Apparently still no support in IE8? Big shocker there.</sarcasm>

View the example in a new window.

43 Comments…

Comments

Andy launched this comment T plus 15 years.

Clever, awesome!

Paul Armstrong launched this comment T plus 15 years.

You should add the box-shadow to where the baseline of the text is.

Kamran Ayub launched this comment T plus 15 years.

Dude, awesome.

JBA launched this comment T plus 15 years.

That's very cool, but you've got a small glitch related to the z-index stacking of the foreground characters and the shadows. If you place the mouse in the center of the image or to the left, the shadow looks perfect, but as you move the mouse to the right and the shadow moves over to the left, you see the shadow characters show up in front of the foreground characters to the left. I think it should be a quick fix, and its not a big deal, but i thought i'd point it out. Otherwise, very very cool.

Zachary (Author) launched this comment T plus 15 years.

RE: JBA's comment, does anybody else see that? I definitely do not see that.

JBA, what browser / operating system?

JBA launched this comment T plus 15 years.

I'm using Chrome 2.0.172.33 on Vista.
I'll Email you a screenshot, since I can't upload an attachment to your comments.

Ken Saunders launched this comment T plus 15 years.

Holy Schnike!! (Chris Farley )
Wicked cool. Nice work.
I'm not familiar with the </sarcasm> tag. Is that new in HTML5? I like it.

Question launched this comment T plus 15 years.

@Zachary:
I think JBA is using chrome stable.
Please have a try.

Fowl launched this comment T plus 15 years.

The shadow is much, much nicer looking in Firefox (3.5rc2?) compared to Chrome (3.0.189.0), but Chrome's text is much better anti-aliased. On NT 6.

Bailey Ford launched this comment T plus 15 years.

I thought you were being completely serious because the </sarcasm> tag was never opened. Awesome work!

Antti launched this comment T plus 15 years.

I use Chrome as well and see the same z-order issue that JBA mentioned.

Zachary (Author) launched this comment T plus 15 years.

It isn't a z-index issue. JBA sent me a screen shot. The text-shadow is being applied individually to each *letter* inside of the <p> tag, which is completely nonsensical. Chrome is misbehaving. I encourage you Chrome fans out there to submit a bug report.

Keith launched this comment T plus 15 years.

Very cool!
I already found a fun way to use the text-shadow property, inspired by your demo:

http://helioviewer.org/?img-scale=1.5

Try dragging the sun around in the viewport. The offset of the shadow should update accordingly. Still needs a lot of work, but the potential is quite wonderful.

Thanks! :)
Keith

Adam Schwartz launched this comment T plus 15 years.

I can confirm the Chrome behavior in Vista. Very strange.

Rojas launched this comment T plus 15 years.

I can confirm the error with Chrome in XP also.

Mike Chelen launched this comment T plus 15 years.

Seems to work fine in Firefox 3.0.11 too :)

Zachary Johnson (Author) launched this comment T plus 15 years.

I don't think I need anybody else to confirm the Chrome problem. ;) It is a Chrome bug. Google should fix it.

Mike, it doesn't actually work in Firefox 3.0.11 -- you are seeing the spotlight but you are missing the shadow. Try out Firefox 3.5!

( Check out the screenshot on Ajaxian to see what I mean: http://ajaxian.com/archives/fun-with-text-shadow )

Zachary (Author) launched this comment T plus 15 years.

A little something extra for those of you coming back to read my comments: I created a new version of the demo that uses a CSS box shadow to correct my previously-physics-defying light source (thanks for noticing, Paul). AND, for Webkit-based browsers (Safari, maybe Chrome) I used a CSS gradient to create the spotlight, thus I am actually able to create the effect without any images at all:

http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box2.html

It gets kind of choppy in Safari with that gradient. Not great performance.

Jamie Thingelstad launched this comment T plus 15 years.

wow -- very slick.

matt hummel launched this comment T plus 15 years.

Very nice. I like it.

baqwerty launched this comment T plus 15 years.

Very nice indeed!!

Daniel Glazman launched this comment T plus 15 years.

Superb, absolutely superb... Congrats!

Daniel Glazman, CSS WG Co-chair

Will Martin launched this comment T plus 15 years.

Well, if you want to get picky about physics, each letter should have a center point for the spotlight, instead of having one centerpoint for all letters at once. The effect you have is cool, but it would be even cooler if the letters spread apart when the spotlight goes off to the sides; if there were some distortion to the sides to represent the radiant nature of light.
Likely, this is not within the realm of possibility for this kind of feature.

Zachary (Author) launched this comment T plus 15 years.

Yeah. It is definitely a "pseudo-realtime lighting effects." Not actual lighting. You're right about how the shadow would look in real life.

However, I'm not sure the average person will notice the problem with this illusion... so I balanced that against the extreme ease at which it could be created.

One so inclined could write a realtime ray caster that plotted the shadow against a canvas tag behind the text. ;-)

TomÃ¡s launched this comment T plus 15 years.

Awesome technique !!

Carlos Martins launched this comment T plus 15 years.

Really cool implementation.
Showing up what can be accomplished without extra plugins like Flash.

Bradford Sherrill launched this comment T plus 15 years.

I will be using this technique soon hopefully in a upcoming web site if all goes well, thanks!

Edd Turtle launched this comment T plus 15 years.

Wow, Groovy website =] Crazy like... And! Super good example of text shadowing, thanks. :)

rahul launched this comment T plus 15 years.

super cool !!!!!!!!!!!!!!!!!!!!!!!!!!!!!

labtech launched this comment T plus 15 years.

Very nice effect. One thing i don't understand: you make Blur effect with Math.sqrt(xm*xm + ym*ym); - How you define the middle (height) of the area.

deine mudda launched this comment T plus 15 years.

Mmh still seems like Chrome sucks and Firfox just rocks! ;)

Very cool usage of CSS anyway!

Zach (Author) launched this comment T plus 15 years.

@labtech - Can you rephrase the question? Middle height of what area?

Also, to be more specific, the blur is a natural by-product of the text-shadow CSS property. Blur is one of the arguments. I'm using the formula for distance and making blur increase proportionally as the distance of the spotlight/mouse increases from the fixed text.

Ricky launched this comment T plus 15 years.

I am eager to try this out in my blog. Can u pls send me the code or link to it? I will have a look at it. It is working well for me. The shadow effect looks awesome. Coollllll

Zachary (Author) launched this comment T plus 15 years.

Ricky, the code is all HTML/CSS/JavaScript. Just view source.

Ricky launched this comment T plus 15 years.

Oh i got it. i will have a look at it when im on my lappy. anyway thanx for the reply.

zachariah launched this comment T plus 15 years.

Curious if you submitted a bug report for chrome; I'd like to track it's progress.

Shubham launched this comment T plus 15 years.

That's an awesome effect i say....nice work...keep it up.!

Rob Allison launched this comment T plus 15 years.

That's amazing! Well done!
I was playing around with CSS rounded corners and managed to reproduce the mushroom from super mario brothers lol!

http://www.rob-allison.co.uk/fun-with-css-rounded-corners/

Beben launched this comment T plus 14 years.

wow any rocket landing...
thanks for info

Gem@ launched this comment T plus 14 years.

FantÃ¡stico!! me ha impresionado, Gracias!!

Florian Schommertz launched this comment T plus 14 years.

well done!

Agnieszka launched this comment T plus 13 years.

thanks a lot, in Poland we're fighting with ACTA today and tomorrow, I took a chance and adapted your template to Polish, I hope you don't mind. It's here: www.pafnuc.pl, I understand I can share it with others to use during blackout.
Once again, great job, thanks!

Sam launched this comment T plus 9 years.

Does this work for a responsive image and container?