CSS3 Drop Shadow Depth

In a recent screencast for Method & Craft, Noah Stokes demonstrates how to add depth to text with a simple drop shadow. It’s a nice subtle technique that when used well can easily improve the quality of a design. After watching the video, I realized how simple this effect would be to attain using CSS3 text shadow and RGBA.

Drop Shadow Example

Check out the demo

How It’s Done

I started by adding a 1 pixel white text shadow to the bottom of my the text:

text-shadow: 0px 1px 0px #fff;  

I then replaced the white color with the RGB value for white and began tooling around with the opacity level before finally settling on an opacity level of .3:

text-shadow: 0px 1px 0px rgba(255, 255, 255, .3);  

Put it to good use!