Выравнивание логотипов средствами CSS

[Alexufo]

Да, известная проблема. Но я считаю ее надо решать в css последним этапом и решать начинают ее там, потому что уже лень переделывать размеры лого. Для меня все логотипы нужно хранить в одном файле в формате редактора. Там же использовать одинаковый размер полота, в котором и следует размещать логотипы с правильным масштабом и положением по высоте, попадая в общую горизонтальную ось. Теперь у вас есть гарантия, что логотипы хорошо лягут во flex сетку при использовании. Ведь все свойства css масштабирования не опираются на содержания изображения. У вас лого может быть в файле в притык к краям, а другой с кучей пустого места и object-fit: contain хоть и отработает, но легче от этого не станет. Файлы лого нужно так же подводить к общему знаменателю.

Другой подход — накладывать патчи индивидуально. Логтипы — уникальная сущность. Ее уникальность заключается в определенном пути к файлу. Если сверстать на background ах, уникальностью уже будет выступать класс. А раз в css идет разметка уникальных обьектов, то дополнительно разметить индивидуально их padding-ами и max-width-ами не возбраняется.

не предложили использовать CSS-селекторы для того чтобы применить свойство mix-blend-mode только к .jpg- и .png-изображениям:

Можно делать как ozon, не париться и сверху накладывать черный с прозрачность 95%. Он немного затемнит белые участки на изображении, но это совершенно незаметно. К тому же, mix-blend-mode: multiply; не справится, если у вас в лого слабоконстрастные элементы.
( не заметил, это перевод, да блдтллдщдь)

[GCU]

Sketch дешевле чем Photoshop, основная задача быстро и красиво делать наборы макетов, которые после нескольких итераций будут утверждены. Условно говоря заказчику понравился надцатый вариант, и только после этого можно верстать, разбивать на компоненты и т.д. Переделывать макет в дизайн проге, которая векторный и растровый редактор проще и быстрее, чем менять вёрстку.
Даже так — менять вёрстку и компоненты потом настолько накладно, что это нормально выкинуть несколько вариантов макета в корзину, но точно убедиться, что от заказчика потом правок больше не будет (ха-ха).
Кстати на этапе дизайна все может и закончиться, до вёрстки дело не дойдет.

[Denai]

Вёрстку менять быстрее, если она нормальная.
те же гриды поди нарисуй в фотошопе, а так 2 строки и сразу результат

[mSnus]

а Guide > New Guide Layout чем хуже?

[Denai]

Дольше раз в десять. Больше ничем)

[mSnus]

хмм… а чему там тормозить? или какие-то супер-сложные гриды у вас?

[Denai]

Рисовать дольше, а не отображается медленнее

[mSnus]

Можете показать картинку такой сетки, если вам не сложно?

[Denai]

Лень искать/писать код, есть видео: youtu.be/9hQkkrkmLFw?t=2124

[umidnazarov27]

думаю для этого есть специальные программы типа Sketch, Adobe XD. Они позволяют быстро накидать сам сайт, а при желании можно сделать почти полноценную программу/сайт с помощью прототипирования. Я попробовал один раз так сделать, на прототипирование на XD ушло около 15 минут, и прототипом можно было взаимодействовать как сайтом. Сайт я делал больше нескольких часов (с большими перерывами конечно). Как упомянули выше готовый прототип я могу показать заказчику, а потом уже начать верстать (сэкономлю время и заказчик скорее всего потом не будет недовольным).

[mSnus]

потому что это модно и под Mac

[23d]

Ну тут как минимум нет оптического выравнивания

[n_ds]

Я может чего не понимаю. Зачем это все делать если можно на этапе нарезки макета для всех лого можно сделать одинаковых размеров подложку?