Tutorial 3D Inset Effect by CSS3
People love to make flat things appear as if they're
three-dimensional. There are two ways to pull off this effect in a 2D
environment, shape and movement.
By give a flat shape the appearance of edges or sides, we can make
buttons or other objects appear as if they are raised or sunken into the
screen.
The first method, shape, works because it makes things appear to be
popping out, or pushed away from you. The second method, movement, works
because it makes things seem as if they are positioned in context with
each other. But, what if we combined them. An object that looks sunken
into the screen, like a shelf, and its edges shrink and grow, using the
parallax effect, making the object appear as if it really is in 3D
space.
First we need to add some markup on our page and give the items we want to affect the class of inset. Any block level elements will do. Here is a simple form with inputs that will have the effect applied.
