Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

css3 multiple shadows from different rules

css3 multiple shadows from different rules

Problem

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.

my div

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

Thanks.

Problem courtesy of: epeleg

Solution

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

my 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.

Solution courtesy of: epeleg

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

css3 multiple shadows from different rules

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×