Css - shadow overlays other elements

Question

I have few div and each of them has a shadow, but the shadow of a div always overlays the next div.

here is my code: html:

<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>

css:

div {
  background-color:white;
  text-align:center;
  box-shadow: 0 0 3px 5px black;
}

fiddle : https://jsfiddle.net/81t4v4a5/

I want to accomplish something like that but without a container : https://jsfiddle.net/kc98heaw/

Is that possible?

It is unclear what you are trying to achieve. Why are you averse to using a container when containers are a big part of the box model? Why are each line of text in their own div if you only want the style on a single parent div? Is the second fiddle you linked the version you want? — leigero, Aug 15 '16 at 17:55
the second link is what I want to achieve without using a contaienr since there are some other behaviors I want to apply that cant be done if all of the divs are wrapped in a container — Golan Kiviti, Aug 15 '16 at 17:56

score 1 · Answer 1 · edited Aug 15 '16 at 18:51

1

is this what you're looking for?

fiddle: https://jsfiddle.net/y6097xso/

I tried to iterate through all divs and draw the shadow with an expression:

div {
  background-color:white;
  text-align:center;
  box-shadow: 0 0 3px 5px black;
}
div:nth-child(2n){
  position: relative;
  box-shadow: 9px 0 4px -4px black, -9px 0 4px -4px black;
}

<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>
<div>
Some Text
</div>

edited Aug 15 '16 at 18:51

leigero

3,233
12
42
63

answered Aug 15 '16 at 18:13

carlosdevpereira

11
3

Almost, it doesnt look quite right with the shadows of the second child, can you expain what you did there? – Golan Kiviti Aug 15 '16 at 18:26
Yeah sorry, i messed up a little in the shadows, is this one better? – carlosdevpereira Aug 15 '16 at 18:39
You should update your answer with the fixed JSFiddle and code, not just put that in the comments. Users in the future should see the actual answer contained within the answer block. – leigero Aug 15 '16 at 18:50
sorry, its my first time using stack overflow and answering a question :p – carlosdevpereira Aug 15 '16 at 18:53
It still isnt quite right, im looking for it to be perfect, and can you explain what you did there? I want to understand it – Golan Kiviti Aug 15 '16 at 19:21

Css - shadow overlays other elements

1 Answers1