ENGINEERCREATIVITY

Learning xHTML and CSS – day 23 of 40

CSS3 box shadow and text shadow

Today’s post is really a continuation of yesterday’s post and a conclusion of CSS3 (for now). Today we’ll look at text-shadow and box-shadow CSS3 style definitions. We’re on the home-stretch of building a website from scratch. I thought I’d change it up a little and introduce a new method.

The best way to learn is by doing

The next seven or so posts will be dealing with building different type of websites from scratch. Each day we’ll start from nothing. Hopefully I’ll be able to keep up with this pace, but I’ll try to post up an image of the type of website that we should create the day before so you can try to practice it. Then together we’ll build them up. I’ll also try to integrate some video tutorials / screencasts so that it could be easier to follow when seeing me do it. Anyway, enjoy the last bit of mini-lessons that we have, because from here on end, it’s about to get bumpy!@$$#

CSS3 box shadow

The CSS3 box-shadow property is very useful when used correctly. As you can see in the above image, it’s obviously extremely ugly and I’ve done so just to show what exactly the box-shadow property does. The CSS definitions for box shadow are the following:

box-shadow: 2px 2px #c3c3c3; /* required */
-moz-box-shadow: 2px 2px red; /* firefox */
-webkit-box-shadow: 2px 2px #c3c3c3; /* safari,chrome */

In general it goes like this:

box-shadow: [x-value] [y-value] [color-of-shadow];

That means that if you change that first value to a larger (positive) value, the shadow will go more to the right. However, you can make that number negative as well, and the shadow will flip directions (go to the left). Similarly, changing the second value changes the y-position of the shadow in the same fashion as the first value.

The text shadow property

Text-shadow is actually used very frequently in web design these days. Like most beautiful things, it’s not supported by Internet Explorer (IE). But there are a few filters you can write to make it IE-capable.

The text-shadow property looks like this:

text-shadow: 1px 1px 1px white;

And with further explanation and generalization, it looks like this:

text-shadow: [x-value] [y-value] [blur-value] [color];

As you can see, all values in CSS always start with the x-value, then continue with the y-value. In text-shadow, however, we also have the blur value. This is the degree to which the shadow is blurred. It’s a little hard to see from the image, but there’s actually a white shadow to the MAIN CONTENT text.

Summary

Today we reviewed two more CSS3 properties named text-shadow and box-shadow. Today also marks the end of these mini xHTML/CSS lessons and the beginning of a tough journey toward building various types of websites from absolutely nothing. We’re going to build two-column websites, three-column, one-column, and we’ll mix it up a little. It’s about to get exciting!

Be sure to subscribe to the RSS feed so you can get the new post by email (via the RSS feed link or through the Email RSS Subscription in the sidebar on the right). Also, feel free to contact me with any questions, or use my contact form to send me any private comments, suggestions, price quotes, job offers, feedback or just a plain “hi!”. Finally, make sure to check out my portfolio to see my latest work.