Как оформить так карточку типа бенто стиль?

Question

[Владимир Хаттер]

Желательно на чистом css. SVG, PNG фоном не предлагайте там еще и эффект матового стекла. Так как карточка должна расширятся в зависимости от контента.

Answer 1

[Пума Тайланд]

backdrop-filter: blur() + полупрозрачный градиент, и никакого PNG нужно. Для блика на рамке есть хитрость с padding-box/border-box:

.card {
  border-radius: 24px;
  padding: 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(145deg, rgba(45,54,72,.8), rgba(12,17,26,.9)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,.08)) border-box;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 20px 60px rgba(0,0,0,.3);
}

Высота растёт по контенту сама. Единственное: за карточкой нужен хоть какой-то фон — без него blur нечего размывать.

Comments

[Владимир Хаттер]

Спасибо конечно, но это просто прямоугольник. Задача именно сделать верх и низ косыми. Есть идеи?

[Пума Тайланд]

`clip-path: polygon(0 15px, 100% 0, 100% calc(100% - 15px), 0 100%)` даст косые края, но тогда backdrop-filter внутри не работает — blur выноси на ::before { position: absolute; inset: 0; clip-path: inherit; backdrop-filter: blur(20px); z-index: -1; }.

[Пума Тайланд]

`clip-path: polygon(0 15px, 100% 0, 100% calc(100% - 15px), 0 100%)` даст косые края, но тогда backdrop-filter внутри не работает — blur выноси на ::before { position: absolute; inset: 0; clip-path: inherit; backdrop-filter: blur(20px); z-index: -1; }.

[Владимир Хаттер]

Пума Тайланд, теперь срезает закругление углов. Эххх. Видимо это не возможно.

Answer 2

[apoca1ipsis]

<div class="xxx">
        <div class="xxx__content">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nostrum vitae, impedit vel odit nulla ullam quod omnis officiis laboriosam possimus.
        </div>
    </div>
    <style>
        .xxx {
            transform: skew(0deg, -10deg);
            background: #7e838b;
            width: 240px;
            border-radius: 24px;
            padding: 48px;
            backdrop-filter: blur(5px);
        }
        .xxx__content {
            transform: skew(0deg, 10deg);
        }
    </style>

Answer 3

[MisterNikolay]

Отличное и элегантное решение с использованием backdrop-filter! Это действительно самый современный и производительный способ добиться такого эффекта, отказавшись от лишних PNG.

Хотел бы добавить пару советов для улучшения результата:

1. Контрастность: Чтобы текст внутри карточки всегда читался, можно обернуть содержимое в отдельный блок и задать ему background: rgba(255, 255, 255, 0.1); с тем же border-radius. Это создаст необходимый контраст с фоновым блюром.
2. Производительность: Для плавной анимации и во избежание подтормаживаний на слабых устройствах лучше применять размытие к фону, а не к самой карточке.