2

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

пример

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

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

3 ответа 3

5

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

  1. Картинка 1:Горы, бэк.
  2. Картинка 2:Человек,над горами
  3. нижняя и по сторонам рамка - border у div с z-index больше чем человек
  4. верхняя - сверху внутри предыдущего (чтоб рамка не ползла) другой див с z-index меньше чем человек.
1
  • 1
    этот ответ универсальней. просто сделать парочку вложенных div для нижней и остальных границ, а далее по инструкции Darth-а
    – LV426
    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
    25 янв 2016 в 17:53
  • разумеется на картинке с человеком должна быть белая линия границы. при смешении человека по гирозонтале линия будет рамки будет продолжать совпадать с линией границы div
    – LV426
    26 янв 2016 в 18:24
  • правильно я понимаю, что на рисунке с человеком будет нарисована линия?
    – olegatro
    26 янв 2016 в 18:30
  • да, именно так.
    – LV426
    27 янв 2016 в 19:37
  • А если завтра захотят изменить цвет рамки? На мой взгляд не самый лучший способ. В любом случаи, спасибо за конструктивный диалог)
    – olegatro
    27 янв 2016 в 19:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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