3D Box Shadows
January 7th 2011Ever thought about creating 3D elements with only CSS? Well then, take a look at this (not so pretty) piece of code.
-webkit-box-shadow: 1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
-moz-box-shadow: 1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
-ms-box-shadow: 1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
-o-box-shadow: 1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
box-shadow: 1px -1px 0 rgb(11,91,173), 2px -2px 0 rgb(11,91,173),0 -1px 0 rgb(11,91,173), 0 -2px 0 rgb(11,91,173);
The values have the same positioning as your everyday box shadow. Just repeat it to create multiple shadows.