Boxshadow inset not working

css insets
Is3 picture Is3 · Jul 20, 2012 · Viewed 8.6k times · Source

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;

Answer

skip405 picture skip405 · Jul 20, 2012

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

Related questions

Create a "inset" effect using CSS in websites

I am very much impressed by the "inset" like effect in many latest websites. Some examples are and The line in the center. Nowadays, many websites use these kinds of lines/effects. I tried to achieve the same with borders …

Read More
How to feather the edges of an image using CSS

I have an unordered list containing 3 list items. Each list item has an image, and 3 divs containing text. I want the edges of the image to be feathered, by using only CSS. My site found here currenly has a feathered …

Read More
Text shadow Inset effect css3

I want the inset effect for the above button. The 'text' cancel appears to be type pressed. I have tried a lot of examples available online but they don't have white background examples. Help me to gain this effect. Thanks …

Read More