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

Add additional box-shadow to an element where existing shadow is unknown

Add additional box-shadow to an element where existing shadow is unknown

Problem

I'm assuming the answer to this question is that it's impossible, but I'm asking anyway in the hopes that someone knows of a clever workaround.

Let's say I have the following class .left-inset that adds a 1px white box-shadow to the left of an element to give it some depth:

.left-inset {
  box-shadow: inset 1px 0 0 rgba(255,255,255,.25);
}

The problem is that if the element I add this class to already has a box-shadow defined, this box-shadow will override that existing one (or this shadow won't be applied depending on the cascade). I want to find a way to safely add this class without conflicts.

I'm hoping there is some future browser support for something like the following:

.left-inset {
  box-shadow: inherit, inherit, inherit, inset 1px 0 0 rgba(255,255,255,.25);
}

Inherit isn't the right word here, because Inherit implies the value from the parent, but you get the idea.

This method, while not full-proof, would at least allow me to know that I'm not conflicting with existing box-shadows unless they define more than three. In most cases, this will be good enough.

Does anyone know whether anything like this is possible, or whether there is a proposed syntax for adding additional shadows to already defined ones?

Problem courtesy of: Philip Walton

Solution

An absolutely positioned pseudo-element (with the original container having position set) seems like the only solution:

See the fiddle. (I did different size/color for visual).

.test:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow:3px 3px rgba(275,0,0,.25);
}
Solution courtesy of: ScottS

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

Add additional box-shadow to an element where existing shadow is unknown

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×