Question

I’ve been researching on drop-shadow-effect technique for web design.
So, I would like to apply the technique to use implementing a top header bar for my website.

From my findings, the one that people out there use the most is box-shadow css property.
I’d like to know if this is the most effective yet simple way to achieve the desired outcome or not. any other options available for me to implement the same as well as their pros and cons?

any advice would be very much appreciated?

Answer 1

Simplest way is Photoshop 🙂

Otherwise, read on: http://www.css3.info/preview/box-shadow/

box-shadow is a CSS3 property, meaning it’s not available in < IE9, and not natively available in most browsers, hence the proprietary prefixes:

Sample CSS code for IE drop shadow:

filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000',direction='120',strength='20');

CSS3 version:

element {
    -moz-box-shadow: 10px 10px 5px #888;
    -webkit-box-shadow: 10px 10px 5px #888;
    -o-box-shadow: 10px 10px 5px #888;
    -khtml-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;
}