Как можно во flex сетке закрасить отступы gap?

bldeser,

элементам сделать box-shadow белого цвета, но опять же, при определенном значении она налезает на соседние элементы.

Разумеется.
Поэтому спан или псевдо.

Как можно во flex сетке закрасить отступы gap?

bldeser, можно и без спана, а псевдик абсолютом воткнуть с той же тенью, что и у спана.

Как можно во flex сетке закрасить отступы gap?

bldeser, вокруг текста. Скруглить, задать тень. Лишнее обрезать.

По дороге можно заменить флексы на гриды, чтобы не смотреть на вот это flex: 1 0 calc(25% - 10px)

Как можно во flex сетке закрасить отступы gap?

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

Как можно во flex сетке закрасить отступы gap?

bldeser, простой способ в лоб: добавить span.
Веселее - закрасить ячейки радиальным градиентом.
Наверное, ещё веселее приладить туда маску.
Или ещё что-нибудь, что сейчас не пришло мне в голову.

Как можно во flex сетке закрасить отступы gap?

bldeser,

а мне надо чтобы в элементах был виден фон заднего блока, черный (но вообще это для примера, там картинка будет вместо черного фона).

Отредактируйте вопрос и добавьте скрин того, как должно быть.
Ответа на мой вопрос про крайние ячейки нет.

Как можно во flex сетке закрасить отступы gap?

Александр Васильев, не то, чтобы прям gap, но вот будущее https://www.w3.org/TR/2025/WD-css-gaps-1-20250417/

bldeser не понятно как красить скругления у крайних ячеек.
Но если нельзя покрасить флекс в белый, потому что там уголки должны остаться черными (кажется, что это выглядит очень странно), то подложить псевдоэлемент.

Почему svg с серой полосой по середине?

Сергей delphinpro, конечно, нужно добавлять и хоть из jpg.

Как сделать "прилегание" элементов к друг другу?

Dmitry,

Не знаю, актуален ли ещё вопрос

Вам виднее, ведь это ваш вопрос.

у меня мистика

Нет никакой мистики. Все картинки работают одинаково.
Все позиционируются относительно.fixed-overlay-modal.
По высоте
top у них задан в px.
top родителя тоже.
Поэтому верхний мальчик всегда прибит к верху .fixed-overlay-modal, а остальные съезжают при изменении высоты.
По ширине
left у всех картинок задан в vw.
Ширина родителя при этом равна вьюпорту.
При изменении размеров окна все картинки двигаются. И верхний мальчик тоже.

Везде абсолютно одинаковый код, причём, кажется, иногда оно правильно работает для отдельных картинок, а потом всё опять сбивается.

Девтулзы Хрома любят подглючивать при работе в адаптивном режиме или переключении в адаптивный и обратно. Особенно, если открыто много вкладок.

Вывод:
Если нужно, чтобы что-то позиционировалось относительно блока с классом .modal, то так и делайте, а не от .fixed-overlay-modal. Иначе вычисляйте значения через calc и/или используйте clamp, min, max.

Альтернатива (пока немножко из будущего) - position-anchor — позиционирование от якоря.
https://sitist.ru/position-anchor.html

P.s.
1. Эти ваши "мальчики" это не контентные изображения. Если по какой-то причине не получается сделать их псевдоэлементами, то нужно убрать у них альты и скрыть от скринридеров aria-hidden="true".
2. Имеет смысл пересмотреть ваш код и перестать позиционировать блоки с помощью text-align.
Для этого есть банальный margin-inline: auto и флексы с гридами.

Всё, хватит, а то там целый разбор получится.

Почему svg с серой полосой по середине?

Adamos, если дизайнер использует только иконки из шрифта, то почему бы и нет.

чем каждый раз возня со спрайтами

Какая ещё возня?
Даже если руками вставлять, то это copy as svg в фигме и ctrl + v в спрайте и дописать id. Не говоря уж про автоматизации.

Почему svg с серой полосой по середине?

