68 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • 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!

2965 posts
  • Football Contest Participant/Runner-up
  • Australia
  • Community Moderator
  • Elite Author
  • Author had a Free File of the Month
  • Most Wanted Bounty Winner
  • Author had a File in an Envato Bundle
  • Has been a member for 5-6 years
  • Contributed a Blog Post
+11 more
dtbaker Volunteer 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
  • Bought between 10 and 49 items
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
_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
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • 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
  • Bought between 50 and 99 items
  • Denmark
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 10 and 49 users
  • Sold between 1 000 and 5 000 dollars
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)

1865 posts YOU TOUCH IT YOU BUY IT
  • Bought between 100 and 499 items
  • Referred between 200 and 499 users
  • Has been a member for 5-6 years
  • Won a Competition
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
+1 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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
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
  • Bought between 50 and 99 items
  • Denmark
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 10 and 49 users
  • Sold between 1 000 and 5 000 dollars
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
  • Bought between 10 and 49 items
  • Contributed a Blog Post
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
_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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Italy
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
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