I
I
Infekt2015-06-25 09:10:43
css
Infekt, 2015-06-25 09:10:43

I don't know the name of the effect?

Very often I see the "grid image" effect, such as here mockflow.com/apps/bannerpro/. What is it called and how to use it?

Answer the question

In order to leave comments, you need to log in

4 answer(s)
M
Mikhail Lazarev, 2015-06-25
@Infekt

All this is done with transparent png as a pattern ( background-image in css)
My grandma's recipe:
mockflow.com/images/bg-pixel-30.png - just paste this png.

A
Arseniy Ilyashov, 2015-06-25
@Tavion

Through a pseudo-element, such a background is superimposed on top of the image.
In this case, the overlay is done like this:

.bannerProHead>header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../../images/bg-pixel-30.png');
}

O
Olga Moskvitina, 2015-06-25
@loly_girl

Pattern over the image.

R
Roman Mirilaczvili, 2015-06-25
@2ord

If the grid is not applied dynamically, then you can immediately create the target image in a graphics editor by adding a layer with the grid. This way you can save unnecessary operations when compositing in the browser.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question