Не знаю как называется эффект?

Question

[Infekt]

Очень часто встречаю эффект "сетчатого изображения", как например здесь mockflow.com/apps/bannerpro/. Как он называется и как его применить?

Answer 1

[Mikhail Lazarev]

Все это делается за счет прозрачного png в виде паттерна (background-image в css)

Рецепт моей бабушки:

1. В фотопоше создаешь новый документ 2х2 пикселя
   
2. Удаляешь фон документа
   
3. Создаешь внутри черный квадрат 2х2 пикселя
   
4. Задаешь квадрату прозрачность процентов в 30, например
   
5. Дальше создаешь две черных точки 1х1 пиксель в шахматном порядке
   
6. Сохраняешь это через safe for web, смотришь чтобы стояла галочка на прозрачности (transparency).
   

Бонус:
mockflow.com/images/bg-pixel-30.png - просто вставь этот png.

Answer 2

[Арсений Ильяшов]

Через псевдоэлемент поверх изображения накладывается такой фон.

В данном случае наложение сделано так:

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

Comments

[Дима Паутов]

А как подобные текстурки называются у дизайнеров, не знаете? Что бы в случае чего загуглить!

[Арсений Ильяшов]

Дима Турков: ни разу не гуглил - их проще самостоятельно сделать в каком-нибудь paint.net

Answer 3

[Ольга Москвитина]

Паттерн поверх изображения.

Answer 4

[Everything_is_not_so_bad]

Если сетка не накладывается динамически, то можно сразу создать целевое изображение в графическом редакторе, добавив слой с сеткой. Так можно сэкономить лишние операции при композитинге в браузере.