bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман

Как сделать блок, имеющий заголовок с бордером и контентом?

Добрый день, коллеги.

Прошу поможщи с реализацией элемента.
САБЖ:
5c21edd3e5741797645053.png
1. Есть два блока, которые должны иметь адаптив и не ломаться при тесте контентом. Одинаковые по высоте.
2. У этих блоков есть бекграунд с блюром.
3. В центре блока есть "окно" без блюра, с имиджем, заголовок, а также бордер, который рвется у границ заголовка.
4. Заголовок имеет прозрачный фон.
5. Под данным окном есть секция со ссылками.

если пп 2 и 3 более менее понятно как белать, то вот с бордером и заголовком, а также одинаковой высотой самого "окна" у меня не сростается.

ВОПРОС: как реализовать ОКНО: данный блок должен иметь одну высоту и адаптивиться-резиниться, иметь адаптивный же бордер.

Заранее благодарю за ответ
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
dpr
@dpr
frontend developer
одинаковые по высоте пилим флексами
левый и верхний бордеры имитируем псевдоэлементами

собственно самое сложное сделать блюр по внешней кромке картинки, но с этим как раз у вас проблемы нет =))
Сейчас попробую накидать примерчик

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы