Using both inset and outer box shadows?

Envato Authors Graphics Authors
1

Is it possible to use the box shadow property with an inset as well as an outer shadow? If so, how do you string it together properly?

I’ve tried a couple different ideas with no luck. Using the property twice obviously cancels out the previous box shadow property.

I’m trying to style up some input fields using a inset shadow and an outer shadow (giving both shadows to same element).

Any help is greatly appreciated. I searched a bit but couldn’t find anything on using both shadows together.

Thank you!

2

Could you wrap a or around each input box you wish to style?
Even with jQuery after the page loads if you’re looking to have clean html.
Apply the outer shadow to the label/span and inner shadow to the input box.

3

here, I did it for you:

The weird green and blue shadows are there for you to figure out the visual difference.

Only works in Firefox, since I’m using -moz, not -webkit.

4

Thank Rohan!

You should leave that up! No doubt someone else will be looking for that, how about a mini tutorial on it? I couldn’t find anything describing how to do it anywhere searching! Great work!

5

What about box-shadow: 0 0 10px #000, inset 0 0 10px #000;

Does that work? (of course you need the -webkit and -moz as well)

6

The last solution from Jay should be OK, I am used to use that one, you can have unlimited parameters this way.

But there are some downsides of using multiple css3 properties in general, for instance with rounded corners – see example what happens in most chrome installations here http://code.google.com/p/chromium/issues/detail?id=25334 so keep it in mind while testing.

7
What about box-shadow: 0 0 10px #000, inset 0 0 10px #000;

Does that work? (of course you need the -webkit and -moz as well)

This works without all the extra markup from above.

http://jsbin.com/orofo3/3

8
The last solution from Jay should be OK, I am used to use that one, you can have unlimited parameters this way.

But there are some downsides of using multiple css3 properties in general, for instance with rounded corners – see example what happens in most chrome installations here http://code.google.com/p/chromium/issues/detail?id=25334 so keep it in mind while testing.

Yeah. It really sucks that you can’t use inset border when there’s border-radius :frowning:

Hope they fix that soon

9
Thank Rohan!

You should leave that up! No doubt someone else will be looking for that, how about a mini tutorial on it? I couldn’t find anything describing how to do it anywhere searching! Great work!

Hey, you should probably use jayjdk’s solution unless you’re using border-radius.

What I did:

I added an empty span to the outer container. The outer container is relative positioned, and the span is absolutely positioned inside, width a width and height of 100%. Then since the span and the container are now of the same dimensions, you can apply outset to one, and inset to the other. Problem solved :slight_smile:

10
Yeah. It really sucks that you can't use inset border when there's border-radius :(

Hope they fix that soon

Here is a solution:

http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/

11

Virtually the same question as I asked earlier but with different people answering. Go figure …