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.
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!