Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Creating Drop Shadows

  • We are going to take a look at drop shadows, a new feature of CSS3 that can be used right now on our pages
  • A drop shadow In CSS3 is known as the text-shadow property
  • 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 to page elements using the CSS property of box shadow
  • 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 css3-properties.html which contains 3 different boxes on the page
  • Dreamweaver CC now has full support for the box-shadow property
    • Select #drop shadow and move to the background icon in the Properties area of CSS Designer
    • You can modify styles in CSS Designer with Live View turned on and view CSS changes directly within Live View as you modify the properties
    • The box-shadow property is expected to also support multiple drop shadows (outer or inner) on box elements but that is not something you want to try and use yet due to lack of browser support
  • Test in the browsers and see which ones work
  • Those that do not , we must add the proprietary code, this is the same process for all of these CSS3 properties
  • Browsers tend to change weekly, so I always just test instead of worrying about which ones work and which don’t
  • Add proprietary code for any browsers that do not support this feature
  • The proprietary-css.html file has coding for very old IE browsers so the drop shadow can be available even back in older IE browsers

Creating Drop Shadows

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • CSS3 Properties in Live View 0:57
    • CSS3 Properties in Browser
  • Styles 1:19
    • Drop Shadow ID
    • Background Color
    • Background Image
  • Box Shadow Property 2:04
    • Adjust in Live Button
    • h-Shadow, v-shadow, blur
    • Preview in Browsers
  • Applying MS Filter 5:45
    • Copy/ Paste
  • Modifying Offsets 7:00