CSS Shadows

What up?

I have a couple of CSS gems I wanted to share with you. This first one is called a top shadow. Here is the effect:

Compare this version to the not so fun version:

Here is the code for that little effect:

<style type="text/css"> /*TOP SHADOW*/ body:before { content: ""; position: fixed; top: -10px; left: 0; width: 100%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } </style>

Another little gem is putting a drop shadow under images. Here is a screenshot within eCollege with two images, one has a drop shadow:

If you like that shadow as it is, then use this code:

<style type="text/css"> img { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); } </style>

Okay, now stay with me. That code should put a drop shadow on all images on the page (if you have multiple images). The code is essentially saying that whereever there is an <img>, then the browser is to apply those settings. You can also put drop shadows on <div>s if you would like. Just change the

img { … }

so that it reads

<style type="text/css"> div { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); } </style>

If you want some pictures to have shadows and not others, then create a class. In the above example I had the two pictures and for the sake of illustrating the drop shadow, I wanted one to have the shadow and the other to not have the shadow. Below is the code that I used for the above images. Notice the elements include a blurb of CSS at the top, then an image, and finally another image with a defined class:

<style type="text/css"> .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; /* For IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); } </style> <img src="/CurrentCourse/images/essay_exam.jpg" alt="graphic" title="graphic" float="left" width="290"> <img class="shadow" src="/CurrentCourse/images/essay_exam.jpg" alt="graphic" title="graphic" float="left" width="290">

Notice how in the internal CSS I defined the class [.shadow { … }] and in the second image I specified the class [<img> class="shadow"]. If you want to create your own shadows, adjusting the properties like the color, depth, spread of the shadow, then check out this website http://css3please.com/.

You can also tweak the shadow yourself if you want. Just change the values

-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;

to whatever values you want. You have 4 values: the x-axis, the y-axis, the spread or blur, and the color. Feel free to tinker with the javascript for IE, but I wouldn't worry. This effect is essentially not important enough to dedicate the time to making it compatible for IE. IE9 is overdue, but it is going to be compliant with the CSS3 standards.

If you are interested in a text shadow, give this a try:

.text-shadow { text-shadow: #999 1px 1px 3px; }

And then when you put in text, specify <p class="text-shadow">. You can change the color from #999 to whatever you want, and the 1px 1px 3px is like saying how far to the right of the text should the shadow fall, how far below the text should the shadow fall, and then what is the spread (blurriness of the shadow). Those values will all depend on the size, font, color of the text you are using or the background of your page (if you have a background).