Как сделать на CSS c linear-gradient фон с мозаикой из черных маленьких квадратиков?

Question

[Сергей Кореневский]

Есть у сайта фон картинка. Нужно поверх картинки сделать как бы эфект старого кино.
Нужно поверх картинки замостить фон квадратиками с размером 3px на 3px каждые 10px по вертикали и горизонтали.
чтобы фон был как тут, но только не фоновая картинка была замощена фона, а linear-gradient.

Comments

[Сергей Кореневский]

Вариант 1 ShadeZP :

body {
	 background:
			linear-gradient(-90deg, 
				rgba(255, 255, 255, 1) 50%, 
				rgba(255, 255, 255, 0) 50%,
				rgba(255, 255, 255, 0) 100%) 0/20px 20px,
			linear-gradient(0, 
				rgba(255, 255, 255, 1) 50%, 
				rgba(255, 255, 255, 0) 50%, 
				rgba(255, 255, 255, 0)) 0/20px 20px,
      red;			
}

Вариант 2 Сергей Кореневский :

body{
  height: 500px;
  background: 
    radial-gradient(circle, #0003 1px, #0017 1px) repeat 0 0/4px 4px fixed;
}

Вариант 3 Seanyr :

.variant1 {
  background: radial-gradient(black 2px, transparent 2px) left top/10px 10px;
}
.variant2 {
  background:
    radial-gradient(black 2px, transparent 2px) left top/10px 10px,
    radial-gradient(black 1px, transparent 1px) left -1px top -1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left -1px top 1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left 1px top -1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left 1px top 1px/10px 10px;
}
.variant3 {
  background:
    radial-gradient(black 1px, transparent 1px) left -1px top -1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left -1px top/10px 10px,
    radial-gradient(black 1px, transparent 1px) left -1px top 1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left top -1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left top/10px 10px,
    radial-gradient(black 1px, transparent 1px) left top 1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left 1px top -1px/10px 10px,
    radial-gradient(black 1px, transparent 1px) left 1px top/10px 10px,
    radial-gradient(black 1px, transparent 1px) left 1px top 1px/10px 10px;
}

Answer 1

[Seanyr]

С линейным не знаю, но можно сделать с радиальным. Накидал тут 3 варианта, с возрастающей степенью упоротости, в зависимости от того насколько принципиально чтобы были квадраты:
https://codepen.io/Arseny_dp/pen/OJMmVvv

А так, с фоновой картинкой довольно чистый вариант. Почему не хотите его использовать?

Comments

[Сергей Кореневский]

мой Вариант:
(я тогда не дождался ответов, и решил на радиальном костылик сделать, а потом забыл про вопрос)
https://codepen.io/koreshs/pen/VweQoVP

Answer 2

[ShadeZP]

на линейном что то типо такого https://codepen.io/shadezp/pen/OJMmxqE

Comments

[Ankhena]

Это в обратную сторону. У вас прозрачные маленькие квадратики, а нужно ведь наоборот.

[Seanyr]

Ankhena, тоже сначала думал про такой вариант

[Ankhena]

Seanyr, логично, это ш самая простая мысль. Тоже ее некоторое время думала.

Answer 3

[Aetae]

На практике градиенты на таких маленьких величинах(<10px) крайне не надёжны и неконсистенты, их поведение рандомно разнится от браузера к браузеру и от системы к системе: то хром всё заблюрит, то фокс, то пикселизация вылезет...
Рекомендую использовать оптимизированное .png, (размером не меньше сотни пикселей, а не одним квадратиком, чтоб не грузить рендер почём зря) и вставленное как data: uri для скорости.

Comments

[Seanyr]

почему не svg?

[Aetae]

png для этой задачи подходит больше: весит меньше и не грузит движок лишними вычислениями вектор-растр и не создаёт лишний dom.