CSS3 box-shadow property: use CSS to liven up your web images!
bobleah 270000CN12 Comments (11) Visits (50513)
By casting a drop shadow from a image, you can add dimension without the need to create specialized web images. Let’s explore how to create a basic outer shadow, and then dive into a neat trick on defining a deep shadow that can really liven up a flat web image.
Start with an image:
The first thing you will need is an image without any borders, as we will be applying our own border using CSS. Wrap the image within a <div> element, which we will later apply our style classes against.
Create the border:
First we create a basic box shadow class. This class will provide a nice outline around the image, and begins to give us the three dimensional look we are after. You can adjust the size of the shadow border around the image by adding additional pixels to the box-shadow element properties.
Create the deep shadow:
Next we create a deep shadow class for our image. This enhanced shadow will give us the deep three dimensional look we are after. We do this by creating a separate CSS class and applying it to our image <div> element. Yes, the shadow is over the image, but we will correct the CSS in the next step.
Adjust your z-order:
Finally, we change the z-order of the deep shadow CSS class, to position it behind our original image. This completes the look we are after. As you can see, we have given our original flat image a three dimensional look and feel, by simply applying CSS classes to the <div> element containing our original image.
Apply the CSS to the <div> element:
Now all you need to do is apply your css-box-shadow and css-deep-shadow classes to the <div> element that wraps your original flat image as follows: