Adobe Dreamweaver CS6 Creating Drop Shadows

Creating Drop Shadows

• Drop shadows are a new feature of CSS3 that can be used right now on our pages
• Drop shadows have previously been available only if using images on a web page
• In order to create a drop shadow effect we had to create an image that contained a drop shadow, and use it as a background image within our web page in order to add a little depth to our web pages
• CSS is now able to add drop shadows automatically, this property is known as the box shadow property
• Like all of our CSS3 properties, we must test in our target browsers in order to confirm that our pages degrade in older browsers so always test in all of your target browsers
• Open drop-shadow.html & preview it in the browser
• To add a drop shadow you apply the box shadow property

   box-shadow:5px 5px 4px rgba(0,0,0,0.65);

• Numbers represent the horizontal offset, vertical offset, optional blur distance and optional spread distance of the shadow
• For browsers that are not yet fully supporting this property, we must add proprietary prefix, this is the same process for all of these CSS3 properties, adding -webkit-, -moz-, -o- or -ms-
• Browsers tend to change weekly, so I always just test instead of worrying about which ones work & which don’t