Box Shadow on Left & Right Only

HTML & CSS
1

How do i apply box shadowing to the left and right side of a box and not on the top and bottom?

2

It may be tricky, since as soon as you start to apply blur, it appears on all sides. Here’s an example with a tiny bit of blur (which is the third, 2px value):

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">
div {margin: 20px; width: 400px; height: 400px;
-webkit-box-shadow: 4px 2px  #222,  -4px 0 2px #222;
-moz-box-shadow: 4px 0 2px #222,  -4px 0 2px #222;
box-shadow: 4px 0 2px #222,  -4px 0 2px #222;
}
</style>
	
</head>
<body>
<div>
</div>

</body>

</html>

You could perhaps bout another div around the shadowed div that was wider but the same height to cut off any top and bottom blur.

3

Your right. That does seem a bit tricky. With the menu bar that I have to design, I’m not sure it’ll be worthy adding the extra divs to make it work! I hope that CSS3 (or maybe 4) will expand the ability to control box shadowing better.

I’m willing to give this a go though!

Thank you!

4

Just use an image. Dats better.

5

You could use a border on both sides and add styling to that…

6

This works for me in Chrome…


<html>
	<head>
		<style>
			div.wrapper {
				width: 600px;
				margin: 0 auto;
			}
			div.sideshadows {
				position: relative;
				width: 500px;
				height: 100px;
				box-shadow: 0 0 20px #222;
			}
			div.sideshadows div.sideshadows-inner {
				position: absolute;
				top: -15px;
				width: 500px;
				height: 130px;
				background-color: #fff;
			}
			div.content {
				padding: 25px 20px;
			}
			p { 
				margin: 25px 20px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<h1>This is a side-shadow box</h1>
			<div class="sideshadows">
				<div class="sideshadows-inner">
						<p>This is some content.</p>
				</div>
			</div>
		</div>
	</body>
</html>
7

As much as I would like to, I’m using a Joomla extension to build this. The more CSS, the better.

8

I have done this as well with a combination of rgba values. Unfortunately, the left border looks too dark for the Home button…I need to change that.

9

transio,

I’ll give this a try as well to see which works better for me.

Thank you!

10

Toad,

Do note that the box-shadow property is still just a draft (CSS3 is just a draft , actually). Which means that vendor prefixes that need to be used for cross browser support. This makes dealing with box shadows look messier than it actually is.

These are two methods I use. I like them because each allows me a certain amount of flexibility. The first uses of multiple shadows…when supported (much like Ralph’s suggestion, I just used different math for the sake of control). The markup is clean , but the the CSS control is difficult and the best output you can get is a kind of “rounded at the corner” effect; sometimes that’s what you what, tho.

The second makes the CSS much simpler… and allows you to use the original shadow attributes, support browsers that only allow one box-shadow. The downside is that you need an extra div ( just one) to make it work. The idea is, basically , that I clip-off the part of the shadow I don’t want to see using the wrapper div and overflow:hidden. You can have a shadow on any one side, two or three sides. For this example , I have used the left and right side as you had requested.


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Shadow Play</title>
	
<style type="text/css" media="all">
h1, h2, .fh{ margin:0 auto;width:400px;}
div.fh{min-height:200px; background:pink; }


/*shadow method1*/
.shadow { width: 400px; height: 400px; 
box-shadow: 6px 0 4px  -4px #222 , -6px 0 4px  -4px #222;   
-moz-box-shadow: 6px 0 4px  -4px #222, -6px 0 4px  -4px #222;   
-webkit-box-shadow: 6px 0 4px  -4px #222, -6px 0 4px  -4px #222;   
}

/*shadow method2*/
.shadclip{overflow:hidden;padding:0 6px;}
.shadclip .shadow{ width: 400px; height: 400px; 
box-shadow:0 3px  3px 6px 2px #000;   
-moz-box-shadow:0 3px 6px 2px#000;   
-webkit-box-shadow:0 3px 6px  2px #000;   
}

</style>
	
</head>
<body>
<h1>Shadows on select sides sides</h1>
<h2>method1</h2>
<div class="shadow fh">your content</div>
<h2>method2</h2>
<div class="shadclip">
	<div class="shadow fh">your content</div>
</div>
<p class="fh"> follow up content </p>


</body>

</html>
11

Thanks a lot for this thread really. :wink:

I’ve used dresden_phoenix suggestion, but I’ve just this applied to my container:

box-shadow: 6px 0 4px  -4px #222 , -6px 0 4px  -4px #222;

And it worked just fine without any semantic mess.

Of course it will not work on some browsers. And the catch is that some browsers will NOT display the shadows. Buhu. :slight_smile: Either that or have markup garbage.

12

Thanks for the suggestion, guys. I’ll that a gander, oikram.

I just hope in the near future the other browsers will catch up.

13