CODEWITHSUNDEEP
jquerycss
fildred13
fildred13

Reputation: 2350

How to cast a box shadow only on certain elements

Is it possible to cast a box-shadow from a div, but to not allow the shadow to cast ONTO certain other divs?

Thought of another way: is it possible to exclude a certain div from having shadows drawn ON it?

For a concrete example: http://jsfiddle.net/Cd6fE/

How can I make the shadow cast by .p1 NOT be cast on .noShadowsOnMePlease but continue to cast it's shadow on the OTHER divs?

I'm completely open to using js/jquery if that is the only solution, but who doesn't want to do this with pure css, amiright?

Solution: Basically, no, but you can fake it if the shadow is static. Also, css masking would probably work, if you're on the cutting edge. Browser support would likely be spotty as of Jan 2014. Best solutions without css masking: http://jsfiddle.net/zExS9/ - uses :before selector to create invisble shadow pieces, then hides overflow.

Really makes you long for an accepts-shadows: false; attribute, doesn't it?

Upvotes: 0

Views: 1381

Answers (4)

DaniP
DaniP

Reputation: 38252

This solution can apply on your work, try with some pseudo-selector like :after like this:

.p2:before, .p3:before, .p4:before {
  display:block;
  content:" ";
  position:absolute;
  width:15px;
  height:15px;
  box-shadow: 0px 0px 5px 5px#000;
  background:black;
}

Check this Demo Fiddle

Upvotes: 1

codeaddict
codeaddict

Reputation: 879

You could use z-index to position the elements over the element that is casting a shadow. That way the shadow will be underneath the element, and not visible.

Here is an Updated Fiddle

Only the third box .p3 has a shadow on it.

Edit -- Instead you could use the box shadow with inset and cast shadows inside of the divs.. Here is another fiddle of that example, you will need to adjust the position of the shadows, I just did this quick to show you.

You will want to add vendor prefixes to the box-shadow as well, -moz-, -webkit-, -o-

Upvotes: 0

JMG
JMG

Reputation: 163

There's ways to fake it, but actually stopping it from rendering I think you are SOL

The easiest way is turn the shadow blue, then it looks like its not rendering on the background

Upvotes: 0

enguerranws
enguerranws

Reputation: 8233

I'm afraid the answer is: no, you can't.

The best I could do: http://jsfiddle.net/Cd6fE/5/

You can put your .p1 a transparent background : it will draw a transparent shape on the shadow. It's all you can do I think.

Then I hide the last shadow parts with blue pseudo elements.

Upvotes: 1

Related Questions