How To Create Depth And Nice 3D Ribbons Only Using CSS3


In this last period on PV.M Garage we have described many trends of the modern Web Designand many techniques for creating stunning and impressive web sites.
In one of our tutorials we learned how to realize a nice 3D ribbon and how to play with the drop shadow in Photoshop to simulate depth in a web design layout. This is a widespread trends in recent web design: creating a 3D perception in a website and simulating a “world” in three dimensions are two great ways for the designers to play with their skills.
Thanks to useful graphic softwares (2D) we can easily create 3D elements, like ribbons and shadows, but we can also reproduce 3D scene using perspective, focus, color shading and opacity. There is also the possibility of using 3D softwares, like Blender, to create some 3D objects and images that we can use in our designs. There is an interesting article onCreativityDen about the fundamental ways of adding depth in web design works; it explains six basic techniques to simulate the 3D perception in our works and I suggest an attentive reading.
Many beautiful web sites have a wonderful, balanced, three-dimensional perception and it’s clear that this kind of layouts use, in a clever way, images (generally in the background property), lines and some CSS techniques to create the illusion of depth (there is a brilliant post, by Henry Jones on Web Design Ledger, about the use of 1px line to simulate the depth). Some examples.

0 Response to "How To Create Depth And Nice 3D Ribbons Only Using CSS3"