[CSS Secrets]: CSS Tips (v): Striped background

Striped background

https://github.com/FannieGirl/ifannie/
Question: The striped background is ubiquitous in the design of the sleep, can we really create patterns with CSS?

This chapter is relatively more complex oh! Get together.
First we do a gradient background

Cross-section background

Now let's get these two color markers closer together.

It's like a striped background! But this is horizontal, is not still can vertical line! I'm sure it's okay, look at the changeable stripe background.

Vertical bar Background

Diagonal background

This stripe background is still not flexible enough. And there's a better plan.

Liear-gradient () and Radial-gradient () also have a broken-down version: Repeating-liear-gradient () and Repeating-radial-gradient () The way they work is similar to the two, but the difference is that the color tag is repeated over and over until the entire background is filled.

Flexible tonal stripes

In general, the stripe pattern we want is not made up of several different colors, which are often of the same color, but with slight differences in lightness.

Example Demo Address: https://jsfiddle.net/06sjmL6n/13/

After statement:
If you are already familiar with the basics, you can skip them automatically. The reason for this is that the leak is filled and the foundation is consolidated.
If there is a wrong place, you are welcome to spit the groove.
This article mainly refers to "CSS secret" a book and W3school;
Reference Link: http://www.w3school.com.cn/cssref/pr_background-clip.asp

[CSS Secrets]: CSS Tips (v): Striped background