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

  • Zach Inglis

    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. :]

  • Chris Wallace

    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.

  • Brian Purkiss

    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.

  • Zander

    Looks bloody brilliant Trent, it reminds me of nclud’s Beercamp: http://sxsw.beercamp.com/

  • Trent

    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.

  • Tim McElwee

    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.

  • Zach

    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!

Leave a Reply