Start learning with our library of video tutorials taught by experts. Get started

CSS3 First Look

Creating linear gradients


From:

CSS3 First Look

with James Williamson

Video: Creating linear gradients

In the previous movie we explored the syntax necessary to create gradients in Gecko and WebKit-based browsers. Let's take that a step forward as we add some linear gradients to our Explore California site. I am just going to preview this in a browser so you can kind of see what's going on, on the page right now. I've got two gradients that are sort of being faked here that I want to actually create through the use of CSS3. One is a very, very subtle gradient here behind the tagline text or the main info text, and the other is the page background itself.
Expand all | Collapse all
  1. 3m 5s
    1. Welcome
      1m 20s
    2. Using the exercise files
      1m 45s
  2. 31m 30s
    1. What is CSS3?
      5m 26s
    2. The current status of CSS3
      3m 35s
    3. An overview of CSS3 capabilities
      2m 24s
    4. Can you use CSS3 now?
      5m 31s
    5. Detecting support for CSS3
      9m 0s
    6. Understanding vendor prefixes
      5m 34s
  3. 1h 9m
    1. An overview of child and sibling selectors
      3m 11s
    2. Using child and sibling selectors
      7m 17s
    3. An overview of attribute selectors
      3m 19s
    4. Using attribute selectors
      8m 32s
    5. Pseudo-class UI selectors
      5m 56s
    6. Negation pseudo-class selectors
      6m 48s
    7. Target pseudo-class selectors
      5m 39s
    8. Structural selectors
      3m 58s
    9. Nth-child selector syntax
      10m 0s
    10. First, last, and only structural selectors
      5m 39s
    11. Using structural selectors to write more efficient code
      8m 52s
  4. 45m 28s
    1. Color formats in CSS3
      7m 9s
    2. Transparency in CSS3
      9m 10s
    3. CSS3 gradients
      4m 11s
    4. Creating linear gradients
      13m 57s
    5. Creating radial gradients
      11m 1s
  5. 49m 8s
    1. Working with web fonts
      6m 38s
    2. @font-face syntax
      4m 52s
    3. Downloading sample fonts
      6m 5s
    4. Writing @font-face declarations
      7m 57s
    5. Using web fonts
      6m 42s
    6. Using text shadows
      7m 14s
    7. Creating multi-column text
      9m 40s
  6. 50m 55s
    1. An overview of the flexible box model
      4m 42s
    2. Controlling box orientation
      5m 2s
    3. Setting element flexibility
      12m 59s
    4. Distributing boxes
      7m 54s
    5. Controlling box alignment
      12m 38s
    6. Working with box-sizing
      7m 40s
  7. 1h 5m
    1. Using border-radius
      6m 20s
    2. Creating custom rounded corners
      10m 21s
    3. Understanding border images
      5m 15s
    4. Using border images
      8m 52s
    5. Creating box shadows
      8m 58s
    6. CSS3 backgrounds
      4m 55s
    7. Controlling background size
      8m 46s
    8. Creating multiple background images
      6m 4s
    9. Using background-origin
      3m 18s
    10. Clipping background content
      3m 2s
  8. 40m 8s
    1. An overview of CSS3 2D transforms
      4m 26s
    2. Using 2D transforms
      8m 16s
    3. Setting transform origins
      5m 24s
    4. An overview of CSS3 transitions
      5m 0s
    5. Animating CSS properties
      6m 12s
    6. Using easing in animations
      5m 41s
    7. An overview of 3D transforms
      5m 9s
  9. 37m 56s
    1. Understanding media queries
      6m 18s
    2. Strategies for targeting multiple devices
      6m 4s
    3. Writing styles for target screen sizes
      12m 11s
    4. Deploying styles through media queries
      3m 55s
    5. Basing media queries on page orientation
      2m 24s
    6. Targeting media queries for iOS devices
      7m 4s
  10. 1m 6s
    1. Goodbye
      1m 6s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
CSS3 First Look
6h 34m Appropriate for all Nov 29, 2010

