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 CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • 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 Educator.com

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
  • Open the gradients.html file and take a look at it in the browser
  • Drop shadows have been added but the box still appear to look very flat in the browser
  • We will convert our solid color background into a gradient background to give these boxes a bit more depth
  • Adding gradients to your page content can be a bit tricky because browser support is a mixed bag right now
  • Instead of making you type all the variations for this property, I have a text file that we will use as a base for this exercise
  • Open gradients.txt from the text folder, do a select all/copy and we will add this code to our web page
  • Let’s start with Firefox so we can use Firebug to turn pieces of this code on & off to see what it does to our page in Firefox
  • Turn off everything but the first in the list & see what happens, this is the standard that will someday be adopted by all browsers so we only need to list this one
  • Notice that in Firebug, we only see the –moz- version of this style rule, the other versions are not used so we know that at least my version of firefox still required the prefix
  • Now go back to Dreamweaver & comment out all the lines with prefixes and test the page in the various browsers
  • background-image: linear-gradient(-90deg,rgba(217,54,0,0.8) 0%,rgba(255,184,0,0.8) 100%);
  • Talk about what happens in each one
  • IE does not support any of these in versions 9 or lower, 10 may support it

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
  • Gradient Property 0:18
    • Gradient Code
    • Apply Comment
    • Remove Comment
  • Save and Preview in Browser 6:16
  • Enable Drop Shadow 7:56
  • Summary 8:28

Transcription: Working With Gradients

We are now going to take a look at adding gradients to our boxes of content; this is a CSS3 property, so once again, it requires testing in the browsers and may require proprietary prefixes in order to work correctly.0000

Let's take a look at the Gradient property and how you can apply it to your content.0018

Now, this topic can get a little bit deep; I am going to keep this as simple as I can, because gradients are a bit complicated across the various browsers, depending upon how they are supporting them right now.0025

I have the gradients.html file open; and this is a single box of content we can use to play with some of these CSS3 properties; so gradients.html is the file that I have open.0040

Let's take a look at the Styles panel for this file.0056

Right now (let me raise this up a little bit), you can see, we have quite a few options in here.0061

I am also going to move from the A to Z, which shows all of my prefixes; I'm going to go back to show only set properties.0067

What that is going to do is show me only the properties that I have applied, keeping this Properties area a little bit less overwhelming.0077

Now, notice: I do have that box-shadow property applied here; and I just have it disabled so we can focus on the gradient piece; but that allows you to add the gradient and the box shadow if you want to, to get a feel for what it would look like on this file.0087

Let's take a look at the gradient piece; and I have a separate file for you to use for this one.0105

What we are going to do is go out to the Text folder and open up gradient.txt; we are going to take a look at this particular code, because the gradient, as I said, can get complicated.0113

First of all, I'm trying to apply the same gradient--so you can see, it's the identical information between the parentheses in each one of these lines of code.0128

But the first one is the non-proprietary version; the second one is for Opera; this one is specifically for Firefox; this one is for webkit, which is Safari and Google Chrome (although Google Chrome is moving away from webkit, so we may see a shift there, moving forward); and this one is for Microsoft--or possibly for Microsoft, depending upon the version of Internet Explorer.0140

What I am going to do is select all of this code and copy it (I didn't want to have to make you type all of that out--it's a little bit complicated).0173

And we'll go over to Code View, and what I am going to do is...directly above my drop shadow, which is disabled right now, I am going to hit a Return.0184

I put my cursor at the end of line 23, hit a Return, and I'm going to paste in that information for the gradient.0195

Now, what is interesting about this code is: notice the property--the property has nothing to do with the gradient, per se; it is the value on the right-hand side that actually has the word gradient in it.0205

So, what we do is use the background-image property multiple times in order to work with this.0221

Now, if I go over to the CSS Styles panel and refresh, selecting this (and I'll go ahead and close that up), notice, I only see one background image listed in the Styles panel.0229

Because this is a new property, the interface here within Dreamweaver isn't really designed to do more than one instance of a property; so, this one--you do have to be working a little bit in code.0244

I'll close up my Properties area, move this up, and what I'm going to is go to Split View here; and let's take a look at this.0259

I have them listed; the most basic property is at the beginning, and then I have my proprietary versions after that.0273

Let's save the page and take a look at what happens to our box when we put it in each of the browsers.0282

What I can do is select the four proprietary versions, and I am going to use the Commenting toolbar in Dreamweaver (that is this one right here--yours may still be in a single line).0290

Let me put this in Code View to show you: I have selected everything but the first one, and I'm going to comment this out by clicking on Apply Comment; and the second comment is a CSS comment.0306

So, I'm going to choose that one, and that will comment out my code; now, what we can do is test this in the browser to see which browsers support the basic version and not the proprietary ones.0320

I'll put this in Google Chrome--we'll start there: you can see, it does not work, even in Google Chrome.0335

And I think, if you go down the line, you are going to have some trouble; so I'll put this into Firefox--not supported; so this is an example of when we really need that proprietary code in there.0343

I'm going to reselect those four lines of code (make sure you get everything within those four lines), and I'm going to click the comment over here with the big red X in it, Remove Comment.0356

What that is going to do is make this code available to the browser.0371

So now, I'll do a save; let's go ahead and put this back into Chrome, and look at that--it is nicely set up as a gradient.0377

Let me go through the rest of the browsers now--let's see what happens, if that proprietary code is good enough.0389

Now, the -moz is the Firefox version, and you can see, that works perfectly; so Chrome and Firefox are working just great, but they do need...Chrome needs the -webkit, at least for now; Firefox needs the -moz proprietary code.0396

Let me try Safari--let's see how that is working: and you can see, no problem in Safari either; that is because Safari is a part of this webkit proprietary code.0415

Now, let's move on to Internet Explorer.0428

This is I.E. 8, so it is definitely not going to work: you will find none of the CSS3 properties in I.E.8 work; and that is one reason why, if it can't understand a gradient, what I have done is added a background color in here.0431

So, if all else fails, and the browser can't support my gradients, at least it understands the background color for that box; and that is where that clean blue is coming from.0451

What we did was: we just took a look at the gradient property, which technically is a gradient value; the background-image is the property used for that.0465

Now, let me go out to the CSS Styles panel and turn on the box-shadow (this is the drop shadow feature); I'll go ahead and save this, and let's see what it looks like with the gradient and the drop shadow.0476

Now, this is a fairly dark drop shadow--I would go ahead and change the color on this; but you can see how just adding a drop shadow feature within the browser and a gradient really adds to the box properties.0491

That is the CSS box property, and it is background-image specifically; you can't specify that by using the CSS Styles panel in Dreamweaver CS6.0507

It is not quite supported in the browsers, so it is not quite supported in Dreamweaver; so this is one thing that you will want to do in Code View, and that is why I provided you this gradients listing.0522

What you can do is just hang on to this code, the code within the gradient.txt file that I have available for you; and you can use this as your basic code for any gradients you want to take care of or handle within your web pages.0537

Simply change the colors of the gradients themselves, and you will have a nice gradient spread.0554

The percentage numbers in here do affect where the gradient starts and stops; the top piece means that the gradient is going to go from the top to the bottom.0562

And feel free to look into this background image with gradients values a little bit further; you can get a little more detailed in starting and stopping multiple colors; I just wanted to give you a taste of the CSS3 property of background-image and the ability to have the code in order to apply this gradient across at least the modern browsers.0574

I.E. 8 is definitely not a modern browser.0600

That is background-image as a property of CSS3, and the gradient feature within that background-image, and how to apply it and work with it using Dreamweaver.0604