Using CSS3 text-shadow to create fun text effects

So I’ve been playing around with new CSS3 tags, and I just realized a fun effect you can make doing text-shadow. If you set the color of your text the same as your background color, you can create an outline effect. The following uses ‘style=”font-size: 24px; color: #000; text-shadow: 0px 0px 5px #e82aff;’.

Yay for text!!!

Or, even better, offset either of the first two values in text-shadow enough, and you can completely remove the text and only have the glowing shadow left:

Glowing is fun!

Especially when it’s super fuzzy!

“Glowing is fun!” uses this: font-size: 24px; padding-bottom: 30px; font-family: Georgia, serif;color: #000; text-shadow: 0px 20px 3px #54ff00;

“Especially when it’s super fuzzy!” uses this: font-size: 24px; padding-bottom: 30px; font-family: Georgia, serif;color: #000; text-shadow: 0px 20px 5px #fff;

How about using multiple shadows to make an outline?

Fuzzy outline?

“Fuzzy outline?” uses this: font-size: 24px; font-weight: bold;text-decoration: blink; padding-bottom: 30px; font-family: Georgia, serif; color: #000; text-shadow: 0px 20px 1px #000, 0px 20px 3px #fff;

How about some Matrix-style text?

1 0 0 1 0
0 1 0 0 1
0 0 1 1 1
1 1 0 1 0
1 0 0 0 1
0 0 1 0 1
1 1 1 1 0
0 1 0 0 1

The code for this baby is as follows:

<p style=”font-size: 20px; line-height: 24px; letter-spacing: 40px; font-family: Courier, serif; color: #000; text-shadow: 18px 3px 4px #fff, 51px 14px 2px #fff, 90px 8px 3px #fff, 20px 2px 2px #1cf200, 33px 24px 9px #1cf200, 52px 0px 4px #1cf200, 89px 5px 4px #1cf200, -19px 19px 3px #88fa98, 54px 15px 7px #88fa98, 73px 19px 4px #88fa98, -7px 5px 7px #329d42, 88px 9px 4px #329d42, 18px 29px 2px #329d42, 70px 5px 5px #329d42; 16px 5px 9px #329d42;”>1 0 0 1 0 <br /> 0 1 0 0 1<br /> 0 0 1 1 1<br /> 1 1 0 1 0<br /> 1 0 0 0 1<br /> 0 0 1 0 1<br /> 1 1 1 1 0<br /> 0 1 0 0 1<br /></p>

Incidentally, if you are using Internet Explorer (or Firefox pre-3.1), you probably don’t see any shadow effects, and in fact just see a lot of black all of the boxes above. Unfortunately, this means that unless you feel like adding some CSS hacks to add a font-color just for IE, text-shadow isn’t at useful as it could be. Hopefully IE will start supporting text-shadow sometime soon.

Leave a Reply