Start a free Silver 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.


Video Transcript

  • 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

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.