Viewers: in countries Watching now:

In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.

Topics include:
  • Understanding the history of CSS3
  • Working with the new selectors
  • Adding transparency and gradients
  • Specifying web fonts with @font-face
  • Understanding the advances to page layout
  • Looking at CSS3 box model capabilities
  • Using 2D and 3D transforms
  • Understanding media queries
Subject:
Web
Software:
CSS
Author:
James Williamson

Creating linear gradients

In the previous movie we explored the syntax necessary to create gradients in Gecko and WebKit-based browsers. Let's take that a step forward as we add some linear gradients to our Explore California site. I am just going to preview this in a browser so you can kind of see what's going on, on the page right now. I've got two gradients that are sort of being faked here that I want to actually create through the use of CSS3. One is a very, very subtle gradient here behind the tagline text or the main info text, and the other is the page background itself.

You will notice if I scroll down, it goes from sort of a blue to a sand color throughout the length of page. Those are both being created right now through the use of an image. The background is the really tall background image that's being repeated and tiled over the length of the background, whereas this particular box gradient is created as part of the background image. So we're going to replace both of those with CSS3 gradients. So here I have the index.htm file opened up and you also need to open up the main.CSS.

So, the first thing I am going to do is go ahead and do the page background. So I am going to switch over to my main.css and I need to find the body tag selector, which is just a little bit further down the page here at line 57 or so. You see right here it's got a background declaration using the image. So what I am going to do now is add another background to this. So I am going to type in background. Now the reason we are doing this instead of just replacing the existing background, it's sort of giving ourselves a little bit of fallback content here.

Essentially, if the WebKit gradient that we are about to create is not understood by our browser, it will simply apply this background and not the last one. So let's go ahead and do a WebKit gradient first. So remember with WebKit we have to use the webkit vendor prefix and then we use gradient, so it's -webkit-gradient. Now with -webkit-gradient we open up parentheses and we have to pass in several things. The first we have to pass in is what type of gradient do we want. We want a linear gradient, so type in linear. Then we have to give it a start and an end point.

So here we are going to say left top. So that will start the gradient at the top left-hand corner and then comma, we have to pass the endpoint. This is going to end at the left bottom. So basically we are just saying go all the way down from the very top to the very bottom. It doesn't really matter if we do use left, center, right there. Inless you're going from left to right which would be the angle, it really doesn't matter. This is just going to do it in a straight line for us. Now the next thing we need to do is pass in the color stops. So after another comma I am going to type in color-stop and then open up a parenthesis.

Now remember color stops are essentially just saying, where should this be positioned on the gradient and what color should it be? So I am going to position this at 0.25. So I am essentially going to start the gradient 25% down the length of it. So that will give me a nice solid color at the very top of it. The actual gradient won't start until about 25% down the side of the page in this case. So after that I am going to pass in a color. So I am going to do comma and I will just do an RGB color decoration here, 60, 107, 146.

Now it can get kind of confusing here. So I am going to close to RGB declarations parentheses and then close the color stops parentheses. I've got both of those to close. So that takes care of the top color. Now we need to take care of bottom colors. So I am going to do another comma, and here we'll do a color stop. Again, we are going to do a very similar thing. This one is going to be 0.65. So the bottom color of the gradient will sort of become solid about 65% down the page. So really limiting our gradient to occupy the position at 25% going down to 65%.

That's going to give us solid colors on the top and solid colors on the bottom and not an even blend all the way through. That's really what we want for this. So again here I have to pass in a color value. So again I am going to go RGB and hex values would work here, keywords would work, HSL would work, any of these. So 226 is the first red value, 217, so obviously this is much brighter, and 185. Now here again it gets really confusing. I have to close the parentheses for the RGB declaration. I have to close the color stops parentheses and then I've got close my gradients parentheses.

So I actually have three closing parentheses here at the end. It's really easy to forget one of those. So there is our WebKit syntax. I am going to save the file and then I am going to go down on the next line and do our Mozilla gradient. So again I am going to do another background declaration. So I am just doing separate background declarations for all these. Essentially, browsers will find the last one they can apply and apply it. So here I am going to type in -moz for Mozilla, -linear-gradient, and that's -gradient.

