How to Use CSS3 linear gradient (linear-gradient) to achieve text wavy line Effect

How to Use CSS3 linear gradient (linear-gradient) to achieve text wavy line Effect

When reading paper books, we often use strokes to highlight the key content to enhance our visual experience.

On the web page, we can only use background images to implement similar functions without CSS3. This is of course not an efficient method and is difficult to maintain and adjust.

For example, if you just want to adjust the color, line size, and tilt angle, you have to turn on the plotting software to make a try.

Now we can use the CSS3 pseudo element and its background gradient (gradient) to achieve this interesting and practical effect.

 

Wavy line features

We observe the wavy line, which has two basic geometric features:

1. twists and turns are repeated and can be divided into several connected "corners ".

2. The connection points of these "corners" are smooth and do not have burrs. Therefore, smooth processing must be performed on the vertices.

 

For (1), we can first create a sharp angle shape (composed of two straight lines), and then use the repeat in the x direction to repeat.

For (2), we can use gradient color to simulate the weakening of the Force track at the turning point when the hand is crossed. We use a relatively light color at the intersection of the sharp corners to construct the visual feeling of the rounded corner.

CSS3 linear gradient

We noticed that each "angle" has two sides. If the default gradient axis (a vertical line from top to bottom) is used, the left side is 45 ° Skewed, the presentation on the right is 315 ° Skewed.

So how to create a 45 ° skew line? It is easy to think of rotate transformation, but rotate acts on the entire element, which is not applicable here.

In another way, the linear gradient (linear-gradient) in CSS3 can meet the above requirements. The core of linear gradient is the gradient axis, the starting point and the color value distribution.

By setting the angle of the gradient axis to 45 °, we can get the skew feature. Then we can narrow the gradient width to the size of a line. The specific code is as follows:

 

div { background: linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%); background-size: 20px 20px; background-repeat: no-repeat;}

The first parameter in the above linear-gradient method is the gradient axis angle. The gradient will be carried out along the gradient axis, that is, the angle of the gradient line is 45 °.

 

The following parameters indicate that the length from 0 to 45% is transparent, the length from 45% to 55% is a red gradient, and the length from 55% to 100% is transparent.

That is, only 10% of the element's background length is gradient (and the two sides are symmetric). The second line of code sets the background width to 20px, then the actual width of the gradient line is 10px * 10% = 2px.

In this way, we get a short line with a 45 ° tilt and a gradient.

Similarly, we can get a 315 ° gradient short line:

 

div {  background: -webkit-linear-gradient(315deg, transparent, transparent 45%, red, transparent 55%, transparent 100%),-webkit-linear-gradient(45deg, transparent, transparent 45%, red, transparent 55%, transparent 100%);   background-size: 20px 20px;  background-repeat: no-repeat;}

But now we get two cross lines to form an "X" shape, which is not what we want.

 

A simple technique is to set the height of an element to 1/2 and get a "V" shape.

Then, we set the background-repeat to repeat-x to get the wavy line shape.

CSS3: before pseudo element

We have the last step left. We need to add the wavy line shape to the text, as long as the above div element is changed to the corresponding text: before pseudo element.

We can also set different gradient colors to mark different texts.