CSS3 linear-gradient linear gradient to implement simple and practical graphics such as dotted lines,

CSS3 linear-gradient linear gradient to implement simple and practical graphics such as dotted lines,
1. CSS3 gradient as an image

I think one of the most powerful aspects of CSS3 Backgrounds is that it supports multiple Backgrounds, that is, the number of background images can be accumulated infinitely, just as the gradient nature of CSS3 isbackground-imageTherefore, we can add any number of gradient background images. Even, theoretically, any colorjpgAll images can be implemented using CSS3 gradient backgrounds.

This feature andbox-shadowFor details, see "CSS3 box-shadow box shadow graphics generation technology ",text-shadowThere is also an infinite accumulation. Generally, we can achieve any width and color of the stroke effect.

Of course, we will not use CSS3 gradient to simulate an image during actual development, but we will use it to generate some simple and practical images.

This article will show how to generate a graph for the CSS3 linear-gradient linear gradient by using dotted lines, triangles, and plus minus signs.

2. CSS3 linear-gradient linear gradient generation ratio controllable dotted line and Tool

We usually need to implement a dotted line, most of which are usedborder-style:dashedDeclaration implementation. However, there is a problem with the dotted border, that is, the actual virtual ratio of the dotted line is fixed. For example, in Chrome and Firefox, the aspect ratio of the color area is, the width ratio of the color area to the transparent area is 1: 1:

In ie, the aspect ratio of the color area is, and the aspect ratio of the color area and the transparent area is, as follows:

If you have a design requirement, we want the width to height ratio of the dotted line color area to be. At this time,border-style:dashedThat's why I don't have to worry about it.

With CSS3linear-gradientLinear Gradient we can easily achieve the above effect, assuming the HTML code is as follows:

<div class="dashed"></div>

The corresponding CSS code is as follows:

.dashed {    height: 1px;    background: linear-gradient(to right, #000000, #000000 5px, transparent 5px, transparent);    background-size: 10px 100%;}

The effect is as follows:

When we use CSS3 gradient to build a graph, the most eye-catching attribute is not the gradient itself,background-sizeAttribute to restrict the size of the image in a specific area.

For the linear gradient generation dotted line, I specially made a CSS code generation tool. You can click here: the dotted line CSS generation tool demo Based on CSS3 linear gradient implementation

We can select the ratio, stride, and color of the dotted line you want, and then generate the corresponding CSS code, for example:

If you are interested, try it manually.

Ii. CSS3 linear-gradient linear gradient generate a triangle with wireframes

To generate a triangle image, the most classic is to use CSS.borderAttribute. For more information, see section "CSS border triangle and corner Graph Generation Technology Introduction". If it is a solid color triangle, use CSS3.clip-pathIt is also a good method. For more information about clip-path, see here.

However, sometimes our triangle is framed, similar to this effect:

If compatibility is not considered, the best practice isborderProperty to generate the two sides of the box, and then CSS3transformRotation, but there are limitations, that is, if the area connected to the triangle is not a solid color but a gradient background, then the problem arises, this is because the triangle is actually a 45-degree square image block.

At this time, the gradient graph generation method does not have any pressure, because you can get a real triangle (135 degrees oblique gradient to the diagonal position), as shown below:

The related CSS code is as follows (here the box is also implemented with gradient ):

.tri {    width: 6px; height: 6px;    background: linear-gradient(to top, #ddd, #ddd) no-repeat, linear-gradient(to right, #ddd, #ddd) no-repeat, linear-gradient(135deg, #fff, #fff 6px, hsla(0,0%,100%,0) 6px) no-repeat;    background-size: 6px 1px, 1px 6px, 6px 6px;    transform: rotate(-45deg);}

You can click here to generate a demo Based on the CSS3 linear gradient triangle image.

Update record (10-29 ):transparent 6px→hsla(0,0%,100%,0) 6pxThe transparent edge in Firefox will have a gray background rendering bug. It can be fixed using rgba or hsla white transparency.

3. CSS3 linear-gradient linear gradient generate the plus sign and minus sign

It is very easy to implement a minus sign. For example, to implement a 10 PX * 2px minus sign image, CSS:

.minus {    background-image: linear-gradient(to top, #666, #666);    background-size: 10px 2px;}

The principle is as follows. First, use a gradient to generate a solid color (#666) gradient image filled with the entire element background, and then usebackground-sizeThe property is controlled to the desired size, and the effect is achieved.

The effect of the plus sign is similar, but there is only one more layer.linear-gradient.

Eventually, similar effects can be achieved:

And Traditional::before,::afetrPseudo-element combinationbackground-colorOrborderCompared with generating a gradient background, center positioning is very convenient and directlybackgroundAdd a propertycenterThe traditional implementation usually requires absolute positioning, and then a piece of code from balabara is centered.

In fact, you can click here: the plus and minus sign graphics demo Based on CSS3 linear gradient