Back in 2009 (wow, what a long time ago!) I created a rather bold layout and used CSS to create a shadowed effect. This should work in all browsers and the code can be easily edited to vary the thickness and colour of the shadow. You can see the layout on my past layouts page and I’ve included a screenshot below.
This tutorial is divided into two parts; The box and The shadow. (There’s also an Extra notes section at the end.) This is so that things are easier to follow and you know what components you are dealing with.
The box
Find what you’d like to include in a shadowed box. A small paragraph of text is best to start with. You need to use a div class and place this paragraph in a div, choosing a unique name for the class. I have decided to call mine box. Your paragraph should now be coded like so:
<div class="box"> This is my rather small paragraph of text. </div>
Please note that we are using classes so that you can use these boxes more than once (IDs are only allowed to be used once).
We now go to the CSS to style these ‘boxes’ accordingly. You can set height and width for the box if you want or leave it default so that it adjusts to whatever text is inside. However, if you do do this, you will need to fiddle with the margins and padding of the layout you already have.
.box {
background-color: #dedede;
padding: 15px;
margin: -1.5em 0 0 -1.5em;
}
The padding is important – you don’t want the text inside the box to be too close to the edges, so increasing this will put extra space or ‘padding’ between the text and the edges of the box.
The margin is set so that this box is a certain distance from the shadow (when we create it). The larger you make the value after the negative sign, for example -2.5em, the further away the shadow will appear. However, I don’t recommend changing this as you may have to change other values in the shadow itself – you will see this in Extra notes further below.
The shadow
The HTML for this is simple. You simply need to wrap your box in the shadow, giving the shadow div another unique class. I’ve used back:
<div class="back"> <div class="box"> This is my rather small paragraph of text. </div> </div>
The CSS is quite straightforward:
div.back {
padding: 0.75em;
background: #777;
}
Of course, you can change the colour as you please.
Extra notes!
The padding determines how thick the shadow is. You can increase it. However, you will notice that if you keep making it bigger, it will look less like a shadow and just like an external box. To avoid this, you will need to adjust the margin of the box.
If you choose to make the shadow thicker by using padding: 1.5em instead, you will need to go back to the CSS for the box and change the margins to margin: -3em 0 0 -3em. You will notice that the margins of the box are double the padding of the shadow, and made a negative value. This makes the shadow more even, but you are more than welcome to fiddle with the code.
If your entire layout uses this, you may not see the shadow if you don’t set some margins. I suggest putting some margins on body in your CSS so that there are margins on all edges of the screen, but this will depend on your layout.
Do you want your shadows to the top left? It’s simple, change the order of the margin values to margin: 0 -1.5em -1.5em 0 instead of margin: -1.5em 0 0 -1.5em. Just remember that the order of the values is the margins of the sides in this order: top, right, bottom, left.
An example of a shadowed DIV – this contains a poem I wrote as filler text; you will be able to see how your end result should look. If you found this tutorial useful please credit and link back to this website! 