cssdropshadow

css3 multiple shadows from different rules

Is it possible for css3 multiple shadows to be accumilated from different css rules / classes ?

i.e.

.multipleShadows {box-shadow: 0 0 10px 5px black, 40px -30px lime}

will create two shadows for the element, black and lime.

but I want to have two different classes - one for blackShadow and one for limeShadow

.blackShadow {box-shadow: 0 0 10px 5px black}
.limeShadow {box-shadow: 40px -30px lime}

and have both applied to a single element that has both classes.

<div class="blackShadow limeShadow">my div</div>

Can this be done? Are there alternate ways that can achieve this goal?

Thanks.

Solution

  • I ended up using an extra div placed inside the original div and applied the second shadow class to the internal div.

    <div class="blackShadow"><div class="limeShadow"> my div</div></div>

    This was chosen becuase it keeps the definitions of the shadow classes separate and still allows me to show both the shadows at the same time.