Question

I want to create an item (a link) that will have inner shadows on both sides (left and right) and the rest of the item will be transparent.

It should look something like this:

The point is I don’t know how wide my link will be so I need something like:

background: url(left-shadow) left center;
background: url(right-shadow) right center;

But for one element. Any ideas how to achieve that?

You guys are totally right about multiple backgrounds, but they’re not supported even in IE8:

http://www.quirksmode.org/css/multiple_backgrounds.html

So maybe something else? I forgot to mention that I want my solution to be working at least in IE8 (and would be perfect to see it working in IE7 also).

Answer 1

You are going to want to use the css “Sliding Doors” it adds a bit of markup overhead but will work nicely for this scenario until the CSS3 multiple background stuff becomes more widely supported.

You can read up on it here: A List Apart “Sliding Doors” technique