2

Каким образом можно реализовать в вёрстке что-то подобное?

пример

Интересует именно каким образом лучше всего сделать эту рамку. В голове вариант, что просто вставить как бекграунд, но тогда как это будет выглядеть в адаптивной вёрстке?

2
  • 1
    убрать рамку. имхо будет лучше ) но с дизайнером не поспоришь...
    – Invision
    Commented 25 янв. 2016 в 16:18
  • 1
    вот набросал приблизительный вариант - jsfiddle.net/soledar10/v7wm9q9y
    – soledar10
    Commented 25 янв. 2016 в 20:14

3 ответа 3

5

Рискну предложить:

  1. Картинка 1:Горы, бэк.
  2. Картинка 2:Человек,над горами
  3. нижняя и по сторонам рамка - border у div с z-index больше чем человек
  4. верхняя - сверху внутри предыдущего (чтоб рамка не ползла) другой див с z-index меньше чем человек.
1
  • 1
    этот ответ универсальней. просто сделать парочку вложенных div для нижней и остальных границ, а далее по инструкции Darth-а
    – LV426
    Commented 27 янв. 2016 в 19:40
4

* {
  padding: 0;
  margin: 0;
}
section {
  min-height: 300px;
  background: rgb(98, 125, 77);
  background: -webkit-linear-gradient(bottom left, rgba(98, 125, 77, 1) 0%, rgba(31, 59, 8, 1) 100%);
  background: -moz-linear-gradient(bottom left, rgba(98, 125, 77, 1) 0%, rgba(31, 59, 8, 1) 100%);
  background: -o-linear-gradient(bottom left, rgba(98, 125, 77, 1) 0%, rgba(31, 59, 8, 1) 100%);
  background: linear-gradient(to top right, rgba(98, 125, 77, 1) 0%, rgba(31, 59, 8, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#627d4d', endColorstr='#1f3b08', GradientType=1);
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 55px 15px;
}
.b-inner {
  border: 3px solid rgba(255, 255, 255, .8);
  border-top: none;
  border-bottom: none;
  padding: 25px 180px 25px 25px;
  color: #fff;
  position: relative;
}
.b-inner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .8);
}
.b-inner:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .8);
}
.pict-man {
  position: absolute;
  top: -30px;
  right: 20px;
  width: 150px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
  background: #000;
}
<section>
  <div class="container">
    <div class="b-inner">
      <h1>title</h1>
      <p>Интересует именно каким образом лучше всего сделать эту рамку. В голове вариант, что просто вставить как бекграунд, но тогда как это будет выглядеть в адаптивной вёрстке?</p>
      <div class="pict-man">man</div>
    </div>
  </div>
</section>

1

вариант:

  • картинка 1 - горы
  • картинка 2 - человек
  • рамка - это div с раскрашенной границей

картинки можно объединить в спрайт

нет ничего страшного в том, что у Вас будет две (один спрайт) картинки вместо одной

6
  • Каким образом рамка за головой человека скроется? верстка адаптивная же
    – olegatro
    Commented 25 янв. 2016 в 17:53
  • разумеется на картинке с человеком должна быть белая линия границы. при смешении человека по гирозонтале линия будет рамки будет продолжать совпадать с линией границы div
    – LV426
    Commented 26 янв. 2016 в 18:24
  • правильно я понимаю, что на рисунке с человеком будет нарисована линия?
    – olegatro
    Commented 26 янв. 2016 в 18:30
  • да, именно так.
    – LV426
    Commented 27 янв. 2016 в 19:37
  • А если завтра захотят изменить цвет рамки? На мой взгляд не самый лучший способ. В любом случаи, спасибо за конструктивный диалог)
    – olegatro
    Commented 27 янв. 2016 в 19:40

Ваш ответ

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

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