68 posts
  • 6 Years of Membership
  • Collector Level 4
  • Exclusive Author
  • United States
jgodbee
says

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!

5441 posts
  • Author Level 11
  • Moderator
  • Winner
  • 6 Years of Membership
+20 more
dtbaker
Moderator
says

Could you wrap a <label /> or <span /> 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.

374 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Collector Level 2
+4 more
_rohan
says

here, I did it for you:

http://jsbin.com/orofo3

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.

68 posts
  • 6 Years of Membership
  • Collector Level 4
  • Exclusive Author
  • United States
jgodbee
says

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!

122 posts
  • 6 Years of Membership
  • Affiliate Level 2
  • Author Level 3
  • Collector Level 3
+2 more
jayjdk
says

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)

1908 posts YOU TOUCH IT YOU BUY IT
  • Top Monthly Author
  • Community Superstar
  • Author Level 11
  • Winner
+10 more
FRESHFACE
says

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.

629 posts
  • 5 Years of Membership
  • Affiliate Level 2
  • Collector Level 2
  • Exclusive Author
+4 more
VagrantRadio
says
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

122 posts
  • 6 Years of Membership
  • Affiliate Level 2
  • Author Level 3
  • Collector Level 3
+2 more
jayjdk
says
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 :(

Hope they fix that soon

374 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Collector Level 2
+4 more
_rohan
says
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 :-)

136 posts
  • 6 Years of Membership
  • Affiliate Level 1
  • Author Level 3
  • Collector Level 2
+3 more
Raspo
says
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/

by
by
by
by
by
by