Showing posts with label 3d border. Show all posts

Tutorial 3D Inset Effect by CSS3

by in , , , 27 Feb 2014 0

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 movement effect is a bit trickier. In a three-dimensional world, objects closer to you move fast, while the ones further away move slow. The further away an object is, the slower it moves. This is called the parallax effect. The parallax effect has been used in all sorts of places for the past few years.
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.

Read more »