68 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in 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!

3315 posts
  • Provided great contribution to our forums
  • Nominated Community Superstar of the month
  • Helps us moderate the forums
  • Has been part of the Envato Community for over 5 years
+18 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
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 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
  • Has been part of the Envato Community for over 5 years
  • Has collected 100+ items on Envato Market
  • Sells items exclusively on Envato Market
  • Located in 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
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
+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)

1882 posts YOU TOUCH IT YOU BUY IT
  • Has referred 200+ members
  • Has sold $500,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+6 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
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 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
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 50+ items on Envato Market
+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
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+3 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
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 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/

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by