[Solved] Giving images 3D depth/dimension

[modiophile]

I am trying to give an image I have some depth and dimension via img { box-shadow: 5px 5px 0px 0px #ccc; }

The problem is that it simply looks like a flat plane with a shadow instead of a 10px thick block. Is there an easy way so that the corners don’t appear to have a gap and are closed, like a single block. Thanks!

http://codepen.io/modiophile/pen/PwvaOZ

[Paulie_D]

You’d have to use multiple box-shadows in 1px increments.

I’ve used 2px here but you get the idea.

http://codepen.io/Paulie-D/pen/yyWEjp

[Shikkediel]

Answer revoked – Paulie’s is much better.

[Paulie_D]

Means you can make them appear like stacks of images too..that also respect border-radius!

http://codepen.io/Paulie-D/pen/YPbvjz

[modiophile]

Thanks Paulie_D, easy solution. I thought I would have to be dealing with :after, :before pseudo classes and border-widths, phew.

[modiophile]

The thread is solved, but I wanted to see if I can take it a step further.. I know I’ve seen this functionality before where you hover over an object and it very subtlety moves depending on your cursor movement. If anybody can point me to this effect, I’d appreciate it. Thanks!

[Author]

Posts