Adamos,
1. Мусор в разметке при использовании большинством пользователей.
2. Тянется весь шрифт, а используют обычно десяток иконок.
Либо нужно чистить от лишнего.
3. Сложности с добавлением других иконок.
2 и 3 => проще собрать спрайт.
4. Ведет себя как шрифт, line-height и т.д.
5. Некоторое время назад читала про доступность контента псевдоэлементов для скринридеров.

Т.е. шрифт - это целая коллекция svg иконок, плюс к ним файл стилей + к ним мусор в разметке.

Вместо просто набора из только нужных иконок, которые можно использовать везде, хоть в стилях, хоть в разметке. Либо этот же набор в кастомках, если не нужны use или img.

Да, когда были проблемы с использованием svg, иконочный шрифт выглядел соблазнительным и удобным. Сама использовала и радовалась. Но теперь это превратилось в архаизм, про который рассказываю студентам лишь для того, чтобы не удивились и понимали, что происходит, если попадутся такие сайты с таким способом вставки иконок в поддержку.

Почему svg с серой полосой по середине?

FavnAristotel, сохранять эту иконку вот в таком виде вообще не имеет смысла, она всё равно привязана к шрифту.
Либо возьмите шрифт (хуже) либо скачайте иконку в правильном svg, где она вектор (лучше).
Сейчас нет смысла использовать иконочные шрифты типа fontawesome. Сейчас спокойно можно использовать маски, инлайнить в кастомные свойства или спрайты (из svg, не из symbol!).

Почему svg с серой полосой по середине?

FavnAristotel, где результат?
Либо наоборот, исходник.

Но, конечно, макет в фотошопе в 2025 году это просто праздник.
Полно каналов в тг, в которых публикуют ссылки на макеты в Фигме для тренировки.

Умение верстать откуда угодно это, конечно, хорошо, но
1. Фигма всё таки актуальнее.
2. Сами макеты в фотошопе скорее всего устаревшие, а навыки и приемы имеет смысл прокачивать актуальные. По крайней мере в первую очередь.

Как найти и удалить дубликаты файлов в двух папках через TotalCommander?

Вася Пупкин,

когда нужно было найти недостающие файлы при сравнении каталогов

Инвертировать он не может?

Как найти и удалить дубликаты файлов в двух папках через TotalCommander?

Есть какая-то причина, по которой эту задачу нужно решать непременно Тотал командером?
Полно же всяких приложений, которые это делают. И они не сложно гуглятся.

если бы я умел писать скрипты

ИИ это вполне по силам.

Только бэкапы не забудьте, чтобы не было мучительно больно.

Как сделать swiper слайдер непрерывно движущимся?

Хорошо бы сначала узнать откуда там вообще рывки.
Просто потому что вы забыли убрать задержку между анимациями или используете функцию отличную от линейной или почему-то ещё.

Как сделать вращение текста вокруг svg?

ssawyer,

Вот сейчас вроде по центру, только не понятно теперь как распределить слова по окружности

Посчитать.
Например, в образце выше всё посчитано.

Как сделать вращение текста вокруг svg?

ssawyer,

может, ещё упростим, чтобы совсем понятно стало

Попасть-то вы попали буквами куда надо. Но это же не центр.

Может вам поможет https://codepen.io/michellebarker/pen/oNXyJxv
https://css-irl.info/positioning-text-along-a-path...

Как сделать вращение текста вокруг svg?

Так, думаю, будет понятнее, что там с центром

Форматтеры SCSS разбивают короткие строки. Как вылечить?

Как вылечить?

Я бы рекомендовала не лечить.

1. Лучше подумайте о том, что так гораздо удобнее дописывать новые правила или вложенные селекторы. И не придется ручками ещё и переносы скобок исправлять.
2. В первом варианте больше шанс потерять скобки или сотворить двойную.
И соответственно, во втором варианте сразу видно, что есть обе скобки.
3. При второй записи все свойства начинаются на одном уровне и большинству так легче читать и воспринимать.

В программировании вообще приветствуется единообразие. Именно так и появились кодгайды и форматтеры для них.
А ваш подход это единообразие нарушает.