72 change of a label to create a library of pure CSS icons

Every time to use the icon will go to the Icono to Copypaste, but each time the use of the size are different, always have to adjust parameters, huge annoying. Of course you can think of zoom, scale to do the scaling, but such a zoom will make the line width is also thicker, not very satisfied.

Finally make up your mind to transform a scalable icon library. GitHub First: Https://github.com/qieguo2016/iconoo, currently provides download LINK tag introduction and Npm+webpack Introduction method, see the Project README. (Hello, Beg star! )

about the transformation, the first idea is to use the percentage size to transform, and then immediately found that it is not possible to draw the most dependent on the two means: border, Box-shadow can not use a percentage, so this idea, pass! and then it's natural to think about the work on the unit, REM? No, no, no, a library relies on global variables that's a joke. The rest of the nature is EM, in the icon level set Font-size, and then the icon itself and the descendants of this font-size as a reference, perfect!

The principle of CSS drawing

Using CSS to draw lines, there are only two properties: Border & Box-shadow. And the shape can be used Border-radius, transform control, position will be used to absolute positioning, transform, margin and so on. CSS drawing, do a few will know what is going on, in the final analysis, or geometry.

For example, the simplest plus:

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:"';Ten pointer-events:None; One position:Absolute; A  Left:50%; - Top:50%; - Transform:Translate ( -50%, -50%); the Box-shadow:inset 0 0 0 1em; -} -  - . Plus:before{ + width:1em; - Height:2px; +} A  at . Plus:after{ - Height:1em; - width:2px; -}

View Code

The implementation is very simple, by setting the width of the two pseudo-class to form the two small rectangles, and then filled with a shadow fill, such a plus required graphics out. Then the position is adjusted, the two rectangles are centered and the plus sign comes out. This is achieved by using the absolute positioning + reverse offset method, which skillfully utilizes the different implementations of the two attribute percent references. Dimensions, all dimensions in addition to the line width (2px) are used in the relative unit of EM, so adjust the value of font-size can adjust the size of the icon. If you want to adjust the line width, then you need to change the 2px, introduce less, sass to define the line width as a variable can easily change the line width.

Various ways to play CSS

Although the principle is simple, but many icons are quite interesting, through the analysis of these icons can also deepen the understanding of CSS. For example:

This graphic online said should still be more, the first eye to see Meng forced ... Analysis, the outermost border can be clearly used border to do, and then use a before to do the dot is very simple, the key is the two mountains how to draw it? Box-shadow seems to be able to do multi-layered border, and then add a rotation is not out? The drawing process 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;Ten Overflow:Hidden; One} A  - . Icon-test:before,.icon-test:after{ - content:"'; the pointer-events:None; - position:Absolute; -} -  + . Icon-test:before{ - width:10px; + Height:10px; A Top:18px; at  Right:20px; - Box-shadow:inset 0 0 0 1em; - Border-radius:50%; -} -  - . Icon-test:after{ in width:60px; - Height:50px; to  Left:0; + Bottom:-27px; - Box-shadow:inset 0 0 0 50px,30px-20px 0 0; the Transform:Rotate (45deg); *}

View Code

One more:

Seems to follow a bit like, however, according to the previous drawing method But how also can not draw out ~ ~ or decomposition of a few steps to draw, the border is easy to solve, a box-shadow on the finished. These two mountains are in fact the same shape, are a triangle next to a rectangle, the triangle can obviously use border to draw, and the rectangle with Box-shadow on it! It also uses the transparent border to make the left and the lower side white, is much better than the 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;Ten Border:4px Solid; One Border-color:Transparent; A Box-shadow:-4px 5px; - Overflow:Hidden; -} the  - . Icon-test:before,.icon-test:after{ - content:"'; - pointer-events:None; + position:Absolute; -} +  A . Icon-test:before{ at  Left:0; - Bottom:8px; - Border:14px Solid Transparent; - Border-bottom-color:CurrentColor; - Box-shadow:0 16px; -} in  - . Icon-test:after{ to  Left:28px; + Bottom:9px; - Border-width:0 9px 21px; the Border-style:Solid; * Border-color:Transparent Transparent CurrentColor; $ Box-shadow:0 17px;Panax Notoginseng}

View Code

What do you think? Think these are all gadgets? All right, get out of here, I'm going to start pretending!

Mona lisa? What the heck? I will tell you this is also a single-label pure CSS draw out?

Thousands of Box-shadow constitute the Mona Lisa, see I endocrine are maladjusted ...

(Author:jay Salvat, Source: http://codepen.io/jaysalvat/pen/HaqBf)

Such a distorted drawing, there is no how to use the most powerful CSS in the deformation, if you add deformation, it can be drawn out of the shape of more ... More CSS gadgets, please go to Codepen to explore the Treasure Bar!

PS: Mona Lisa This kind of graphics, can read the original information converted into a unit area of the Box-shadow, the front-end with canvas can do, in fact, the technical content of the goods than a picture icon also less. In spite of this, complex graphics using CSS to draw, price/performance is too low, suggest or use pictures, this will be more expressive, more simple to operate! Professional drawing or to the professional UI to do it!

Big and small pits

In fact, encountered these are not called pits, is their own understanding of the CSS is not enough. Originally thought, the original Icono used units converted to EM even if it was done, however, a change font-size on the deformation, immediately confused force! The reason, in fact, is also very simple, not all places and font-size are proportional, many places mixed with the influence of the line width, so to remove the effect of line width.

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

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

2) The line width is included in the calculation, such as translate reverse offset off the line width, so that the overall scale will not be affected by the line width.

Another is more annoying is the center, in fact, the center is basically only used in the following two ways, or pretty simple. Just, this repeated copypaste, annoying!

1. Absolute positioning +margin:auto.

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

The principle of implementation: the use of CSS positioning rules, set the left and right, up and down the direction of 0,margin for auto, let CSS based on the location of the calculation margin value, with the hack way to achieve the center. The size of the center block needs to be controllable, because the CSS also needs to reference the size value when calculating the margin, because four weeks is 0, so the Automatically calculated box size (including margin) is the same as the parent container. Whether you set the width, height, or max-height, Max-width of the center block, the dimensions do not expand to the same size as the parent.

Limitation: When the reference system parent (position!=static) is smaller than the size of itself, the horizontal center will fail. (The vertical direction is still centered)

2. Absolute positioning + Transform reverse offset.

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

The principle of implementation: first absolute positioning relative to the parent offset 50%, and then use transform to reverse the offset. Since the transform is calculated as the element itself, it is possible to use 50% for reverse offsets.

limitation: This scheme needs to fix the size value of the center block (cannot set the range limit of max-width, etc.), the browser needs to use this as the benchmark to calculate the positioning!

In general, the center of Scenario 2 will be better than scenario 1, but when drawing the icon will use the transform to do some offsets, in order not to cover the offset effect so the way to use the scheme to do the center. In addition to the two centering methods, there are inline-block to align the after/before child elements, there are table and Flexbox way to achieve the center, but the picture icon itself is limited in level and also use the Before/after, so the icon is not suitable for drawing.

Last point

The current pure CSS icon is still quite a lot of application scenarios, this icon of the scheme to avoid doing sprite and maintenance sprite diagram trouble, and reduce the request for picture resources, from the performance will be so 0.01s improve it. Do not heap Sprite chart also convenient to adjust color, performance and 0.01s optimization, this set of CSS icons you do not hurry up?!

PS: You crossing feel good words, also please give a GitHub star ha. A few more stars, perhaps the promotion of a raise to win the white rich beautiful ~ ~ ~

PPS: Attach a few divine css effects (by Fabrizio Bianchi Source: http://codepen.io/fbrz/pen/iqtlk):

72 change of a label to create a library of pure CSS icons