Developing Drop-Shadow and Image Hovering Effects with CSS3

Among the several new and exciting properties of CSS3, the drop-shadow and image-hovering properties are noteworthy. In this tutorial, we would demonstrate the usefulness of these two properties. The drop-shadow property is a new way of adding drop shadow effects just by editing a style sheet, which eliminates the need of Photoshop.

The box-shadow property takes several attributes/values, like any other CSS property. For example, the horizontal offset of the shadow is a positive value for shadows on the right of the box, and a negative value for a shadow on the left of the box. Similarly, for the vertical offset a negative value means the shadow will be on top, a positive one means the shadow will be below the box. For the blur radius, a value of 0 makes the shadow sharp, the higher the number, the more blurred. Finally, the color attribute is pretty much self-explanatory. As a short example, here’s a style sheet rule that will give a 1px border and a grey drop shadow of 5px to right and bottom of an element. The shadow has no blur in this instance:

The box-shadow property can also be implemented by using it for image link hover / mouse over effects. Although there are other uses of it as well but this can be discussed as a good example. In this case, more advanced browsers will see the drop shadow applied but other browsers will see a slightly less decorative effect. To implement this, following declarations can be used:

So with the application of these interesting properties of CSS3, you can considerably enhance the beauty of the images that you add to your web pages.