Designing with CSS – Text Shadow

CSS3 gives you a simple text shadow with text-shadow property. However, this feature is not new in CSS3; it was originally proposed in CSS2.

This property produces text with a shadow [n]px left or right and above or below of the text, which blurs for [n]px. Shadow effects do not alter the size of a box, but may extend beyond its boundaries. Text shadows may also be used with the ::first-letter and ::first-line pseudo-elements.

CSS3 Generator

If you are not very comfortable with CSS, or would like to have CSS codes auto-generated for you to save time, here is a useful and handy tool called CSS3 Generator. This simple tool created by Randy Jensen could be used for most basic design elements like rounder corners, box-shadow, text-shadow, etc on your webpages. It will create some cross-browser CSS3 code based on whatever values you want.

In the previous article I illustrated generation of code for box shadow using box-shadow property of CSS3 with the help of this tool.

In this article I shall illustrate generation of code for text shadow using text-shadow property of CSS3 with the help of this tool. The procedure is simple. You chose your design element from the drop-down menu, enter your values, and get your auto-generated code for your project.

Your Code:

text-shadow:2px 2px 1px #d6132d;
filter:dropshadow(color=#d6132d, offx=2, offy=2); 

Browser Compatibility:

Firefox 3.5+ Chrome 4.0+ Safari 4.0+ Opera 9.6+

Example of Text with Shadow

This example uses the CSS3 text-shadow property and currently it will not work in all browsers.

CSS Code:

.box {color:#807970;background:#f9fafa;border:1px solid #dbe1e6}
.corner {border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px}
.textshadow {text-shadow:2px 2px 1px #d6132d;filter:dropshadow(color=#d6132d, offx=2, offy=2);}

HTML:

<div class="box corner textshadow">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

Example: