CreateaFreeWebsite  with Responsive Web Design

General

 

9 Step Tutor

Text Shadow

The text shadow property is one of those CSS techniques that has been experimental for a few of the last releases of CSS.

It is now supported by the latest versions of all major browsers, except IE9. Internet Explorer is expected to support it in version 10.

I'll start off by saying that I don't recommend text shadow for dark text on very light or white background colors. You can experiment with it but my experience has taught me to use it with light text on pastel or medium colored backgrounds.

When used properly it adds a nice raised almost 3 dimensional appearance to your text.

It can be used with any text element.

The text-shadow property accepts the following values:
text-shadow: h-shadow v-shadow blur color;

h-shadow Required. The position of the horizontal shadow. Accepts Negative values.
v-shadow Required. The position of the vertical shadow. Accepts Negative values.
blur Optional. The blur distance
color Optional. The color of the shadow.

Examples of Text Shadow

Below we'll present a few examples. Because we use text shadow on our website we will add the values with inline style sheets. If using an IE browser, you won't see it until the next release(version 10).

When you start experimenting, you'll place the values in your linked style sheet.

Text shadow is optional and a matter of the taste of the author.

 

This is text shadow. The code is shown below.

font-size:30px;
color: #ffffff;
text-shadow: 1px 1px 2px #000000

 

This is text shadow. The code is shown below.

font-size:28px;
color: #efefef;
text-shadow: 4px 4px 8px #0e0e0e

 

This is text shadow. The code is shown below.

font-size:30px;
color: #efefef;
text-shadow: -1px -1px 8px #990000

 

This is text shadow. The code is shown below.

font-size:34px;
color: #0e0e0e;
text-shadow: -2px 2px 10px #ffff00

 

This is text shadow. The code is shown below.

font-size:38px;
color: #ff8000;
text-shadow: 1px 1px 3px #000000

 

This is text shadow. The code is shown below.

background :#efefff;
padding: 10px 10px;
font-size:22px;
color: #0f0f0f;
text-shadow: 1px 1px 4px #898989

 

Free Tools and Resources We Recommend

Free Responsive Web Design Certification freeCodeCamp
freeCodeCamp is a proven path to your first software developer job.
More than 40,000 people have gotten developer jobs after completing this – including at big companies like Google and Microsoft.
Finally, you'll learn how to make webpages that respond to different screen sizes by building a Twitter card with Flexbox, and a complex blog layout with CSS Grid.
FREE Certification Courses!!
Free Ebook How to Code in HTML5 and CSS3
"How to Code in HTML5 and CSS3" is a free e-book about making websites in HTML5 and CSS for absolute beginners. It doesn't require any experience in IT to start....
FREE HTML Editor (Windows): NoteTab Light
All the features of a commercial HTML editor.
FREE Apache Server (Windows): IndigoAmpp
Set up a real time server environment right on your PC. Test forms and scripts before uploading to your web space.
Linux Users
If like us, you've left the insane world of Microsoft Windows for the even worse experience of Linux, we recommend the BlueFish HTML editor. You'll find it in your software repository. It does have some QUIRKS, but it's FREE.
For image resizing we've found the easiest Linux tool to be Krita.

Have you tried our FREE RWD template kit? Download Template #402 - 6 Page Kit