How to create box shadow on only one side

HTML & CSS
1

I’m trying to figure a way to add a box shadow but to only one side.
Here is a link to the page:http://aaronhaas.com/pitchshark7/index10.html


#content{
	font-family: Helvetica,Arial,sans-serif;
	width:995px;
	height:1780px;
	margin:0px auto;
	padding-left:20px;
	background-color: #fff;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 12px;
	-moz-border-radius-bottomleft: 12px;
	-webkit-border-radius: 0px 0px 12px 12px;
	border-radius: 0px 0px 12px 12px;

	-webkit-box-shadow: inset -2px -3px 1px 1px #aaa;
	-moz-box-shadow: inset -2px -3px 1px 1px #aaa;
	box-shadow: inset -2px -3px 1px 1px #aaa;
}
2

Do you know what each value stands for? box-shadow: h-shadow v-shadow blur spread color inset;

Ify ou want a box shadow on either the bottom or right, adjust the first two values. If you want left/top, you have to use negative values

Here is one on the right

div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 10px 0px 4px #888888;
}

Top

div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0px -10px 4px #888888;
}

Left

div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: -10px 0px 4px #888888;
}

Bottom

div
{
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0px 10px 4px #888888;
}
3

Try this…

#content{
	font-family: Helvetica,Arial,sans-serif;
	width:995px;
	height:1780px;
	margin:0px auto;
	padding-left:20px;
	background-color: #fff;

	-moz-border-radius: 0px 0px 12px 12px;
	-webkit-border-radius: 0px 0px 12px 12px;
	border-radius: 0px 0px 12px 12px;

	-moz-box-shadow: 10px 0px 5px -2px #aaa;
	-webkit-box-shadow: 10px 0px 5px -2px #aaa;
	box-shadow: 10px 0px 5px -2px #aaa;
}

Positioning first, 10px (horizontal offset sends it to the right and 0px (vertical offset) keeps it hidden under it’s parent element. Radius next, so 5px is the blur radius. Then the fourth -2px property is the shadow spread, so change that to your spec, to make it appear on one side only.

4

Thanks, but I’m trying to make it so the shadow only appears on the bottom.

Even better, is there a way to make the shadow a gradient and get darker as it goes down border gradient on the side of the page?
http://aaronhaas.com/pitchshark7/index10.html

5

Did you not read my post?

If you blur it out, it’ll start dark and work to light, but you’ll need to increase the “blur” value to make it a longer effect.