Здравствуйте! Как сделать подобное?
Есть идея использовать рамку как background-image
и поверх писать текст на html.
Есть ли какие-то еще варианты?
Здравствуйте! Как сделать подобное?
Есть идея использовать рамку как background-image
и поверх писать текст на html.
Есть ли какие-то еще варианты?
Этого можно добиться с помощью комбинации тегов <fieldset>
и <legend>
:
legend {
text-align: center;
}
<fieldset>
<legend>Заголовок</legend>
Текст текст текст
</fieldset>
align
со значение center
: jsfiddle.net/3fhspz12; но тогда, в свою очередь, документ не пройдет валидацию: goo.gl/hGqR7N.
– Roman Grinyov
4 июн '16 в 8:12
Ну, думаю так.
html:
<fieldset>
<legend align="center">Заголовок</legend>
<p>Куча вашего текста</p>
</fieldset>
css:
fieldset
{
width: 910px;
height: 294px;
}
legend
{
padding-left: 40px; /* Свои значения */
padding-right: 40px; /* Свои значения */
}
Ну и ваш текст и его стилистика внутри.
align
уже давно устарел, лучше перенесите свойство в стили.
– VenZell
4 июн '16 в 7:28
Еще как вариант
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: url('http://zellox.com/wp-content/uploads/2016/02/best-nature-background-desktop.jpg') no-repeat center top;
-webkit-background-size: cover;
background-size: cover;
}
.b{
overflow: hidden;
padding: 25px 0;
max-width: 400px;
margin: 25px auto;
}
.b-inner{
border: 3px solid #fff;
border-top: none;
color: #fff;
font-size: 16px;
position: relative;
background: rgba(0,0,0,0.3);
}
.b-text{
padding: 25px;
}
.b-title{
position: absolute; top: -12px; left: 0;
width: 100%;
text-align: center;
font-size: 18px;
}
.b-title > span{
position: relative;
display: block;
}
.b-title > span:before,
.b-title > span:after {
content: "";
display: inline-block;
background-color: #fff;
height: 3px;
position: relative;
vertical-align: middle;
width: 50%;
}
.b-title > span:before {
right: 0.5em;
margin-left: -50%;
}
.b-title > span:after {
left: 0.5em;
margin-right: -50%;
}
<div class="b">
<div class="b-inner">
<h3 class="b-title"><span>title text</span></h3>
<div class="b-text">
text text text text text text text text text text text text text text text text text text text
</div>
</div>
</div>
<div class="b">
<div class="b-inner">
<h3 class="b-title"><span>title text title text</span></h3>
<div class="b-text">
text text text text text text text text text text text text text text text text text text text
</div>
<fieldset>
. – Roman Grinyov 4 июн '16 в 7:02