April 3, 2011 By Julie
As a designer, I do just about anything I can to save time. Save time on my designing and minimize load time for web readers. This doesn’t mean I skimp on quality. Just the opposite, in fact. Using CSS coding rather than imagery, you can speed up load time of your page and in this tutorial, I will show you how to add a shadow behind elements on your blog and give it a 2 dimensional effect using CSS.
The first thing is to know that not all browsers will recognize this effect. I am going to slowly step off of my soap box regarding not using Internet Explorer; however, IE9 users should be able to see shadows (not all hope is lost, I suppose). At any rate, because we want the most readers possible to see this effect, we will apply 3 different lines, which all have the same purpose.
The basic code is:
box-shadow: 0px 3px 10px 10px #000; -moz-box-shadow: 0px 3px 10px 10px #000; -webkit-box-shadow: 0px 3px 10px 10px #000;
}
We put the box-shadow for Opera users, moz-box-shadow line for Mozilla users, and webkit-box-shadow for Chrome and Safari users.
The next step in successfully using this code is to understand what it means!
The very first number defines the horizontal shadow, the second number defines the vertical line, the third number defines the blur distance and the fourth number defines the spread distance (all in pixels). Where it says #000 is the hex color. You may replace this with an rgb code if you are more comfortable with that. Each of these numbers may be played around with. The above code is just an example.
If you choose to use a shadow and would like to change the side that the border shows up on, try playing with negative numbers for the horizontal and vertical codes. If you would like to see an inner shadow, simply place the code “inset” (without the quotes) after the colon on each line. An outer shadow is default and therefore does not require a code.
And that reminds me, each of your lines should be identical. They are simply representing browser compatibility and since you want your page to look the same in different browsers, just keep it the same!
The next step is to understand where to put this code.
You can place this code under any element in your CSS that you want. I often will place the code within my #outer-wrapper code in Blogger. If you do this, I recommend giving the outer wrapper a background color (here it is white). A border is not necessary either, as your shadow will be your definition bewteen the outer wrapper and background, but can be fun! A border will also ensure that those who cannot see the shadow do see some definition.
The code may look like this:
#outer-wrapper {
width: 1000px;
margin:20px auto;
background: white;
text-align:$startSide;
border: #d7d7d7 ridge 10px;
font: $bodyfont;
box-shadow: 0px 3px 6px #000;
-moz-box-shadow:0px 3px 6px #000;
-webkit-box-shadow:0px 3px 6px #000;
}
You may notice I don’t have a spread distance listed in the above code. Like I said, play around with your numbers, because it’s not always necessary.
You may also leave the shadow code out of your outer wrapper and simply choose to put it on your sidebar to have that stand out. Find #sidebar-wrapper in your CSS and place the code there instead. You can even put a shadow behind photos. To do so, find code .post-img { and put the code there.
You can add things like add rounded corners, color, borders and more to this code. There are many options, so play around and have fun with it!