"Turn" PNG format small icon of CSS any color coloring technology

Convert from Zhang Xin Asahi's PNG format small icon CSS Any color coloring technology one, seeing is real

CSS can modify the color of the picture, yes, can, seeing is real! You can fiercely click here: PNG small icon CSS Color demo

The above is not very black is the original icon, is a PNG image, the following can be color:

Below, we randomly select a color, such as purple, and then:

is not feeling very bad! In the future, designers will not need to provide several sets of color pictures.

SVG, icon fonts and other technologies do not seem so dazzling.

Second, the principle is actually very simple

The principle is actually very simple, using the CSS3 filter filter drop-shadow , the drop-shadow filter can add a projection to an element or a non-transparent area of the picture.

If you do drop-shadow not know very well, it is recommended to take a look at the previous time written "CSS3 Filter:drop-shadow filter and Box-shadow difference Application" article!

For a PNG small icon with a transparent background, if we apply a projection without a blur, does it equate to a small icon that generates another color?

Then, we hide the original icon outside the container, the projection icon in the middle of the container, it is not visible to the person is color-rendering effect?

For example, the demo, if the icon to remove the parent overflow:hidden , the original icon is exposed!

Third, the implementation of the time is actually difficult

The principle of the above, when I first realized the time, thought very simple, because minutes can realize their own ideas, and later found some naïve, Chrome browser can not show it, Firefox browser is available! Gee, what the hell happened.

Under Chrome, drop-shadow there is a rendering feature like this:

In Chrome, if the body part of an element is not visible in any way, as long as it is invisible in the page, the Drop-shadow is not visible, and the solid part is visible even if it is 1 pixels in Drop-shadow.

So, I tried:

• Text-indent negative Hide the original image, no projection, failure!
• Clip clipping hidden, no projection, failure!
• Margin negative to hide the original image, no projection, failure!
• Left negative hides the original image, no projection, failure!

Not all, the implementation has encountered a huge obstacle.

Later, the Epiphany, if my physical part is also in the visible area, but is transparent, what will be (anyway, there is no projection)?

So, I tried to stand under the numerous exploits of the transparent frame, lying trough, and meritorious, became!

Therefore, the following CSS declaration is no less:

border-right:20px solid Transparent;

Iv. about compatibility

ie13+ support, Chrome and Firefox browser support, mobile iOS support, android4.4+ support. That is, basically, the mobile side can now use this technique.

Not only saves the flow, but also makes our development more simple, maintenance more convenient.

V. The conclusion of broken thoughts

In fact, this article's technical inventions (mainly transparent border processing) in the "Drop-shadow vs Box-shaow" This article after the completion of the study. Originally wanted to write a small patent, rub some breakfast money. As a result, the new factory write patent no cost, and the cycle will be 3 years.

3 years, my son can soy sauce. So, just, share it directly.

Today, number 8th, this month has 6 articles, wrote the article violently went down. In order to free up large and continuous spare time, to secretly carry out other major projects.

Time Machine If you see this article after 3-5 years, and you are in college in 2016, then, when I write this article, you may be tossing and turning, and worrying about tomorrow's exam. In short, do not worry, I have to find a very hard backstage, to ensure that you do not worry about the college entrance examination, rest assured to sleep it! Yo, you're wondering which backstage. Hee-hee, say to fear scare you ———— Guanyin Bodhisattva!

This article is the original article, contains the script behavior, will update the knowledge point frequently and corrects some errors, therefore reproduced please retain the original source, facilitates the traceability, avoids the old error knowledge misleading, simultaneously has the better reading experience. This address: http://www.zhangxinxu.com/wordpress/?p=5429

(End of this article)

"Turn" PNG format small icon of CSS any color coloring technology