0

Есть контейнер, внутри (или поверх) которого располагаются карточки. Вопрос в том как сделать так, чтобы пространство между карточками было белым (или просто не отображался контейнер) а внутри самих карточек видно контейнер.


В целом первоначальная задача: сделать карточки у которых будет "общий градиент" и который будет отображаться только в них.


После изображений прикладываю код и что имею на данный момент. На 1 изображении - прозрачные карточки без наполнения поверх градиента (показать, что он как бы общий). На втором - то, к чему я стремлюсь.

Изображение-карточек-1

Изображение-карточек-2

Такой код я имею на данный момент и скрин того, что получилось. gradient-cards это класс самого градиента: background: 'linear-gradient(71.92deg, #44B3FF 0%, #FF73E1 72.4%)'

<div
    class="relative grid h-[1000px] w-[1300px] grid-cols-[repeat(4,minmax(300px,300px))] grid-rows-3 gap-5 p-5 font-serif text-white shadow gradient-cards"
  >
  <div class="card flex h-[300px] w-[300px] flex-col items-center gap-y-[30px] rounded-3 bg-transparent p-5 shadow">
    <img src="" alt="Вот и нет картинки" class="h-[150px] w-[260px] bg-[#E4E4E4] text-black-blue" />
    <p class="text-center text-h3">Пара строчек текста</p>
  </div>
  <div class="card flex h-[300px] w-[300px] flex-col items-center gap-y-[30px] rounded-3 bg-transparent p-5 shadow">
    <img src="" alt="Вот и нет картинки" class="h-[150px] w-[260px] bg-[#E4E4E4] text-black-blue" />
    <p class="text-center text-h3">Пара строчек текста</p>
  </div>
  <!-- . . . -->
</div>

И изображение того, что имеется.на данный момент. введите сюда описание изображения

2
  • Как вариант можно сделать белым бордером вокруг карточек и убрать пробелы между карточками, но надо придумать что то с последней строчкой делать. Если карточка одна, что бы она например была на полный экран, если две то по 50% (В bootstrap например можно это автоматом сделать)
    – HappyPM
    24 мая в 13:29
  • (я не уточнял, что у карточек есть тень, но это не супер-важно) С бордерами оказалось пара нюансов, но вот с outline вышло хорошо. Однако да, не понятно что делать с оставшимся пустым местом. Делать карточку просто сильно больше - тут хз, но по идее тоже решает... Гипотетически можно как-то добавлять туда пустые карточки с bg-white. Проверил. Можно создавать "пустышки", но это, наверное, не есть хорошо. А ещё у пустышек надо будет убрать закругления, иначе их видно) UPD: нашлось крутое решение, вставлю его как ответ
    – Arkeviz
    24 мая в 17:02

1 ответ 1

0

Как оказалось, есть background-attachment (или же в tailwind - bg-fixed), который красиво решает эту задачу. Может не идеально (т.к. градиент идёт от края экрана к другому краю), но довольно круто.

Вот пример:

<div class="container mt-10 flex flex-wrap gap-5 font-serif text-white">
  <div class="card flex h-[300px] w-[300px] flex-col items-center gap-y-[30px] rounded-3 bg-fixed p-5 gradient-cards">
    <img src="" alt="Вот и нет картинки" class="h-[150px] w-[260px] bg-[#E4E4E4] text-black-blue" />
    <p class="text-center text-h3">Пара строчек текста</p>
  </div>
  <!-- И ещё 4 таких div-а -->
</div>

Пример-итогового-результата

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.