2

I have two elements that are positioned so their sides touch. They have different dimension/size on the touching side. Both of them need to have a shadow underneath.

The problem is that one of the shadows is always overlaying its sibling element. I can play with z-index but that just means that I will select which of the two will be overlaid by sibling's shadow.

It would be great if one could add a shadow to a group of elements in which case shadow would be rendered behind the group without any element interference and regardless of their z-index vertical ordering.

Is it possible to achieve a similar effect in CCS3 without resorting to shadow images?

Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404

4 Answers4

2

Maybe use a 

div:after {

pseudo element

http://jsfiddle.net/2P964/

bit of a mug method but it works :)

user1525612
  • 1,864
  • 1
  • 21
  • 33
  • changed it a bit to make it a bit clearer. http://jsfiddle.net/2P964/1/ just need to play around with the :after selector a bit to cover the shadow – user1525612 Sep 04 '13 at 00:01
  • That's a very interesting approach that did point me in the right direction. [This JSFiddle](http://jsfiddle.net/uyEBJ/) shows a more real example that I'm using. DIVs are nested. But basically I was able to make it using your technique. **Very slick indeed.** – Robert Koritnik Sep 04 '13 at 00:02
0

I have created a demo, as per my understanding of your issue. Write in comments if something is wrong! Demo Link

KKS
  • 3,600
  • 1
  • 27
  • 54
  • @RobertKoritnik I have updated the shadow to different colour to be visible. – KKS Sep 03 '13 at 23:30
  • Ok so you've added a container of both elements and put a shadow on the container. That's fine if both elements have the same dimension on the touching side as they still occupy a rectangular shape when grouped. The problem is that my elements have different sizes on the touching side like [this demo](http://codepen.io/anon/pen/sIAvm). (I've updated my question accordingly). – Robert Koritnik Sep 03 '13 at 23:33
  • @RobertKoritnik can you try the same demo link again and see if I am going in the right direction. – KKS Sep 03 '13 at 23:43
  • You are, as you've set different sizes to both DIVs. Now you'll have to create a shadow on both so that none of them is overlapped by any shadow. – Robert Koritnik Sep 03 '13 at 23:48
  • @RobertKoritnik when u say shadow on both, do you want right, left and top shadows for the divs or only right and left? – KKS Sep 03 '13 at 23:51
  • @RobertKoritnik I have updated the demo, please check it as now the divs have top, right, left shadow – KKS Sep 03 '13 at 23:56
  • Shadows should be on all sides as usual shadows. And **especially** on the side where the two elements are touching. – Robert Koritnik Sep 04 '13 at 00:03
0

One alternate way would be using clip:

div {
    display: block;
    box-shadow: 0 0 10px 2px black;
    background-color: #fff;
    background: linear-gradient(180deg, red, white 30px);
}

#one {
    height: 200px;
    width: 200px;
    margin-left: 50px;
    position: relative;
}

#two {
    height: 50px;
    width: 50px;
    margin: 0 0 0 -50px;
    position: absolute;
    clip: rect(-10px, 50px, 100px, -10px);
}

demo

  • Pros: You can use the full extent of the divs (as demontrated by the gradient background)

  • Cons: The div number 2 has to be absolute positioned to work (well, or fixed; but anyway no any position that you want

vals
  • 61,425
  • 11
  • 89
  • 138
  • Interesting. Although there seems to be a sort of a glitch in Chrome as there seems to be a tiny little gap on the top shadow part where elements touch. – Robert Koritnik Sep 05 '13 at 13:44
  • You are right, well spoted. There is a point where the shadow of the #one is going "down", so to speak and the shadow loses continuity. I don't think that it is a problem of Chrome, but a failure in the technique. However, I think that it can be useful in some cincunstances; and probably can be fixed setting an aditional shadow in that direction. – vals Sep 05 '13 at 16:07
  • There's a similar but somewhat inverted *glitch* with accepted solution too. At the same spot as in your case there the shadow is stronger. It becomes more prominent when shadow is darker or when it has higher spread distance. – Robert Koritnik Sep 06 '13 at 05:25
0

If there are pictures inside, why just not to have 4 divs? Two are for shadow, then two are on the top, same coordinates and no shadow, just background-image

Victor Muller
  • 49
  • 4