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

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

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

9 ответов

8 просмотров

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. Так и сделаю

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

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

А чем вам питонисты не угодили?😂
.
79
Язык Си можно выучить за день? По книжке ANSI C на 230 страниц
Vincent Vegan
29
Всем привет, написал код ниже, но он выдает сегфолт, в чем причина? #include <stdio.h> #include <stdlib.h> #include <string.h> struct product { char *name; float price; };...
buzz базз
75
Есть какой-нибудь для Delphi/FPC T*Compression(Decompression)Stream на базе LZ4/Zstd/любой другой быстрый(и хорошо сжимающий) алгоритм А ещё лучше в pure pascal А ещё лучше од...
notme
17
Dim Dim, [02.07.2024 11:07] DB 0x62 Dim Dim, [02.07.2024 11:07] DB 0x66 Dim Dim, [02.07.2024 11:07] кто пояснит что это?
Dim Dim
14
Ошибка: segmentation fault (core dumped) Код: pastebin.com/BEsNNSSV Сообщение от компилятора: отсутствует ОС: Arch Linux Ядро: x86_64 Linux 6.9.7-arch1-1 Процессор: Intel Cele...
sec
4
Ещё такой вопрос. Мне необходимо хранить пароль пользователя локально. Для этого планирую использовать ini файл. Это для автозаполнения полей логин и пароль при авторизации. Е...
Евгений
19
Ребят, а за скок можно впарить анон чат с апишкой и веб админкой ?
Eugene Неелов
15
Кстати, я тут еще с одной темой столкнулся, вот учу я C++, на таком то ресурсе, а остальные постоянно советуют практиковаться, что то писать, проекты, но как писать если вот т...
aaswq1
7
А как лучше конвертировать физический адрес в виртуальный при маппинге? В случае ядра у меня, например, direct mapping, первые 768МБ я как есть мапплю в higher half, а остальн...
Evg Resh
26
Карта сайта