Помощ при програмиране, отговори на въпроси / Css / Bootstrap HTML5 Заглавие с оригинален и малък текст като fieldset, но без поле / легенда - css, html5, twitter-bootstrap, панел, fieldset

Bootstrap HTML5 Заглавие с ограничен и малък текст като fieldset, но без полета / легенда - css, html5, twitter-bootstrap, панел, fieldset

Аз изграждам базирана уеб базирана статия и се опитвамза да направите заглавие вътре в рамката с текст, прикрепен в средата на долната граница и все още да отговаряте. Малкият текст на малките устройства може да мине в няколко реда или дори да влезе в кутията.

Всичко, което мога да направя, е
.
И искам да го направя .

Надявам се някой да е направил това и / или да ми помогне да го направя.

Благодаря предварително.

Един голям детайл е, че той трябва да бъде напълно прозрачен, за да може да премине задната снимка.

И това е много по-различно от полето, защото "легендата" е на дъното.

Отговори:

1 за отговор № 1

Update:

Вижте цигулка

CSS:

.navbar-brand {
margin: 0;
color: #ffffff;
text-align: center;
position: relative;
display: inline-block;
border-top: 8px solid #ffffff;
padding: 5px 32px 0px 32px;
line-height: 1.08333333;
height: auto;
}
.navbar-brand:before {
position: absolute;
content: "";
left: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand:after {
position: absolute;
content: "";
right: -8px;
top: -8px;
width: 8px;
bottom: 12px;
background: #ffffff;
}
.navbar-brand a:hover,
.navbar-brand a:focus {
color: #ffffff;
text-decoration: none;
}
.navbar-header + h3 {
margin-top: 61px;
}
.navbar-header {
text-align: center;
}
.small-lines:before {
position: absolute;
content: "";
left: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines:after {
position: absolute;
content: "";
right: -40px;
height: 8px;
bottom: 12px;
width: 8%;
background: #ffffff;
}
.small-lines1:before {
width: 38%;
background: #009fb6;
}
.small-lines1:after {
width: 38%;
background: #009fb6;
}
.navbar-brand a{
font-size: 48px;
}
.container{
margin-top: 150px;
}

small {
line-height: 1.2;
font-size: 24px;
letter-spacing: 4.8px;
display: block;
position: relative;
}

HTML:

    <body style="background: black">
<header class="">
<div class="container text-center">
<div class="navbar-header">
<h1 class="navbar-brand ">
<a href="./">BIG TITLE ONE<br>
<small class="small-lines">Here comes small text</small>
</a>
</h1>
</div>
</div>
</header>
</body>