So here is a big difference between WebKit and Firefox. Firefox uses the Mozilla linear gradient. So again I am identifying what type of gradient I want by using the vendor prefix. All right, if I open up parentheses now I get to pass in where I want to my gradient to start and in this case I want it to start center top. So I'm starting the gradient at the very center and top of the page and this is going to run straight down the page. Now after that I pass in color stops where do I want these, how many colors do I want, where do I won't these colors, so I have to position them.

So very similar in that respect to the WebKit gradient. So here I am going to type in rgb, and I will put up parentheses again. This is just going to be the just same color declarations, so you can feel free to copy and paste these if you want. 60, 107, 146. I don't like using white space in there. It doesn't matter. It's just for me to save a little bit of space. Now after that we have to give it a percentage and remember for the WebKit, when we use 0.25 just to be different. Mozilla uses the actual percentages. So I am going to say 25%.

Your color stops are just a comma-separated list at this point in the Mozilla gradient. So I can just add as many of these as I want. I really only need one more. So this is RGB. Again, we remember the values are 226, 217, 185. Close that and we will do 65% there. So again we are just being very explicit. Close our parentheses and then type in a semicolon. Okay, cool! So I am going to save this and I am just going to go ahead and preview this in Chrome to start off with, a WebKit-based browser. Cool! Now I'm seeing my WebKit gradient and notice again we are not starting until about 25% down the page and then we're ending about at 65% down the page.

So it gives us nice solid colors above and below. I am going to test the same one in Firefox to make sure that gradient is working in both browsers. I'm indeed getting it working in both browsers. Perfect! Cool! So that's working great. Now the next thing I need to worry about is that sort of info box. Again, just to bring it up in a browser, it's this box right here. I want to replace that through the use of a gradient background. Number one, it's easier and better, because I don't have to worry about whether my text is aligned properly with that. You can see without the use of the web font that we will be using later the text is actually higher than it needs to be.

So if I could somehow make the background of the div tag that this text is sitting in this gradient, then I don't really have to worry too much about pixel perfect precision. I can just say hey, position yourself somewhere in that region and I'll still get the same effect I am looking for. It's also going to allow me a little bit later on to round the corners of this box and do things like that. So what I am going to do is have it not even really butt up against the edge so that later on we can take these edges and do some sort of fun things with them that are independent of that outline. So the first thing I am going to do is go back into my code and I need to find the wrapper selector, which is down just a little bit, and the homepage wrapper specific selector, which is about on line 136.

So down just a little bit there and you can see right now it's using the main_back.jpg. I am going to change that that to main_back_nobox. So I have created two versions of that background image. If I test this in Firefox you can see that now it's just the image behind it. It doesn't have that sort of fake gradient sitting on top of it. So now we have to go find the syntax for the div tag that surrounds all that text so that we can give it a gradient background.

I can find that at around line 608. You'll find a rule that's been commented out. I'm going to go ahead and uncomment that rule and this is the div tag that surrounds all that text. You can see now we are inserting some padding into it, we are giving it a width, we are rounding the corners of it, and this certainly could be done a little bit more efficiently than this. When we talk about round border radiuses later on, we will talk about how maybe that code could be made a little more efficient. So what we are going to do now is just add the background to it. So at the very bottom of the selector I am going to come in and just type in background.

First thing I am going to do is a solid color. Again, again this is fallback content for browsers that don't quite support a gradient, so e1d8b9. So that's sort of that light khaki color. We will go with our WebKit gradient first. backgrounds:-webkit-gradient. Now if you're wondering, does it matter, do you have to use a webkit one first? No, it's just the way that I'm doing in this particular exercise. Now again this is going to be a linear gradient.

