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

CSS3 First Look

Creating radial gradients


From:

CSS3 First Look

with James Williamson
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

Video: Creating radial gradients

We will finish up with CSS gradients by creating a radial gradient to accent our homepage. Radial gradients can be tricky, especially when trying to make the WebKit and Mozilla gradients match. Let's take a closer look at the syntax as we build our gradient. Of course, before I do that, let me give you an idea of what we're going to be doing. We're going to place a radial gradient sort of just behind this tag and it's going to go from white to white. The only difference is it's going to sort of fade out. So it's going to give-- I don't want to say lens flare. That's not the effect I am going for here, but it's just going to give a highlight value here that's going to sort of fade out and maybe focus your attention a little bit more on that particular tag. All right! Let's give that a try.

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 radial gradients

We will finish up with CSS gradients by creating a radial gradient to accent our homepage. Radial gradients can be tricky, especially when trying to make the WebKit and Mozilla gradients match. Let's take a closer look at the syntax as we build our gradient. Of course, before I do that, let me give you an idea of what we're going to be doing. We're going to place a radial gradient sort of just behind this tag and it's going to go from white to white. The only difference is it's going to sort of fade out. So it's going to give-- I don't want to say lens flare. That's not the effect I am going for here, but it's just going to give a highlight value here that's going to sort of fade out and maybe focus your attention a little bit more on that particular tag. All right! Let's give that a try.

So I'm going to switch back into my code editor, which in this for me is Dreamweaver, and I'm going to switch back over to main.css. Now, I have the index.htm file opened and we need the main.css file opened as well. You can find the index file in the 03_05 folder. You can find the main.css in the CSS folder. I'm going to scroll down to about line 140 or so or thereabouts. So I need to find the homepage mainContent selector because this is where the gradients are going to go. So the mainContent is the div tag that surrounds that larger background image, and that's where we want the gradient.

So as before, I'm going to start out with the WebKit gradient. Now we haven't done radial gradients or discussed their syntax. So as we're creating this rule, we're going to discuss what the syntax means and show you how it differs from the linear gradients. So again, I am just going to do a background here and this time I'm not going to provide it a fallback because if I view this in Internet Explorer or some type of browser like Opera that doesn't support these gradients, I really don't want anything shown. I only want this to show up if the browser supports it. So we'll do webkit and I'm going to type in gradient.

Now remember with WebKit gradients, we pass the type of gradient that we want in as the first argument. So after opening up my parentheses, I am just going to type in radial. So it lets WebKit know that I want a radial gradient. Now, things change a little bit as opposed to doing a linear gradient, because I've got another value that I need to pass. So I'm going to type in 500 80. Now, what is that? Well, this is an offset value that is essentially defining where the radial gradient is going to go. Now, I want you to imagine this gradient being two circles, the inside circle being one color, the outside circle being another color, and then blended together.

So what this first value is, is the center of that smaller circle. That sort of inner circle if you will. That's the center point. The mainContent, if you could grid up the mainContent, that's basically saying, go 500 pixels over to the right, go 80 pixels down. That's where this gradient is going to start. So you are going to have to do a little bit of work before you start defining these to determine where you want them to start. Okay, now I'm going to do another comma after that and then I'm going to type in 50. Now what is 50? 50 is the size of that inner circle. That's the radius.

So essentially I am basically saying that inner circle of color needs to be this size and it's about 50 pixels. Okay. Now, that's the inner circle. Now, we have to worry about the outer circle. So, I'm going to do another comm, and I'm going to type in 500 80. So that's putting the center point for these two circles in the exact same location. What's really cool is that you can offset them and this can create sort of 3D effects, like a ball or some type of a reflection in the water. So you can just do some really cool things with this. So essentially, that is the other center point for the larger circle.

Now, after that, I have to type in a comma and then I have to give a radius for that larger circle. Larger circle is indeed going to be bigger and it will be 250. So 250 pixels. Notice that we don't need to explicitly say px. So essentially what we've done so far is say, hey! We want a Radial gradient. This is the center of the smaller circle, the size of the smaller circle. This is the center of the larger circle. Notice they are exactly same. This is the size of it. So it's going to go from 50 pixels to 250 pixels and then it'll just sort of blend and blur in between that. Okay. So that worked out pretty well. Now what? Well now, we do exactly what we did in our last gradient. We give color stops.

I want to show you an alternate syntax for doing color stops. Before in last one we were doing color stops as these comma separated lists, but you can also use keywords for these. So I'm going to type in from. So from just basically says go from this color and right after that we'll do to. So we're going to say from, and in parentheses rgba, open up a parenthesis there for our color stop. 255, 255, so white basically. Since we're doing rgba, we're going to do our inner color as 0.85. So 85% white.

Again, remember to close the parentheses for the color value and then close the parentheses for color stop. Do another comma and then do to. So we're doing from and then to. So to will be rgba, and again the value here is going to be the same. 255, 255, 255. The difference will be in the opacity. This is going to go to 0. So it's going to go down to nothing. So essentially, it's going to be 85% of white in the middle and it's just going to fade out to nothing as it gets towards the end. Remember I close the color value, close the color stop, and then close the gradient definition itself.

