Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use CSS to deal with pictures into pixel wind, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

What is Pixel style?

Pixel style is a kind of art style that uses fixed-size solid-color pixel squares as the basic unit for creation, including but not limited to painting, architecture, games and other fields.

One of the most familiar is, of course, the pixel images of early video games.

[the pixel image of "Mario" on the early red and white machine]

Of course, the use of pixel wind in early video games is actually a kind of historical helplessness, hardware constraints, so that game developers have to choose this kind of art style with strong realization power and low performance cost.

However, today, pixel wind is still popular in various fields, and it has been given more aesthetic and retro significance.

Train of thought analysis

First, take a look at the original picture of the "love map" to be dealt with this time:

[love map]

To turn a picture like this into a pixel, the first thought came to my mind:

Idea 1: cut and fill through canvas

Use canvas to cut the picture into nasty blocks, and then calculate the color median of each area separately, and fill it with solid color. Yes, this idea can solve the problem quickly and flexibly.

But in this way, without the use of CSS, won't my colleague Ah Yang's first date fall through completely?

❌❌

No, no, no! I have to change my way of thinking and use CSS to achieve it!

Idea 2: large radius Gaussian blur filter to take the median

The main ideas are as follows:

The picture is divided into N div, and each div holds a portion of the image.

Each div uses css-filter to perform a blur (Gaussian blur), which visually achieves the effect of taking the middle value and filling div.

According to this line of thinking, there is only one difficulty, how to make each div hold part of the picture?

Oh, it's not hard to help my colleague with a big heart.

Implement

In fact, it is not difficult:

First, we use 8-8 to divide a div into 64 parts, no doubt the grid layout.

Code:

.mask-group {width: 128px; height: 128px; display: grid; grid-template-columns: repeat (8jue 1fr); grid-template-rows: repeat (8dje 1fr);} const el = document.querySelector ('.mask-group') for (let I = 0; I < 64; iTunes +) {const itemEl = document.createElement (' div') itemEl.className = 'mask-item' el.appendChild (itemEl)}}

Then we set a heart-shaped background for each .mask-item element

Then the effect becomes like this, because the background of each picture starts from the upper left corner, so it certainly doesn't meet expectations.

Next: we need to insert this sentence into the js traversal:

ItemEl.style.backgroundPosition = `- ${Math.floor (I% 8) * 16} px-${Math.floor (iThink 8) * 16} px`

The purpose of this line of code is to assign a separate background-position style to each .mask-item element, calculating that the upper-left corner of the background image of all .mask-item elements overlaps to a coordinate point.

The effect is as shown in the figure:

3. Increase the interval and Gaussian blur according to the assumption, we only need to add the interval to the div, and then give the Gaussian blur to achieve the effect. So the code is as follows:

.mask-group {/ * the following is added * / grid-row-gap: 2px; grid-column-gap: 2px;} .mask-item {/ * the following is added * / filter: blur (8px)}

But the effect is:

What went wrong?

Gaussian blur unexpectedly acts on areas other than inner-box!

Mask-image limits the visual area

No way, in order to limit the effect area of Gaussian blur, I have to go through mask-image.

First get a pure black all-black.png file of 16'16 pixels.

The code is as follows:

.mask-item {/ * the following is added * /-webkit-mask-image: url ('. / all-black.png'); mask-image: url ('. / all-black.png');}

Effect picture:

Hey, it's like that now, but because of Gauss, the color is lighter a lot, nothing, fine-tune it.

Adjust the color

The code is as follows:

.mask-item {/ * the following is a change * / filter: blur (8px) contrast (400%) saturate (400%);}

The above is all the contents of the article "how to use CSS to turn pictures into pixels". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.