3D Text Tower with MOAR 3D with MAGIC! (CSS)

If you are in internet explorer this post will look very dull indeed. Get a different browser, you crazy fool!

So, the various lovely things that can be done with the CSS3 property text-shadow, whilst still lost on Internet Explorer users, are definitely still worth playing with.

David Desandro’s 3D Text Tower effect, as popularised by Chris Coyier is pretty darn cute.

It’s not just for 3D effects though..

Woo! I’m glowing!

text-shadow: 0px 0px 5px rgb(223,19,37);
font-size: 4em;
font-weight:bold;

Back to the 3D – I wonder if I can make it MOAR 3D, I thought.

POW!

color:rgb(223,19,37);
text-shadow: 1px 1px #777, 2px 2px #666, 3px 3px #555, 4px 4px #444, 5px 5px #333,6px 6px #222;
font-size: 8em;
font-weight:bold;

ZAP!

color:rgb(223,19,37);
text-shadow: 1px 1px #999, 2px 2px #666, 3px 3px #555, 4px 4px #444, 5px 5px #333,6px 6px #222;
font-size: 8em;
font-weight:bold;

WHOOSH!

color:rgb(223,19,37);
text-shadow: 1px 1px #333, 2px 2px #333, 3px 3px #444, 4px 4px #444, 5px 5px #555, 6px 6px #555;
font-size: 8em;
font-weight:bold;

Yeah. That’s what I’m talking about.

Published by

tiff

Eclecticism is the light and the way. Parsnips are fantastic. Celeriac is evil.

Leave a Reply

Your email address will not be published. Required fields are marked *