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

151

05 июля 2019, 04:40

Прошу помощи с реализацией элемента.

САБЖ:

Есть два блока, которые должны иметь адаптив и не ломаться при тесте контентом. Одинаковые по высоте.
У этих блоков есть бекграунд с блюром.
В центре блока есть "окно" без блюра с имиджем, заголовок, а также бордер, который рвется у границ заголовка.
Заголовок имеет прозрачный фон.
Под данным окном есть секция со ссылками.

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

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

Answer 1

Например:

* { 
  -webkit-box-sizing:border-box; 
          box-sizing:border-box; 
} 
 
html, 
body { 
  padding: 0; 
  margin: 0; 
  background: #eee; 
  font-family: sans-serif; 
} 
 
.wrap { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient:horizontal; 
  -webkit-box-direction:normal; 
      -ms-flex-flow:row wrap; 
          flex-flow:row wrap; 
   
} 
 
.card { 
  width: 50%; 
  height: 300px; 
  position: relative; 
   
  color:#fff; 
   
  padding: 50px 50px 70px; 
  overflow: hidden; 
} 
 
.card-1 { 
  background: orangered; 
} 
 
.card-2 { 
  background: grey; 
} 
 
.card:after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 0; 
  right: 0; 
  bottom: 0; 
     
} 
 
.card-1:after, 
.bg-1 { 
  background: url(http://pngimg.com/uploads/watches/watches_PNG9861.png) no-repeat 35% 10% fixed; 
   
  background-size: auto 50%; 
} 
 
.card-2:after, 
.bg-2 { 
  background: url(https://www.sneakerfiles.com/wp-content/uploads/2016/05/nike-air-max-90-golf-shoes.png) no-repeat 100% 40% fixed; 
   
  background-size: 35%; 
} 
 
.card:after { 
  -webkit-filter: blur(5px); 
          filter: blur(5px); 
} 
 
 
 
.card a { 
  text-decoration: none; 
  color:inherit; 
} 
 
.card h2 { 
  position: relative; 
  display: inline-block; 
  line-height: 1.1; 
  margin: 0; 
} 
 
.card-footer { 
  text-transform: uppercase; 
  font-weight: bold; 
  font-size:.75rem; 
  position: absolute; 
  z-index: 2; 
  bottom: 20px; 
  left: 50px; 
} 
 
.card-inner { 
  width: 100%; 
  height: 100%; 
  position: relative; 
  z-index: 2; 
  overflow: hidden; 
  border-right: 2px solid #fff; 
  border-bottom: 2px solid #fff; 
} 
 
.card h2:before, 
.card h2:after { 
  content: ''; 
  position: absolute; 
  background: #fff; 
} 
 
.card h2:before { 
  height: 2px; 
  top: 0; 
  left: 100%; 
  right: -888px; 
} 
 
.card h2:after { 
  width: 2px; 
  top: 100%; 
  left: 0; 
  bottom: -888px; 
}

<div class="wrap"> 
    <div class="card card-1"> 
       
      <div class="card-inner bg-1"> 
        <h2> 
          Nixon <br> Perimeter <br> Collection 
        </h2> 
      </div> 
       
      <div class="card-footer"> 
        <a href="#">Lorem ipsum ></a> 
      </div> 
       
    </div> 
     
    <div class="card card-2"> 
       
      <div class="card-inner bg-2"> 
        <h2> 
          Sweetes <br> Pack of <br> Air Maxes 
        </h2> 
      </div> 
       
      <div class="card-footer"> 
        <a href="#">Lorem ipsum ></a> 
      </div> 
       
    </div> 
  </div>