This is going to positioned starting from the left top to the left bottom. So I am being very consistent there. Then our first color stop. I am going to go ahead and place that in. Now if you remember from looking at the previous example, that was sort of a semi-translucent gradient. It sort of went from a color that was really, really similar to a color that was just a slight bit darker. So this whole thing is going to be a gradient. Instead of worrying about an offset point, I am actually going to start it at the very top. So we will use 0 and then instead of a solid color value, I am going to pass rgba.

So you can involve transparencies in gradients if you would like. This color is going to be 233, 229, 212, and then the alpha value that I am going to pass to this is 0.85, so a little darker at the top. I need to close that and then remember I need to close the parentheses for the color stops. So don't forget both of those closed parentheses. After that we are going to do our last color stops. So color-stop and then I open my parentheses and it's going to end at 1.

So rather than it being 100%, remember to represent 100% we use a 1 in WebKit. So then rgba, so rgba again and inside the second one it's going to be 191, 178, 147. It's a little darker color, 0.95. So not as transparent as before. Remember you closed your rgba value first, then the color stop, then the gradient itself. So, three closed parentheses there at the end.

Finally, let's do our Mozilla background. So we are going to do background here. If I can type. There we go and then -moz-linear- gradient and now you're getting a taste of why I sometimes copy and paste code for students, because it is not fun watching me type. If I didn't feel like we really needed to go over everything the syntax was doing, I would probably copy and paste again. So again here we are going to do center top. So we are going from the very center top of this.

Notice that in the Mozilla gradients if you don't specify where it ends, basically you end it with a color stop. The gradient is understood to run through the entire element. Then we are going to do rgba, same values, so 233, 229, 212 and 0.85 for the alpha value. I am going to close that color value and remember we need to set a position for this color stop and it's going to be 0%, so same as the WebKit starting right at the top.

Finally, the last color stop rgba, 191, 178, 147, 0.95. So, we are using the exact same values that we used before. That one is going to be positioned at 100%, which means at the very end of the element. So we are going to close that. We will save that and let's go ahead and test this. Again, this one we will test in Firefox first. Cool! There is our solid color background.

That's where we sort of rounded some the corners on it. We have been able to be a little more decorative. You've got some semi-transparency going on in there in the background and the gradient is extremely subtle. It just gets a little darker down there in the bottom. Let's go ahead and test that in a WebKit-based browser. So I will open this up in Safari and we see we are getting the exact same gradient. So you can make those gradients match up. It's just somewhat difficult sometimes. Well, what about a browser that doesn't support gradients? So I'm going to preview this in Internet Explorer and you can see in Internet Explorer we are indeed getting the background graphics still working.

Here we are just getting a solid color. So it's not as nice, but it still looks pretty decent and it doesn't look like it really is terribly out of place. Now keep in mind that providing this type of fallback content for gradients can be kind of tricky. We are using some really base level stuff here. You can simulate gradients in Internet Explorer by using Microsoft's proprietary filters. Remember we saw those a little earlier in the title. However, I don't recommend using them, unless you're passing them into Internet Explorer through the use of conditional comments and maybe even through their own style sheets. In our next movie, we are going to finish our look at gradients by creating a radial gradient that will accent our homepage.

Find answers to the most frequently asked questions about CSS3 First Look.


Expand all | Collapse all
Please wait...
Q: I'm following along with the video "Transparency in CSS3".  James shows us how to achieve transparency in Internet Explorer by going to Kimili.com and entering a HSLA value to generate code for transparency.

Here that code:

background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF0E0C0B,endColorstr=#BF0E0C0B); /* IE6 & 7 */ zoom: 1;

When this code is added to my HTML file it removes transparency on browsers that do in fact support it. So I'm left with NO transparency. Why?
A: The problem is in the filter code. If the IE background is called last, the first "transparent" declaration will remove all previous colors, regardless of browser. To resolve this, place the rule inside a conditional comment for IE or remove the "transparent" declaration at the front of the rule.
Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS3 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK

Course retiring soon

CSS3 First Look will be retired from the lynda.com library on April 24, 2014. Training videos and exercise files will no longer be available, but the course will still appear in your course history and certificates of completion.


Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked