Unmanaged CSS Box Shadow Pseudo-Element

Question

I am working on a new layout for a website and I am very close to achieving the result I want. However, there is one problem. I use an adaptation of the technique described here ( http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/demo/backgrounds.html , see Example 3 of the column just below the gorillas). Basically, my version uses an absolutely positioned CSS pseudo-element as the background for the left column.

My problem arises when I try to apply box-shadow to a pseudo-element. An element and its shadow always appear on top of my main column.

To make it all clearer, I created a simple example here: http://www.3strandsmarketing.com/test4.html

I am afraid that since I am using a pseudo-element based on the parent of my main column, it will never be able to sit under it, but I hope that it will be possible to work with it. Any ideas?

Answer 1

So, the solution here is to not use translucent (rgba) colors for the main column. Otherwise, you can see the shadow of the sidebar column through it, destroying the effect of one of them on top of the other.

To see the correct effect, go to the example page and use Firebug or another DOM tool to change the background color for the #main-content div from rgba(0, 100, 0, 0.2) to rgba(0, 100, 0, 1) . You should now see that this is truly the “top” of the left panel.