[Issue 1] CSS color assignment technology for small icons in PNG format, Issue 1. png

[Issue 1] CSS color assignment technology for small icons in PNG format, Issue 1. png

Preface

This is a black technology that allows you to change the color of small icons without looking for a designer! @ Zhang xinxu authorized to share this article.

This article is edited by @ cactus recommendation

The text starts from here ~

I. Seeing is believing

CSS can modify the image color! Click here: png small icon CSS coloring demo

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

Color-changing icons

Next, we can select a color, such as purple, and then:

Purple colors

Red color assignment

Is it really amazing! In the future, designers do not need to provide several sets of color pictures.

Technologies such as SVG and icon fonts are not so dazzling.

II. The principle is actually very simple

The principle is actually very simple. The CSS3 filter is used.filterIndrop-shadow,drop-shadowFilters allow you to add projections to non-transparent areas of an element or image.

Ifdrop-shadowI am not very familiar with it. I suggest you first read the article "CSS3 filter: difference between drop-shadow filter and box-shadow" written earlier!

For png small icons with transparent backgrounds, if we apply a non-fuzzy projection, isn't it equivalent to generating a small icon of another color?

Then, we hide the original icon outside the container, and the projection icon is in the middle of the container. Does it seem like a color effect?

For example, in the demo of this articleoverflow:hiddenRemove the original icon!

Remove overflow: After den. 3. Implementation is difficult.

The principle is shown above. When I first implemented it, I thought it was very simple, because I could implement my own ideas in minutes. Later I found that some were naive and the Chrome browser could not display them; the FireFox browser does! Finally, what exactly happened.

In Chrome,drop-shadowIt has the following rendering features:

In Chrome, if the main part of an element is invisible in any way on the page, its drop-shadow is invisible; even if the object is visible in 1 pixel, drop-shadow is completely visible.

So I tried:

• Text-indent negative value hides the original image without projection. failed!

• Clip cropping hidden, no projection, failed!

• The negative value of margin hides the original image without projection. An error occurred!

• The left negative value hides the original image without projection. An error occurred!

Communication fails, causing great obstacles.

Later, the spirit of light showed that what would happen if the part of my object was also visible but transparent (No projection would happen )?

As a result, I tried the transparent borders, slots, and achievements that once made countless battles!

Therefore, the following CSS statement must not be less:

border-right: 20px solid transparent;

Iv. Compatibility

Supports IE13 +, Chrome and FireFox browsers, mobile iOS, and Android4.4 +. That is, basically, mobile terminals can now use this technology.

It not only saves traffic, but also makes development easier and maintenance easier.

Last

• CSS3 filter: drop-shadow filter and box-shadow difference application: http://www.zhangxinxu.com/wordpress/2016/05/css3-filter-drop-shadow-vs-box-shadow/

• Png small icon CSS coloring demo: http://www.zhangxinxu.com/study/201606/png-icon-color-fill.html
  

About this article
Author: @ Zhang xinxu
Http://www.zhangxinxu.com/wordpress? P = 5429

This is out of stock for the moment. The purchased children's shoes are waiting.

[Books] CSS world