CSS3 drop-shadow example for submenus

CSS3 Drop Shadow

The drop-shadow parameter in CSS3 is a step beyond regular box shadow feature, which allows producing truly outstanding graphics for websites. There are countless possible uses for CSS3 drop shadow feature, starting with sub-menus of navigation bars that drop a shadow on the website’s ‘surface’ when rolled out and up to advanced and really stylish things like page curls.

Before the introduction of CSS3, these effects had to be achieved by separately creating an image with software like Photoshop, storing it on the server and applying as a regular CSS background. While it was effective in reaching the goal of displaying shadows beneath rectangular and other kinds of shapes on websites, it was not very efficient at it.

The image produced with Photoshop may have looked well at first, but when some changes had to be made to the website and image had to be resized, rearranged or its shape modified, there was no easy way of doing so. Web designers had to go back to Photoshop and recreate the shadow effect for another size or shape almost from scratch.

With the rise of CSS3, however, everything has become much easier. CSS3 shadow can be applied with a few lines of code and every aspect of it can be manipulated, achieving the exact result that a web builder is aiming for.

Color, direction, strength, transparency, size, area, all of these variables can be modified before and web page is published online. When compared to the dark days of creating shadow effects for web through Photoshop images, effects produced by CSS3 drop shadow parameter come as a true blessing.

There are several reasons for wanting to create shadow effects within a website. Everything that browsers render on the screen is inherently two-dimensional. Except for online browser-based games built in plugins like Java and Adobe Flash, there are few successful examples of sites on the Internet being designed in a full three-dimensional format. Most attempts at building 3D interfaces for websites have failed to attract visitor attention that would be worth the effort of doing so.

On the other hand, Internet users are fond of looking at websites where the presence of a 3D world is hinted at, ever so slightly. Shadows are one of those things that create an illusion of three-dimensional images and keep site visitors engaged, without disrupting the flow of the flat 2D content. When used correctly, letters and boxes that ‘drop shadows’ seem to pop out from the screen, convey a good sense of style and look very professional.

The wide range of additional variables and extra parameters allow CSS3 shadows to achieve the exact goals that web designers would want to be achieved, almost at the level of freedom that Photoshop provides. People may not be able to create a three-dimensional likeness of the Statue of Liberty that drops shadows into three different directions with varying levels of intensity (barely), but as far as those cool-looking page curls and levitating sub-menus go, CSS3 shadow parameter will do the trick.