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

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

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

9 ответов

14 просмотров

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обсуждают сегодня

Ну вот просто даже давайте вот как. Какой нибудь конкретный кейс, можете в пример привести, где бч работает и приносит прикладную пользу, а не просто что бы было? Не крипту.
Alexander Andreev
22
Всем привет! Имеется функция: function IsValidChar(ch: UTF8Char): Boolean; var i: Integer; ValidChars: AnsiString; begin ValidChars := 'abcdefghijklmnopqrstuvwxyzABCDE...
Евгений
44
> Копаем глубже > Следующий момент был, когда я спросил его, знает ли он JavaScript. Он ответил, что его учили работать с C#. Я тоже в университете писал на C#, но даже там мн...
Oleg Volkov
4
лучше скажите, причём тут паскаль?
Alexey Kulakov
36
И никого не интересует какие пакеты кто использует. ((% Заходишь на сайт симфони и видишь поддержку Украины - по законам РФ это ж экстремизм. Только никто не отказывается от с...
Am Ambrion
11
Чтобы перехватить все нажимания буков на форме, надо хук ставить? Пробовал на форме ОнКейДаун, оно ловит клаву если фокус не на компоненте с вводом текста
Serjone
15
Но, может, есть уже проверенная? Наши требования такие: 1. Сообщения должны приходить из Инста в CRM оду 2. Должна быть возможность подключить несколько экаунтов Инстаграм. Р...
Alexander Sharoiko MSE / Александр Шаройко
7
Народ! Впервые клиенту пришло письмо от РКН, у вас, дескать, есть яндекс метрика, а нигде не написано, что вы ее юзаете. Никто не сталкивался?
Sasha Beep
14
Всем привет! вывожу на общей стр дочерние ресурсыв каждом ресурсе галерея, и первая фотка должна выводиться на общей [!DocLister? &prepare=photo !]
Alekso
12
Добрый вечер. Хочу чтобы у меня в классе поле было функцией, которая возвращает строку. Делаю так: interface ... TGetOutPath = function : String of object; ... protec...
Kirill Filippenok
12
Карта сайта