CSS drop shadow – left and right only?

@a_g_r_cMay 31.2007

Hi guys,

Have been looking around the web in search of a tutorial to apply a drop shadow to either side of a container. Left and right only to be specific. The page in question is ~~[URL=”http://2shades.net”]~~2shades.net[/URL] and the css can be located ~~[URL=”http://2shades.net/downloads/style.css”]~~here[/URL].

A comment encapsulated with lots of asterisks is where the offending container lyes. It is also named .content

I read around and could only find tutorials that apply an angled drop shadow using pngs.

If any one could help with this is would be greatly appreciated and if I can reciprocate any help given in an appropriate manner I would do so happily.

I’m sure it’s just something simple like attaching the image to the border-left and border-right attributes I just can’t get it working.

Thanking you in advance

a.g.r.c

to post a comment

CSS

12 Comments(s) _↴

@ryanbutlerMay 31.2007 — #If you assigned a repeating wrapper image on the content class and applied a left & right drop shadow to that image, then it would work.

Something like this?

http://midwestwebdesign.net/med390/

@a_g_r_cauthorMay 31.2007 — #Exactly like that...

But seriously struggling with the code for this.... I really only have worked with text formatting etc in css. Could you give me a snippet that could be applied please?

Would be brilliant.

Cheers Ryan

a.g.r.c

p.s. nice site!

@ryanbutlerMay 31.2007 — #See the attached screen shot. Basically, you create a wrapper image which spans both your columns. Then at the left & right edges, you apply a drop shadow. Export your wrapper image and you're set.

I didn't look at your CSS file in-depth but make sure if you're using a fixed width layout that your math equals the total width of your wrapper, whatever that happens to be.

Then the CSS is:

[CODE].content{
 background-image:url(wrapper.jpg);
 background-repeat:repeat-y;
 }[/CODE]

Then continue with the rest of your CSS.

[upl-file uuid=8a264ed5-cf57-48db-89f8-bc6484a100ad size=53kB]wrapper.jpg[/upl-file]

@a_g_r_cauthorMay 31.2007 — #Excellent,

That makes it a whole lot clearer... i'll give it a go.

Cheers again.

a.g.r.c

@a_g_r_cauthorMay 31.2007 — #This isn't working...

.content {

background: #101010;

background-image:url(/images/shadow.gif);

background-repeat:repeat-y;

color:none;

margin: 0 auto;

padding: 0;

width: 800px;

}

Sorry to be such a noob!

Thank you

a.g.r.c

@ryanbutlerJun 01.2007 — #On your current live copy, you're missing the background image. Do you have an updated version?

@a_g_r_cauthorJun 01.2007 — #Hi again Ryan,

I tried adding the code above to the stylesheet and it bolloxed the design completely - took away the content background and displayed it off to the side.

The image loaded okie but only displayed on the left hand side and with all the other problems - didnt look at all good.

Any suggestions.

Thanks for your consistency.

a.g.r.c

@timdentyJun 01.2007 — #Hi - just read this thread - sounded interesting:

The margin: 0 auto; messes up in IE, so you'll need to put this into the body style...

body {

text-align: center;

}

Then, you need to take the text-align back to left for .content, otherwise all elements will inherit the above style...

.content {

background: #101010 url(/images/shadow.gif) 0 0 repeat-y;

margin: 0 auto;

width: 800px;

padding: 0;

text-align: left;

}

ps. I Don't think none is a valid value for the color.

Hope this helps

@CentauriJun 01.2007 — #The margin: 0 auto; messes up in IE[/QUOTE]

If you use a [B]complete[/B] and [B]valid[/B] doctype (and you [B]SHOULD ALWAYS[/B] do so), then IE handles the proper auto margin centering just fine. Text-align is only for text and inline elements.

@CentauriJun 01.2007 — #a.g.r.c., attached here is an image I quickly did up which does the shadows, coloured borders and background colour for content div all in one hit. Change the content class css to this :

[CODE].content {
 color:#a3b2ba;
 margin: 0 auto;
 padding: 0 11px;
 width: 800px;
 background-image: url(images/shadow_back.png);
 background-repeat: repeat-y;
 }[/CODE]

[upl-file uuid=6d802747-b5ae-4e48-a82d-e27791b66aa8 size=301B]shadow_back.png[/upl-file]

@a_g_r_cauthorJun 01.2007 — #Thank you guys for all your efforts - appreciated massively.

Thanks Centauri for the final code, it worked a treat... was onto something similar. So it was the text align that was throwing it off.

Seriously Loving dev - it's an amazing community.

Cheers again guys - any favour i might return, just give me a shout.

a.g.r.c?

@watsonsimlerJan 29.2015 — #try this...

.leftandright

{

width:350px;height:200px;

border: solid 1px #555;

background-color: #eed;

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

-moz-box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

-webkit-box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

-o-box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

}

More about...CSS Shadow

Watson

Also in #CSS _↴

Problems with background image for li tag in Explorer Border-top not displaying in IE for tabbed menu FORM layout

Success!

Help @a_g_r_c spread the word by sharing this article on Twitter...

Tweet This

CSS drop shadow – left and right only?

12 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS drop shadow – left and right only?

12 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #CSS _↴