Im a newbie of css3, although there are a lot of css tool generators outhere, i dont't know how to code this image i provide. Kindly help please??..This will benefit my assignment on one of my major subject. Thanks a lot!
The trick is to use box-shadow
multiple times:
box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px black;
Demo: http://jsfiddle.net/wUgXk/1/
If you're on Google Chrome, open up Inspector, click on one of the values (4px
, for instance) and press your Up and Down keys. You can tweak the values in real time and setup these kinds of effects pretty quickly.