Fun With CSS Text-Shadow
I used 100 text-shadows to make the graphic below happen. Sure, it’s excessive, ridiculous and just plain silly. But why, at times, can’t the web be all of those things? I’m all for sensible, well-reasoned CSS, but let’s keep things in perspective. We’re not surgeons. We can experiment without causing anyone bodily injury. So go! Have a blast! Pull up your localhost and build something wonderfully useless! Click Here if you’d like to see the CSS.
BAD!
7 Responses
Leave a comment or contact me via Twitter @TrentWalton
This is awesome. I love the Escher type feel to it.
And you’re totally right. A lot of people get uppity about abusing HTML. There are times and locations when that is acceptable. :]
So bad! As mentioned on dribbble, I see default browser text, but still, love what you’re pumping out here with the mega CSS text-shadow action.
Wow! That’s pretty cool!
I agree with Zach. Use cool HTML stuff when needed, but don’t use it if there is a more effective way.
Even so, this is a wonderful experiment.
Looks bloody brilliant Trent, it reminds me of nclud’s Beercamp: http://sxsw.beercamp.com/
Thanks for the heads up fellas... A bit of a surprise to see Public Gothic isn’t free anymore.
@Zander: Beercamp is awesome... The first place I saw use of multiple text-shadows.
Great effect. A lot of “look at this cool thing I can do without images” demos have masses of extra HTML. You’ve really kept it clean.
CSS3 and great browser support are really opening doors. You have an image-worthy design that uses maybe 4K worth of CSS and html. Gzipped this may actually be a much smaller and faster loading option than a png8 or gif. And no extra http requests. Awesome.
That is some fun stuff. The :after content attribute is something i haven’t really seen in practice but it could be a real powerful tool.
Cheers!