Member Avatar for mgn2683

I need to add a shadow to the right and left sides of my main content area. Any ideas how to accomplish this with cross browser and mobile compatibility?

Site can be viewed at:

One more thing..I'm also trying to get the little strip above the blue bar in main content area to be transparent...ultimately there will be an image behind it. Is there a way using CSS to do this? Thanks in advance!

  • 7 Contributors
  • 6 Replies
  • 306 Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by mattster

Dani AI

Generated

Brief summary and practical options (modern + legacy):

Several replies correctly push CSS3 for modern browsers. and are right that CSS is the cleanest route today; is also right to point out the visual control you get with images and that the “white strip” is caused by header padding/background filling the padded area. Two practical, cross-browser-friendly approaches follow — one using CSS pseudo-elements (recommended for precise left/right-only shadows), and a quick box-shadow pattern that limits shadow to the sides. A tiny note on the transparent strip is included at the end.

Pseudo-element gradient (recommended — avoids top/bottom shadows)
This draws fading shadows on the left and right without adding a top shadow and keeps the markup untouched. The pseudo-elements sit outside the container so the shadow can overlap a patterned body background.

.container {
  position: relative;
  z-index: 0;
  background: #fff;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 1;
}

.container::before { left: -48px; background: linear-gradient(to right, rgba(0,0,0,0.35), rgba(0,0,0,0)); }
.container::after  { right: -48px; background: linear-gradient(to left,  rgba(0,0,0,0.35), rgba(0,0,0,0)); }

Box-shadow alternative (simple, single-rule)
If a single-rule solution is preferred, multiple shadows can be used to create only left/right shading:

.main {
  box-shadow: -18px 0 30px -12px rgba(0,0,0,0.45),
               18px 0 30px -12px rgba(0,0,0,0.45);
}

Transparent strip above nav (why it’s white and how to fix)
The white strip is the header’s background showing through its padding. Make the header background transparent and move the spacing so the underlying page background shows through. Example:

#header { padding-bottom: 0; background: transparent; }
#container { margin-top: 10px; }

Extra notes and troubleshooting

  • For legacy browsers (very old IE), fall back to 1) small PNG shadow images placed in wrapper elements or 2) a background image on the body. ’s image approach is the safest for those cases.
  • Watch z-index and stacking contexts so pseudo-elements sit above the background but under interactive content.
  • Use pointer-events: none on decorative layers so they don’t block clicks on links.
  • Test on mobile (shadows are cheap CSS; gradients avoid extra HTTP requests) and verify the page background is on the body/container that lives behind the header.

Recommended Answers

All 6 Replies

Member Avatar for reco21

You could use box-shadow. Will work for all current browsers. css3.
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Though I would use images. Images will work on any browser. One way would be to edit the body background in photoshop and find the right spots then add the shadow.

Another way would be to split your main div into three divs and add bg image in css for the left and right div. These images would be transparent shadows or shadows on same bg color as you need. You could let it fade to white as you go down the page or you could use a repeating shadow image. They are your oats.

commented: Good suggestion to go for images +4
Member Avatar for EvolutionFallen

Agreed, I'd go with a background image, especially since you're already using a fixed width so you know just how wide the image has to be. Notice how when you use box-shadow you get the shadow along the top as well -- you probably don't want that. You have to play with the numbers a bunch to make it look OK.
As for the strip above your nav bar, it's coming from the padding-bottom for your #header div. The white color comes from the background color of that div, which is what gets filled in wherever there is padding. You can either change the background color for that div, or remove the padding and then add padding-top: 10px; to your #container div

Member Avatar for NetJunkie

You could simply use the CSS3 code below:

div
{
    box-shadow: 1px 1px 1px black;
}

Of course you can change the pixels as well as the color. Hope this helps!

Member Avatar for John_66

css3 is the best method

Member Avatar for mattster

Strongly advise to use CSS3, as it is very commonly supported (enough for Facebook and Twitter) and works like a dream.

Also much faster load times, less file space and less bandwith.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.