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!

Working with Gradients

  • We are going to look at adding CSS3 gradient properties to our homepage
  • Gradients can be added to content areas within a web page but they are a bit tricky to make cross browser especially in older Internet Explorer browsers
  • Dreamweaver CC now has interface support for adding gradients to page elements
  • Select #gradients in the Selectors panel on the css-properties.html page to add gradients to the gradient id on the page
  • Click within the color chip in the gradients rule within the background icon in CSS designer
  • The 2 color chips on the left side show the colors being used for the gradient
  • Once you have found the color you want as one of the gradient colors, double click the color stop in the left column and that color will be assigned to that color chip
  • To save the gradient you have made, click the + sign and you will see the chip added in the list
  • Dreamweaver adds proprietary prefixes for you for the various browsers
  • You may not need all of these proprietary prefixes as browsers are being updated every week
  • You can comment out the various prefixes and test within the browsers to see if you still need it
  • If not, you can remove that prefix from your CSS rule
  • It is best to add a background color that matches your gradient colors as that will show if the gradient is not supported in the browser such as older versions of IE
  • Dreamweaver adds rgb colors at this point which IE cannot understand, but you can modify that color and remove the transparency portion so that color can be used as a background color for unsupported browsers

Working with Gradients

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
  • Live View 0:45
    • Gradient ID
  • Background Properties 1:53
    • Background Gradient
    • Gradient Warning Prompt
  • Rgba 2:46
    • Applying Gradient
    • Preview in Live View
    • Modifying Gradient
  • Code View 5:00
    • Webkit Prefix
    • Preview in Browsers
  • Older Browsers 6:10
    • Rgba in Background Color
    • Converting rgba to rgb