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…

VN:F [1.9.22_1171]
Rating: +7 (from 7 votes)

Using CSS3 Text Shadow for Active Link States

Recently, Chris Spooner of Line25 wrote a tutorial describing how to create a letterpress effect with CSS3’s text-shadow property.

In another article, Chris Coyier of CSS-Tricks showed how he makes all the text links on his website feel more button-like using a simple bit of CSS positioning.

During a recent project I was working on, while messing around with the CSS3 text-shadow property, I serendipitously combined the two different effects from those two articles to create a letterpress effect on active link states…

VN:F [1.9.22_1171]
Rating: +2 (from 4 votes)

Shadows and CSS3

I’m currently working on a design that uses text-shadow and box-shadow, with RGBA in place to create the shadow color. I wanted to tweet about this technique because it’s simple and awesome, but to my surprise I couldn’t find a good, quick tutorial that covered the use of both text and box-shadow, along with RGBA. So I decided to create one…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)