Bummer! This is just a preview. You need to be signed in with a Basic or Pro account to view the entire video.

Start a free Basic trial
to watch this video

Sign up for Treehouse
Additional Syntax

Additional Syntax

4:56

In this video, you'll learn about some additional syntactic nuances of CSS3 gradients. Additionally, you'll see more differences between Firefox and WebKit.

  • 0:00

    [?upbeat music?]

  • 0:03

    [Think Vitamin Membership] [??]

  • 0:07

    [CSS3 Gradients - Additional Syntax - with Nick Pettit] [??]

  • 0:13

    Now that you know how to create linear and radial gradients,

  • 0:16

    let's take a look at some additional gradient concepts.

  • 0:19

    The first thing I'd like to show you is that you can apply gradients

  • 0:23

    to properties besides background images.

  • 0:27

    This currently only works in WebKit and is still experimental.

  • 0:32

    Other properties that can accept gradients include border image

  • 0:35

    and list style image.

  • 0:38

    So let's apply a border image to our div.

  • 0:42

    We'll type out the WebKit border image property

  • 0:47

    and to that we'll apply a WebKit gradient.

  • 0:51

    We'll just use a simple linear gradient.

  • 0:56

    We'll set the points on this,

  • 1:03

    and we'll apply a few colors here.

  • 1:15

    We'll set the slice value for our border image,

  • 1:21

    and we'll set the stretch value to be round.

  • 1:25

    And then we also need to set a border width for this to look right.

  • 1:30

    So we'll set it to about 15 pixels.

  • 1:33

    And if we switch over to Google Chrome,

  • 1:36

    you can see that we've applied a gradient to our border image.

  • 1:41

    Now, by adjusting the gradient and the border width

  • 1:44

    you can obviously achieve numerous different effects.

  • 1:48

    Again, this only currently works in WebKit.

  • 1:53

    The next thing that I'd like to point out is that you can have multiple colors per gradient.

  • 1:58

    The from and to functions are actually just convenience functions

  • 2:03

    for the color stop function.

  • 2:06

    So let's go ahead and get rid of our border width,

  • 2:09

    and we will change WebKit border image just to a regular old background image,

  • 2:17

    and we'll delete the other values for our border image,

  • 2:20

    and then we'll change our from function to the color stop function first.

  • 2:27

    So we'll change that over to color stop.

  • 2:30

    The color stop function actually takes two arguments.

  • 2:35

    The first argument is the position of the color stop,

  • 2:39

    and we want this color stop to be the start of our gradient,

  • 2:43

    so we'll set that to 0.

  • 2:45

    The second argument for color stop is the color,

  • 2:48

    which we already have there.

  • 2:50

    So let's jump over to the to function here,

  • 2:53

    and we'll change that to a color stop as well.

  • 2:57

    For the first argument we'll put in our position.

  • 3:01

    We want this position to be all the way at the end of our gradient.

  • 3:06

    The position argument can take a value between 0 and 1,

  • 3:11

    so if we want it to be all the way on the other side of the gradient line,

  • 3:14

    we'll set this to 1.0.

  • 3:18

    Our color is already in there, so we can save that out, switch over to Google Chrome,

  • 3:22

    and if we refresh the browser, you can see that we're back to a simple linear gradient.

  • 3:27

    At this point you're probably wondering, why would you want to use color stops

  • 3:31

    instead of the to and from functions?

  • 3:34

    And the answer is you can actually have multiple color stops.

  • 3:38

    So if I switch back over to our text editor and at the end of the line

  • 3:43

    we can tack on another color stop,

  • 3:48

    right in the middle of our gradient we'll put a hot pink color.

  • 3:56

    And if we switch back to Google Chrome and refresh the page,

  • 3:59

    you can see that we now have a three-colored gradient that looks pretty intense.

  • 4:05

    Just a second ago I told you that the first argument for the color stop function

  • 4:09

    should only be a value between 0 and 1.

  • 4:12

    While this is what you'll want most of the time,

  • 4:14

    you actually can set them to values outside of 0 and 1.

  • 4:18

    For example, let's set the black color to 1.5.

  • 4:24

    If we switch back to the browser and refresh,

  • 4:28

    you can see that the black color is still there,

  • 4:31

    but the color stop is actually appearing outside of the element.

  • 4:36

    This is nice if you just want the fringe of a color to appear on the inside of your gradient.

  • 4:42

    Using these techniques gives you tighter control of your gradients

  • 4:45

    and allows you to create subtle effects.

  • 4:47

    In future videos we'll be covering even more gradient tips.

  • 4:51

    [?upbeat music?] [Think Vitamin Membership]

  • 4:54

    [??]

Show full transcript