CSS3 Drop Shadow

CSS3 Drop Shadow

8:53 PM

Drop Shadow

In the past the only way you could create a drop shadow on a web page was to do it graphically and then add that graphic to the site. This technique served its purpose but now there is a much easier way to add that drop shadow and no graphic is needed, it is all done with code!

Start out with basic HTML

?
1
2
3
4
5
6
7
8
<html>
<head> <title> CSS3 Drop Shadows </title>
</head>
<body>
<div><p>The shadow element will add a drop shadow to whatever it is applied to.</p>
<p>There are four numbers next to the shadow element.  The first is the color, the second controls the width of the right shadow, the third controls the width of the bottom shadow and the final number controls the spread of the shadow.  A small number will make the shadow darker and tight, a higher number will make the shadow feather out more and be softer in color.</p>  </div>
</body>
</html>

Code Explanation

I am not going to go into a lot of detail about the basic code I posted. Anyone experienced in HTML and CSS already know what to put for the basic structure.
For beginners I will tell you that you need a set, that means opening and closing html, head and body tags and add some fake copy inside the body tags so you can actually see the styles work.
So now we are going to add embedded styles to our basic code structure that was just posted.

Adding CSS

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head> <title> CSS3 Drop Shadows </title>
<style type="text/css">
body {
background-color:#945b45;
}
.shadow {
width:400px;
height:200px;
background:#fff;
padding:10px;
display:block;
margin-right:auto;
margin-left:auto;
}
</style>
</head>
<body>
<div><p>The shadow element will add a drop shadow to whatever it is applied to.</p>
<p>There are four numbers next to the shadow element.  The first is the color, the second controls the width of the right shadow, the third controls the width of the bottom shadow and the final number controls the spread of the shadow.  A small number will make the shadow darker and tight, a higher number will make the shadow feather out more and be softer in color.</p>  </div>
</body>
</html>

Code Explanation

  • Inside the head tags we addedstyle tags to hold our CSS.
  • We added a basic body style with a background.
  • Then we added the .shadowselector with some style elements. This is where we will have the good stuff.
  • To create the box that we will add the shadow to we have defined the width and height abackground color for just the box, and a little padding so the text doesn't go right up to the edges.
  • Next I want the box centered on the page, just looks better. So we addeddisplay, along with the left and right margins.
  • Then close the style tag.
That is our basic CSS information. You could write this code and view it to see a brownish background, a white box in the middle with some copy in it. Nothing fancy but wait there's more!

The Shadow Code

?
1
2
3
box-shadow: #000 5px 5px 50px;
-moz-box-shadow: #000 5px 5px 50px;
-webkit-box-shadow: #000 5px 5px 50px;

Shadow Code Explanation

Under the .shadow selector we already created add a box shadow as well as the moz-box-shadow and the webkit-box-shadow to accomodate several browsers. This is the code that creates the actual shadow.
So what do the numbers mean?
  1. The first number #000 says our shadow is black.
  2. The second number 5px shows the x coordinate or the how far the right shadow extends out.
  3. The third number 5px shows the y coordinate or how far the bottoom shadow extends out.
  4. The last number 50px shows the spread of the shadow.
Check out the final code below. Test it out and see your new drop shadow!

Final Code

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head> <title> CSS3 Drop Shadows </title>
<style type="text/css">
body {
background-color:#945b45;
}
.shadow {
width:400px;
height:200px;
background:#fff;
padding:10px;
display:block;
margin-left:auto;
margin-right:auto;
box-shadow: #000 5px 5px 50px;
-moz-box-shadow: #000 5px 5px 50px;
-webkit-box-shadow: #000 5px 5px 50px;
}
</style>
</head>
<body>
<div class="shadow"><p>The shadow element will add a drop shadow to whatever it is applied to.</p>
<p>There are four numbers next to the shadow element.  The first is the color, the second controls the width of the right shadow, the third controls the width of the bottom shadow and the final number controls the spread of the shadow.  A small number will make the shadow darker and tight, a higher number will make the shadow feather out more and be softer in color.</p>  </div>
</body>
</html>

Browser Support

Notice browsers are still getting up to speed with this drop shadow code. Google Chrome shows it without a problem. Safari and Firefox will show it as long as you add the lines that start out -moz-box and -webkit- to the code. Internet Explorer will not show the shadow, however it just ignores it so this code will not disturb the rest of the design and functionality of the site.
Next
« Prev Post
Previous
Next Post »
Thanks for your comment
Subscribe to: Post Comments (Atom)