6

I'm using box shadow CSS feature on images in my gallery, but somehow the inset parameter is not working. I tried z-index and I tried to put in different places code and it's still not working.

Visit the website here.

Code

box-shadow:#000000 0 1px 3px, rgba(255, 255, 255, 0.3) 0 0 0 1px inset, rgba(255, 255, 255, 0.5) 0 1px 0 0 inset;
Is3
  • 63
  • 1
  • 1
  • 4

3 Answers3

11

It has nothing to do with your syntax. It's just a peculiarity of an img element, not the box-shadow property.

Consider looking at this example: http://jsfiddle.net/YhePf/ - if you disable showing images in your browser - you will see that instead of an image there will be a green block with the box-shadow applied to it.

Edit: In other words, the inset box-shadow property is applied but it cannot be seen because it's under the image itself (just like the background-color property). I may prove that with another fiddle. It's different from my previous one in the padding property. See here: http://jsfiddle.net/YhePf/6/ - see the red 2px shadow and the green background

skip405
  • 6,119
  • 2
  • 25
  • 28
1

I think you might just be missing the spread radius value from the first shadow. :)

Blieque
  • 670
  • 7
  • 28
  • I believe the code is correct. Code from generators like: box-shadow: inset 5px 3px 3px 5px #4444; Not working. – Is3 Jul 20 '12 at 17:44
  • Yep, you're right. Sorry. Inner shadows can be applied to `img`s though. Check this out: `http://jsfiddle.net/Mfkj4/`. It might be to do with not having a `display:block` property, but I'm not sure if it's needed. – Blieque Jul 20 '12 at 17:52
  • Yeah, I think Skip405 was right. I think you'd need to add another `div` for the images to sit in. Add the inset shadows to this and then use the `z-index` property to bring it forward. – Blieque Jul 20 '12 at 19:05
  • Also, you could use a table instead of row `div`s. ;) – Blieque Jul 20 '12 at 19:06
1

i think there is a issue because inset box-shadow cant be applied on a image.the effect which you require can be easily achieved with help of border property. if you want to use inset box shadow apply it on div. for more detail chk it out http://jordandobson.com/_expirements/css/vignette/

Manish Sharma
  • 1,670
  • 14
  • 20
  • I believe my code is now applied directly on div class called: "jg_photo". Take a look in firebug etc. – Is3 Jul 20 '12 at 17:48
  • I have already checked that's why i m saying "img.jg_photo" its your class name and its applied on img tag. as class itself defined it can be work only with img tag so so try to apply all your style on div rather then a img tag. hope you understand my point – Manish Sharma Jul 20 '12 at 19:59