но это я так понял слайдер. Я смогу его сделать, но может есть какие-то у ещё варианты, кроме как заменять картинку через js в css. И я уверен что возникнет проблема з соответствием пазлов в новой картинки. Предложите идею как можна сделать?
clip-path. Или сверху маску какую нибудь наложить...
Я думал наложить grid сверху, но gap же будет прозрачный
Можно ещё руки дизайнеру вырвать 😈 Оттуда где растут и приставить у плечам. Хехе. З.ы. я бы сделал одну картинку. Обрезал бы ее маской с этими полосками...
а как сделать эту маску? Если grid то gap же без цвета
Бох ты мой. Убери грид, сделай одну картинку на весь блок и сделай свг с четырьмя квадратами и его маской к картинке примени. Погугли mdn css mask
Мне приходит в голову просто ввести политику менеджмента изображений или на стороне сервера обрезать принудительно, чтобы изображения всегда были одного соотношения сторон. Дальше берете одно из таких изображений, верстаете конструкцию из четырех блоков, с gap как в дизайне и с помощью background-posititon указываете это изображение для каждого блока. Все. У вас получился универсальный блок для любых изображений с учетом того, что изображения всегда одного соотношения сторон.
Примерно так, код получился довольно простым и изображение и сетка полностью адаптивны, разве что, можно уменьшить ширину бордеров на небольших ширинах, чтобы они были не такими жирными. https://codepen.io/afider/pen/ExGVJvN
Примерно так, код получился довольно простым и изображение и сетка полностью адаптивны, разве что, можно уменьшить ширину бордеров на небольших ширинах, чтобы они были не такими жирными. https://codepen.io/afider/pen/ExGVJvN
Ого, спасибо большое, выглядит лучше чем мой код с clip-path. Так и сделаю
Обсуждают сегодня