CSS In-Depth, v2 CSS In-Depth, v2

Stripes with Repeat Linear Gradient

Check out a free preview of the full CSS In-Depth, v2 course:
The "Stripes with Repeat Linear Gradient" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Render stripes using gradients with repeating-linear-gradient.

Get Unlimited Access Now

Transcript from the "Stripes with Repeat Linear Gradient" Lesson

[00:00:01]
>> Estelle Weyl: So in this example, there is striping. And this is how we used to do striping before we actually realized it's much easier to do with repeating linear gradients. So reason this one works is because it's exactly 135 degrees, and because the first quarter of the image, the top left corner is transparent, and the bottom right corner is transparent.

[00:00:26] And so it's basically the same color is repeating, so it's being placed on top of it. If I actually change the degrees, and I don't think I can, cuz I don't think this is live, 130, no, yep, it is. You see how it breaks, and you see how it breaks?

[00:00:45] It's just basically cuz it's perfectly measured to,
>> Estelle Weyl: 135 degrees. A much easier way to do it is to say let's do a repeating linear gradient. Now, it repeats, and the last color is purple. So right here, you'll see that I'm using pixels, length units, instead of percentages.

[00:01:15] Now if I change the last one to 20%,
>> Estelle Weyl: They would repeat five times across the page. Because the last color stop, the length unit of the last color stop, whatever that length is, that is the width of your gradient. That is your gradient size. So here, before I had 120 pixels, so each line of color was 20 pixels wide.

[00:01:46] And when it reached the 120 pixel mark, it started again with the color red. So repeating linear gradients take the exact same syntax, except for it says repeating in front of the word linear gradient. So it's repeating-linear-gradient instead of linear-gradient. You can do to top right, to top left, same angles.

[00:02:16]
>> Estelle Weyl: 45 degrees would be the same, degrees, right? And notice if I say 0, that's not valid. But okay, I guess it did work, because that's a default.
>> Estelle Weyl: So let's go back to an angle, 135 degrees, cuz I like that. So,
>> Estelle Weyl: This gradient is going from red to orange to yellow to green to blue to purple.

[00:02:49] And the last purple, the last spot, is the 120 pixel mark. That means my gradient is 120 pixels wide and then it repeats. So the other gradient is basically from 0 to the 100% mark, unless you use background size. So if I did actually background size,
>> Estelle Weyl: I can't do that on this one.

[00:03:15] Let's copy this over, and go back two slides.
>> Estelle Weyl: And put in background-image, right? If I did background-size,
>> Estelle Weyl: 120 pixels.
>> Estelle Weyl: Semi-colon. I would start getting really ugly stuff.
>> Estelle Weyl: If I did 240 pixels,
>> Estelle Weyl: It's perfect. 2,400 pixels, that's why. 240 pixels, it's still ugly. But it's repeating twice within each gradient.

[00:04:02] You see how in this box right here, in this background-image, the size is 240 by 240. Let's just do background-repeat, no-repeat, so I can point it out.
>> Estelle Weyl: Okay, so you see here, there's more than two red lines.
>> Estelle Weyl: And the reason there's more than two red lines is because, it's basically there's two blue lines, there's two purple lines.

[00:04:37] But there's a little bit more room, it's because of where the gradient line goes. If I actually did zero degrees, there would be two of each.
>> Estelle Weyl: Actually no, there's more than two of each. I don't know what I'm talking about. Let's do it 90 degrees.
>> Estelle Weyl: Okay, there it's exactly two.

[00:05:02] There's two red lines, there's two purple lines. But if I did percentage, right, and I did,
>> Estelle Weyl: 50%,
>> Estelle Weyl: It's the exact same. But if I did 100%,
>> Estelle Weyl: Basically, the purple goes from the 100 pixels to 240 because my background image is 240 pixels. And then if I did repeat, it would actually repeat.

[00:05:48]
>> Estelle Weyl: Okay, so one other thing in gradients before I move off this slide is, you don't want to mix percentages with lengths, because if you mix percentages with lengths, that percentage, when I said 50%, if it was 240 pixels, that would have been great. But what if I change my background size to 60 pixels?

[00:06:13]
>> Estelle Weyl: So you can mix, but it can have unintended consequences.