Каким образом можно реализовать в вёрстке что-то подобное?
Интересует именно каким образом лучше всего сделать эту рамку. В голове вариант, что просто вставить как бекграунд, но тогда как это будет выглядеть в адаптивной вёрстке?
Каким образом можно реализовать в вёрстке что-то подобное?
Интересует именно каким образом лучше всего сделать эту рамку. В голове вариант, что просто вставить как бекграунд, но тогда как это будет выглядеть в адаптивной вёрстке?
Рискну предложить:
* {
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>
вариант:
картинки можно объединить в спрайт
нет ничего страшного в том, что у Вас будет две (один спрайт) картинки вместо одной