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 Fireworks: Web Workflow
  • Discussion

  • Study Guides

  • Table of Contents

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!

Adding Background Gradients using CSS

  • Our web design has gradients, drop shadows & rounded corners applied
  • Our sliced images include the drop shadow in the images
  • I want to be able to add these along with the gradients & rounded corners using CSS3 so I can modify them as need in my html file instead of having to modify image files to do this
  • We will use the new CSS3 panel in Fireworks CS6 and let Fireworks create all of our CSS3 rules for these features
  • We will need to re-export the file since our images now have the drop shadow applied to them
  • I have exportDesign-corrected.fw.png open & I am going to modify this file
  • Go thru the various areas of the page, copy the rules & paste them into the css file
  • The upperContent box will not get the curved corners applied
  • Complete the other 2 lower boxes
  • The curved corners will apply to those
  • Preview in FF & IE