Drop Shadows in CSS3

CSS3 is here and has lots of awesome features!  Before CSS3 so many of us had to create these effects in Photoshop and then bring these effects into our websites as images.  We no longer have to do this!  This helps us use text directly in HTML in our sites.  Doing so helps Optimize how our site is found through Search Engines.  In the next series of posts I will give you some code and examples of this new feature.  From here you can experiment and explore.   

Let's start with Drop Shadows.

#dropshadows {
box-shadow: 10px 10px 5px #888;
}

Let's decipher the above line of CSS3.  Each CSS command begins with the #.  The name dropshadows can change.  This will be the name that you assign to the element on your page.  (The blue box above is a divtag.)

Now we move into the "meat" of the code.  The "meat" is always found between the { }.   The line of code for the dropshadow that we see around this blue div tag is as follows:
box-shadow: 10px 10px 5px #888.

What do these numbers mean?
10px (This first number refers to the amount of pixels that make the shadow on right hand, vertical side, also known as the X-Offset.)
10px (This second number refers to the amount of pixels that make the shadow on the bottom horizontal line, Also known as the Y-Offset.)
5px (This 3rd number refers to the amount of blur that these pixels have.  Therefore this line of code that we are looking at has the last 5 pixels blurred.)
#888 (This number refers to the color of the shadow.)

Now that we have deciphered this line of CSS3 let's experiment with some more options for creating Drop Shadows.   

Let's look at a few other ways that we can work with this line of code to create different effects.

Drop Shadow on the other two Sides
#threesidedshadow{
box-shadow: -5px -5px 2px #888;
}

 

Let's take a look at the "meat". Here it is:
box-shadow: -5px -5px 2px #888;

By using the following two numbers to begin: -5px -5px we place a drop shadow on the right vertical and top horizontal  sides.  By using a negative number the shadow moves to the corresponding X-Offset, Y-Offset.  

The first number, -5px refers to the left vertical line of the rectangle, X-Offset.

The second number, -5px refers to the top horizontal line of this rectangle, Y-Offset.

The third number, 2px refers to the amount of pixels that are blurred.

From here you can play around with different combinations of numbers and colors to create a variety of drop shadow effects.

Below are a few more examples with the lines of CSS above.

In Example 1 and Example 2 you will see that there is a shadow around all 4 sides.  This is done by using 3 numbers in the "meat" of the CSS. The 4th number in this code addresses the blur.  The third number applies a Spread Radius and creates a small shadow on the other two sides. 

#example1 {
box-shadow: -5px -5px 5px 5px #888;
 }

#example2{
box-shadow: -2px -2px 2px 2px #969;
}

#example3 {
box-shadow: 3px 3px 1px #036;
}

The possibilities are endless! If you find that as you work these effects are not showing up check the browser that you are using. CSS3 effects are not compatible with many earlier versions of browsers.

Experiment, Explore and come back and share with me what you find!

Visit www.learnartanddesign for video tutorials on Web Design.  The video tutorial cover HTML, CSS, CSS3 with a specific focus on building website in Dreamweaver.

Visit my You Tube Channel for lots of videos on Web and Print Design.
http://www.youtube.com/user/mhobsonbaker?feature=results_main