Two divs with shadows looks like one part. Is it possible in CSS?

Question

I have two divs next to the each other which background color is white. http://jsfiddle.net/J5ZXt/ is link to code. I want that two divs look like one element, so I need to remove a part of shadow. Any ideas?

@Vukasin, I've posted another answer that doesn't have a gap or rely on a static height for `#one`. — 0b10011, May 16 '12 at 19:53

0b10011 · Answer 1 · 2017-04-28T15:22:58.877

Yes, it is possible. Simply cover it up with :before:

/* Add relative positioning */
#two {
  position:relative;
}
/* Add :before element to cover up shadow */
#two:before {
  background:white;
  display:block;
  content:".";
  font-size:0;
  width:4px;
  height:100px;
  position:absolute;
  left:-4px;
  top:0;
}

/* Existing styles */
#one {
  width: 100px;
  height: 100px;
  background: #FFF;
  -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  float:left;
}
#two {
  width: 100px;
  height: 300px;
  background: #FFF;
  -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
  float:left;
}

<div id="one"></div>
<div id="two"></div>

nealio82 · Accepted Answer · 2012-05-16T22:05:56.147

6

This is the best I could get within a couple of minutes, I think it does the job. The best thing is its simplicity (only 3 edits to your css)

Position D1's shadow so the right edge has a negative value (-4px is enough to hide it)

Give both divs relative positioning so we can control their stacking order.

Give D1 a higher z-index than D2 so it masks the top part of D2's shadow.

#one {
    width: 100px;
    height: 100px;
    background: #FFF;
    -moz-box-shadow: -4px 0 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: -4px 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: -4px 0px 3px 1px rgba(0,0,0,0.3);
    float:left;
    position: relative;
    z-index: 20;
}
#two {
    width: 100px;
    height: 300px;
    background: #FFF;
    -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    float:left;
    z-index: 5;
    position: relative;
}

edited May 16 '12 at 22:05

answered May 16 '12 at 19:16

nealio82

2,611
1
17
19

2

This answer is the best for non-pixel heights for div #one! Thanks a lot. – Vukašin Manojlović May 16 '12 at 19:30
1

There are two issues with this answer. The first, and pretty trivial (and easily fixable), issue is the `box-shadow`s specified are different from eachother. Secondly, there is a gap between the shadows (in the corner, between them), and a larger shadow on the left side of `#one`. – 0b10011 May 16 '12 at 19:31
Sorry, I was in a rush to go out and forgot to edit the vendor-specific CSS. Have now edited my post. However, it still doesn't rely on trying to put something 'over the top' - a last resort in my opinion and only to be used when absolutely necessary: http://stackoverflow.com/questions/4015263/css-text-underlining-too-long-when-letter-spacing-is-applied. Also, by adjusting the shadows I'm certain it can be made to render perfectly. As I say, I was in a rush to leave the house so just posted a proof of concept to get started with ;) – nealio82 May 16 '12 at 22:10

jacktheripper · Answer 3 · 2012-05-16T19:20:40.773

2

Pure CSS - no

You could always try absolutely position a div above it, as in this example

The ::before solution does not work in all browsers

edited May 16 '12 at 19:20

answered May 16 '12 at 19:11

jacktheripper

13,953
12
57
93

1

+1 beat me to it! As @HeitorChang calls it, **Masking tape** :) – Mathew Thompson May 16 '12 at 19:14
3

@jacktheripper, `:before` and `:after` have better browser support than `box-shadow` (i.e. browsers that support `box-shadow` most likely support `:before` and `:after`, but not vice-versa). – 0b10011 May 16 '12 at 19:52

score 2 · Answer 4 · edited May 23 '17 at 12:09

Because I hate to be outdone and tend to be a perfectionist, I came up with an answer that doesn't rely on a specific height for #one--it just has to be shorter than #two (which is also the case for the currently accepted answer). It also does not have the downside of a gap or larger shadow on one side of #one.

Note: This answer also gives the possibility for a curved corner via border-radius. Simply add border-radius:4px; to #one:after to see the result.

jsFiddle Example

New CSS

<style type="text/css">
#one {
    width: 100px;
    height: 200px;
    background: #fff;
    float:left;
    position:relative;
    overflow:hidden;
}
#one:after {
    display:block;
    content:".";
    font-size:0;
    color:transparent;
    height:8px;
    width:100%;
    padding-left:4px;
    position:absolute;
    bottom:-4px;
    left:-4px;
    background:#fff;
    z-index:2;
    -moz-box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 3px 1px rgba(0,0,0,0.3);
}
#two {
    width: 100px;
    height: 300px;
    background: #FFF;
    -moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    box-shadow: 0 0 3px 1px rgba(0,0,0,0.3);
    float:left;
}
</style>

Two divs with shadows looks like one part. Is it possible in CSS?

4 Answers4

New CSS

Linked