72 changes to a tag, creating a pure CSS icon library, 72css

72 changes to a tag, creating a pure CSS icon library, 72css

Every time the icon is usedIconoCopypaste is used, but the sizes are different each time. It is annoying to adjust parameters. Of course, you may want to use zoom and scale for scaling, but such scaling will also make the line width rough, not satisfied.

Finally, I made up my mind to transform a scalable icon library.Github first: https://github.com/qieguo2016/iconoo,Currently, you can download the link label and npm + webpack. For details, see readme of the project.(Hello, please, star !)

The idea at the beginning of the transformation is to use the percentage size for transformation, and then immediately find that it is not feasible. The two most dependent ways to draw an icon are as follows: border and box-shadow cannot use percentages. Therefore, pass! Then I naturally thought of making a fuss about the unit, rem? No, No, No. It is a joke that a library depends on global variables. The rest is naturally em. Set font-size at the icon level, and then the icon itself and its descendants use this font-size as a reference, Perfect!

Principle of CSS plotting

The following two attributes are used to draw a line using CSS: border & box-shadow. The shape can be controlled by border-radius and transform, and absolute positioning, transform, and margin are used for the position. After a few times of CSS plotting, I know what is going on. In the final analysis, it is still ry.

For example, the simplest plus sign:

1. plus {2 box-sizing: border-box; 3 display: inline-block; 4 position: relative; 5 font-size: 20px; 6} 7 8. plus: before, plus: after {9 content: ''; 10 pointer-events: none; 11 position: absolute; 12 left: 50%; 13 top: 50%; 14 transform: translate (-50%,-50%); 15 box-shadow: inset 0 0 0 1em; 16} 17 18. plus: before {19 width: 1em; 20 height: 2px; 21} 22 23. plus: after {24 height: 1em; 25 width: 2px; 26}View Code

The implementation is very simple. By setting the width and height of two pseudo classes to form two small rectangles, and then fill them with shadows, so that a plus sign is necessary. Then adjust the position, center the two rectangles, And the plus sign is displayed. Specifically, the absolute position + reverse offset method cleverly utilizes the different percentages of the two attributes to achieve center. In terms of dimensions, the relative unit em is used for all dimensions except the width (2 Px), so you can adjust the font-size value to adjust the Icon size. To adjust the line width, you need to change the 2px. You can easily change the line width by defining the line width as a variable by introducing less and sass.

Various CSS Methods

Although the principle is simple, many icons are quite interesting. By analyzing these icons, you can also deepen your understanding of css. For example:

The figure on the Internet should still be said a lot. At first glance, I saw the force of death... An analysis shows that the outer border can be done by using border, and then using before as the dot is also very simple. The key is how to draw the two mountains? Box-shadow seems to be able to create a multi-layer border, and then add a rotation, right? The workflow is as follows:

On the CSS code bar:

1. icon-test {2 display: inline-block; 3 position: relative; 4 box-sizing: border-box; 5 width: 90px; 6 height: 80px; 7 border: 5px solid; 8 border-radius: 10px; 9 color: # 2ba5bb; 10 overflow: hidden; 11} 12 13. icon-test: before ,. icon-test: after {14 content: ''; 15 pointer-events: none; 16 position: absolute; 17} 18 19. icon-test: before {20 width: 10px; 21 height: 10px; 22 top: 18px; 23 right: 20px; 24 box-shadow: inset 0 0 0 1em; 25 border-radius: 50%; 26} 27 28. icon-test: after {29 width: 60px; 30 height: 50px; 31 left: 0; 32 bottom:-27px; 33 box-shadow: inset 0 0 0 50px, 30px-20px 0 0; 34 transform: rotate (45deg); 35}View Code

Next:

It looks a little like this one. However, it cannot be drawn according to the previous method ~~~ It is easy to resolve the border by breaking down several steps. A box-shadow is complete. The two mountains are actually in the same shape. They all have a rectangle under a triangle. The triangle can obviously be painted using border, and the rectangle can be painted using box-shadow! Here, transparent border is also used for left-side and lower-Side white space, which is much better than direct size alignment.

1. icon-test {2 display: inline-block; 3 position: relative; 4 box-sizing: border-box; 5 color: # 2ba5bb; 6 width: 60px; 7 height: 40px; 8 border-top-width: 0; 9 border-right-width: 0; 10 border: 4px solid; 11 border-color: transparent; 12 box-shadow: -4px 5px; 13 overflow: hidden; 14} 15 16. icon-test: before ,. icon-test: after {17 content: ''; 18 pointer-events: none; 19 position: absolute; 20} 21 22. icon-test: before {23 left: 0; 24 bottom: 8px; 25 border: 14px solid transparent; 26 border-bottom-color: currentColor; 27 box-shadow: 0 16px; 28} 29 30. icon-test: after {31 left: 28px; 32 bottom: 9px; 33 border-width: 0 9px 21px; 34 border-style: solid; 35 border-color: transparent currentColor; 36 box-shadow: 0 17px; 37}View Code

How is it? Think these are all gadgets? Okay, let it go. I'm about to start installation!

Mona Lisa? What? I will tell you that this is also a single label drawn from pure CSS?

The Mona Lisa, composed of thousands of box-shadow items, seems to be out of endocrine...

(Author: Jay Salvat, source: http://codepen.io/jaysalvat/pen/HaqBf)

The most powerful deformation in CSS is not used in such abnormal plotting. If deformation is added, more shapes can be drawn... For more CSS things, please go to codepen to explore the treasure!

PS:Mona Lisa can read the original image information and convert it into a box-shadow in an area. You can use canvas on the front end. In fact, this product has less technical content than an image icon. Even so, if CSS is used to draw complex images, the cost-effectiveness is still too low. We recommend that you use images to make them more expressive and easy to operate! Professional drawing should be handed over to professional UI!

Big and small pitfalls

In fact, none of these problems can be called pitfalls, but they do not have enough understanding of CSS. I thought that it would be okay to convert the units used by icono into em. However, when I changed the font-size, it would be distorted, and it would be awesome! The reason is actually very simple. Not all places are proportional to font-size, and many places are mixed with the influence of the line width, so we need to remove the influence of the line width.

There are two ways to remove the effects of line width:

1) Remove the line width, such as using box-shadow and other properties that do not affect the size.

2) include the line width in the calculation, for example, the reverse offset of the translate line width, so that the overall scaling will not be affected by the line width.

Another annoying thing is centered. In fact, the following two methods are basically used in the center mode, which is quite simple. However, this repeated copypaste is annoying!

1. Absolute Position + margin: auto.

position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;

Implementation principle:The css positioning rules are used to set the left and right sides, the up and down directions to 0, and the margin value to auto. css calculates the margin value based on the positioning, and uses the hack method to center. The size of the center block needs to be controllable, because the css Calculation of margin also needs to refer to the size value, because the four weeks are 0, so the automatically calculated box size (including margin) is the same as the parent container. Whether it is to set the width, height, max-height, and max-width of the center block, the size will not be extended to the same level as the parent level.

Limitation: In the reference system parent level (position! = Static) when the size is smaller than itself, the center in the horizontal direction will become invalid. (Center vertically)

2. Absolute Position + transform reverse offset.

position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%);margin: auto; 

Implementation principle:First, the absolute offset relative to the parent level is 50%, and then transform is used to reverse offset. Since the base of the transform calculation is the element itself, here we can use 50% for reverse offset.

Limitations:In this solution, the size of the center block needs to be fixed (the maximum-width and other range restrictions cannot be set), and the browser needs to calculate and locate based on this!

In general, the Center Method of solution 2 is obviously better than solution 1, but transform is used for some offset when drawing the icon, in order not to overwrite the offset effect, the solution is used to center the data. In addition to the two ways of centering, the inline-block alignment after/before sub-elements, and the table and flexbox sub-elements can also be centered, however, the painting icon has a limited hierarchy and also uses before/after. Therefore, it is not applicable to icon painting.

Last point

Currently, the pure CSS icons are still applicable in many scenarios. This kind of icon solution saves the trouble of creating sprites and maintaining sprites, and reduces the image resource requests, in terms of performance, there will be a s improvement. You don't need to change the color and the performance is also optimized by 0.01s. Why don't you need to use this CSS icon ?!

PS: If you think it is good, please give me a github star. If you have more stars, you may have to get a promotion and raise your salary to win white and rich ~~~

PPS: attach a few gods CSS effect it (by Fabrizio Bianchi Source: http://codepen.io/fbrz/pen/iqtlk ):