Привет, есть такой блок, я его сделал с помощью grid,

Question

Привет, есть такой блок, я его сделал с помощью grid,

но это я так понял слайдер. Я смогу его сделать, но может есть какие-то у ещё варианты, кроме как заменять картинку через js в css. И я уверен что возникнет проблема з соответствием пазлов в новой картинки. Предложите идею как можна сделать?

#frontend #programming #russian

0

26.08.2023

9 ответов

15 просмотров

Timka Timka Автор вопроса

Dlazder
clip-path. Или сверху маску какую нибудь наложить....

Я думал наложить grid сверху, но gap же будет прозрачный

0

26.08.2023

Alex Elkin🇪🇸

Можно ещё руки дизайнеру вырвать 😈 Оттуда где растут и приставить у плечам. Хехе. З.ы. я бы сделал одну картинку. Обрезал бы ее маской с этими полосками...

0

26.08.2023

Timka Timka Автор вопроса

Alex Elkin🇪🇸
Можно ещё руки дизайнеру вырвать 😈 Оттуда где ра...

а как сделать эту маску? Если grid то gap же без цвета

0

26.08.2023

Alex Elkin🇪🇸

Timka Timka
а как сделать эту маску? Если grid то gap же без ц...

Бох ты мой. Убери грид, сделай одну картинку на весь блок и сделай свг с четырьмя квадратами и его маской к картинке примени. Погугли mdn css mask

0

26.08.2023

Evgeniy Beskrovnyy

Мне приходит в голову просто ввести политику менеджмента изображений или на стороне сервера обрезать принудительно, чтобы изображения всегда были одного соотношения сторон. Дальше берете одно из таких изображений, верстаете конструкцию из четырех блоков, с gap как в дизайне и с помощью background-posititon указываете это изображение для каждого блока. Все. У вас получился универсальный блок для любых изображений с учетом того, что изображения всегда одного соотношения сторон.

0

26.08.2023

Evgeniy Beskrovnyy

Dlazder
clip-path. Или сверху маску какую нибудь наложить....

Примерно так, код получился довольно простым и изображение и сетка полностью адаптивны, разве что, можно уменьшить ширину бордеров на небольших ширинах, чтобы они были не такими жирными. https://codepen.io/afider/pen/ExGVJvN

0

26.08.2023

Evgeniy Beskrovnyy

Примерно так, код получился довольно простым и изображение и сетка полностью адаптивны, разве что, можно уменьшить ширину бордеров на небольших ширинах, чтобы они были не такими жирными. https://codepen.io/afider/pen/ExGVJvN

0

26.08.2023

Timka Timka Автор вопроса

Evgeniy Beskrovnyy
Примерно так, код получился довольно простым и изо...

Ого, спасибо большое, выглядит лучше чем мой код с clip-path. Так и сделаю

0

26.08.2023

Dlazder · Accepted Answer

Dlazder

clip-path. Или сверху маску какую нибудь наложить...

0

26.08.2023

169 похожих чатов

Привет, есть такой блок, я его сделал с помощью grid,

9 ответов

Похожие вопросы