Now, I'm going to go ahead and save that and I'm going to test this in a WebKit-based browser such as Chrome. There we go. Now, we can see our gradient up top. It's just sort of the glow that we're getting underneath the Find Your Tour. Now again, if I view this in any other browser, even Firefox at the moment, I get nothing there and the reason I get nothing there is because we don't have a Firefox radial gradient defined. So let's go ahead and do that. So I am going to go down to the next line, type in background, and here again I can use moz, and remember with Mozilla you pass the type of gradient that you want using the prefix.

So here I'm going to say radial-gradient. So as before we did Mozilla linear gradient, now we're doing Mozilla radial gradient. So now you're going to see a lot of similarities here. The first thing we're going to pass in is 500px 80px. Now, I know you know what that is. That's the center of our radial gradient. The next thing I need is a degree. I'm going to type-in 0 degrees. Degree is an angle which this gradient can follow. If it doesn't follow degree, it's just going to go in a straight line and that's what I want this one to do.

But you can send it off at an angle if you'd like. Next, we have a comma and then we're going to type in circle cover. Now, what's all that about? Well, those are two keywords and they are necessary for radial gradients. Circle essentially describes the shape. You have two choices there. Circle or ellipse. Circle will be a perfect circle and Ellipse allows the gradient to go off on an angle in sort of an oblong pattern. Then we have Cover. Now this is the one that has multiple choices here. We have cover, closest side, closest corner, farthest side, farthest corner, and contain.

Let's talk about what those are. For closest side, the gradient's shape is going to meet the size of the box closest to its center. So this is essentially how it's going to cover the ground of the shape that it's inside. So the gradient shape is going to meet the side of the box closest to its center point, or it's going to meet both the vertical and horizontal sides closest to the center if it's an ellipse. Closest corner says the gradient shape is sized so that it exactly meets the closest corner of the box from its center. Farthest side is very similar to closest side except for the shape is sized to meet the side of the box farthest from its center.

So essentially it's just going to go in the opposite direction, all the way to the farther side. Same thing for farthest corner. It's just going to go to the farthest corner. So essentially, as your gradient is expanding, it has to figure out how far it wants to go. It can go to the closest side, closest corner, farthest side, farthest corner. You can also do contain. Contain is the same thing as closest side. It's pretty much the exact same thing. Cover, which is the one we're using, is basically the same thing as farthest corner. So essentially what it's going to do is it's going to cover more of the shape. Cover basically says I want you to occupy as much space as you can.

Closest corner is going to say keep it in the corner that's closest to. Keep it there. Don't let it expand past that. Once it touches the closet corner, stop the gradient. So that's essentially determining how far that gradient is going to go. So now we need our color stops and after these two keywords I'm going to type-in rgba and we're going to do exactly the same thing. 255, 255, 255 and then 1 for 100% and 0% for the start. When I was testing these gradients, 85% didn't work and if you're wondering why, it has everything to do with the fact that in WebKit we can specify the exact size, the radius of both of those inner circles.

We can't do that in Mozilla's. Mozialla's basically just determine the area we want to cover. So it's a little bit more diffused than the WebKit gradient. So in order to make it appear the same, we're basically going to make it a little stronger. So after that, I'm going to type in a comma, rgb. So this is my next color stop, rgba. 255, 255, 255. So we need white and then another comma, and here we're going to type in 0. So it is still going to go down the transparency, just absolutely nothing. Then that color stop is going to appear at 20%.

Imagine a gradient filling up that entire mainContent because we use cover as our keyword. It's going to cover the entire main region. Obviously, if it was going at 100% white, and it covered the entire region to a transparency, we would have a lot more gradient. So by saying 20%, I am essentially just ending it right there in that middle spot. I am just basically saying okay, only go for about 20% of the size of the total gradient and then stop. Okay. So how did I know to go to 20% to get an exact match with the WebKit gradient? I didn't. I experimented and that's I assume what you guys are going to have to do as well as you're trying to get these things to match up.

So I'm going to close that parentheses, semicolon, save this, and let's go ahead and test that in Firefox. Cool! Now, I want to compare these two side by side. So I'm going to go ahead and open this back up in say Chrome and just kind of put those guys right next to each other. So there's Firefox and there's Chrome. You can see they're extremely similar. The Firefox one looks like it's maybe a little stronger, but if you've got two different people visiting them in two different browsers, they will never know. They will get the exact same effect you were looking for.

So you do have to use a little bit of trial and error. But once you understand the syntax, it's a little easier to tweak one versus the other to try to figure out what you want. So there you go! Our radial gradient is now finished. Now, as I have mentioned, the syntax for radial gradients can be a little tricky. You do have to sort of work your way around about which each one of these guys is doing. You do them a couple of times, you'll get used to it, you'll get a good feel for it. I don't think you'll have any trouble. The biggest challenge is in making sure that the WebKit and the Mozilla gradients look and behave in a similar fashion. That can be a little tricky.

That and of course all the work that we were talking about in the previous movies about providing fallback content for radial gradients when you are wanting to use them, because you do have to remember that Internet Explorer and Opera for the time being don't support these. Other than that though, have fun with linear and radial gradients. They can really add a lot of pop to your designs.

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