Как сделать такой фон из градиентов неправильной формы, которые заходят на несколько блоков?

Во всех случаях у градиентов необычная форма и средствами css их не создать. Тогда их приходится вырезать из макета в формате png или svg.

Да, svg

Градиенты, которые не выходят за пределы блока можно установить через свойство background. А чтобы градиент выходил за пределы блока, приходится добавлять в html картинку и абсолютно позиционировать ее.

Для этого придумали псевдоэлементы. Вовсе незачем из-за этого засорять разметку.
Также можно задать фон для всего body или крупных секций, если пятна не привязаны к содержимому.

Но png много весит, а когда я использую svg, то градиент становится более тусклым и сайт начинает лагать, наверное из-за большой ширины и высоты картинки.

Часто помогает заглянуть в сам SVG, посмотреть, что там творится и упростить.

Сталкивался ли кто с подобным фоном?

Сейчас это тренд.
У меня 80% последних макетов такие.

Обычно редактирую макет. Делаю фрейм так, чтобы он был симметричен относительно центральной вертикальной линии. Экспортирую как svg.
Тогда не нужны абсолюты. Просто bg по центру.

spoiler

По верху clip, чтобы не нужно было возится с отрицательными bg position

Невидимые пробелы между словами, как убрать?

Вроде взрослый пользователь уже, 22-ой вопрос пишет, а песочницы на jsfiddle.net всё нет.

Больше того, велик шанс, что пока вы делаете песочницу сами поймете в чем дело.

Как заполнить целиком фон блока в CSS, если у потомка устанволен margin?

Роман Кофф,

Не понял, где я в таком случае должен margin на padding поменять.

Задать родителю padding, у дочернего убрать margin.

Нормально ли так делать?

maaestr0, собираете все svg в спрайт и используете.
Для фона спрайт должен быть не из symbol, а из комбинации symbol+view+use либо из svg.
Альтернатива спрайту: инлайном в css, причем можно записать в переменные.

Другой вариант использования спрайтов и кастомных свойств для замены цвета https://jsfiddle.net/Ankhena/zLm8sqb5/

Но js тут всё равно не нужен.

Нормально ли так делать?

maaestr0, в чем разница у этих иконок?
Черно-белые?
Цвет меняется?

Нормально ли так делать?

Это очень странное решение при наличии кастомных свойств.
https://jsfiddle.net/ks7rcudm/

А что, иконка серьезно меняется прям на другую?

Как правильно назвать блоки лендинга?

Должно помочь:
https://9elements.com/bem-cheat-sheet/
https://github.com/yoksel/common-words

Как разместить блок внутри ::after?

И зачем вы удаляете вопрос и создаете новый, когда я вам в прошлый раз уже написала, как это делают:

С помощью:
- vertical-align для инлайн-блоков
- флексов
- гридов

Как реализовать карточки разных размеров в виде галереи?

Прям гридом: посчитать количество строк и столбцов в самом гриде и сколько "клеточек" занимает каждая из фото.

Альтернатива: скрипты типа masonry

Что имеют в виду, когда говорят о кроссбраузерной вёрстке?

Что имеется в виду? Поддержка конкретно IE?

Поддержка браузеров, указанных в ТЗ.

Ну и заодно, понимание того, что это будет значить, если в ТЗ ничего нет про перечень бразеров.

Картинки Html и CSS?

За пропорции картинок отвечает свойство object-fit

Как сделать слайдер?

Где вы подключаете стили слика? ;)

Почему всегда работает "активный" класс к блоку?

b_tema_rd, https://jsfiddle.net/0xf2qrka/
Но при этом нужно понимать, что не должно быть зазора между пунктами основного меню и выпадашками.
Либо туда подкладывать псевдо или прозрачную часть div.

Как иначе можно сделать стилизацию учитывая замечание?

Сергей delphinpro, да, я тоже не поняла. Флекс как флекс, почему нет..
(в моем комментарии под словом автор имелся в виду ревьюер)

Как спозиционировать 4 изображения стильно?

Так

Если это не помогло, то ваши попытки в песочницу на jsfiddle.net с пояснениями что делали и что не получилось.

Почему всегда работает "активный" класс к блоку?

Есть какое-то объяснение, зачем вы это делаете на js?
Я понимаю, при клике, но при hover зачем?

Как запретить прокручивать страницу, когда на весь экран развернуто fixed меню?

htmlclassic, закроете меню и окажетесь там же, где были. Да и при открытии тоже не окажетесь наверху.
Ну разве что, вы открываете меню ссылкой у которой в href стоит # и вы забыли preventDefault

Покажите, как вы его открываете на jsfiddle.net

Как иначе можно сделать стилизацию учитывая замечание?

aleksandrkotov, очень интересно, а как вы тогда его используете :)
Открываете MDN, каждое из свойств флексбоксов (ну или не только флексбоксов) и смотрите.
Например, https://developer.mozilla.org/ru/docs/Web/CSS/flex...

Ссылки в Slick Slaider не работают?

factvlad, сотворите песочницу со своими стилями или сами попробуете разобраться?

Кстати, slick довольно заметно устарел.
Я бы рекомендовала успеть переехать на swiper.js

Как иначе можно сделать стилизацию учитывая замечание?

Ну и зачем вы удалили предыдущий вопрос и создали новый?

Я не совсем понимаю, почему вы используете только display: flex; без каких-либо других настроек flex. Может быть, есть какой-то другой способ сделать это?

Вероятно, автор не знает, что у флексов есть значения по умолчанию.
Но лучше спросить у него.

Иначе можно использовать, гриды, инлайн-блоки, флоаты... таблицы в конце концов, если совсем по-старинке.