Bootstrap HTML5 Titel mit Rahmen und kleinem Text wie fieldset, aber kein fieldset/legend

Ich baue Bootstrap-basierte Web und ich versuche, Titel innerhalb eines Rahmens mit Text in der Mitte der unteren Grenze und noch ansprechbar zu machen. Kleiner Text auf kleinen Geräten kann mehrere Zeilen enthalten oder sogar in die Box hineingehen.Bootstrap HTML5 Titel mit Rahmen und kleinem Text wie fieldset, aber kein fieldset/legend

Alles, was ich tun konnte, ist
.
Und ich möchte es wie tun.

Ich hoffe, jemand hat dies bereits getan und/oder könnte mir dabei helfen.

Vielen Dank im Voraus.

Ein großes Detail ist es sollte vollständig transparent sein, so dass es über ein Backround-Bild gehen kann.

Und es ist viel anders als Feldsatz, weil die "Legende" unten ist.

Quelle

2016-06-19 Luka

Können Sie uns zur Verfügung stellen den Code Sie haben Trie d (Geige wäre großartig) –

hier ist [https://jsfiddle.net/nwfpkLkc/2/](https://jsfiddle.net/nwfpkLkc/2/), ich habe versucht mit Navbar-Klassen, aber habe es nicht geschafft . – Luka

Update:

See fiddle

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>

Quelle

2016-06-19 16:16:48

nicht was OP sucht. – dippas

Ich wusste, wie es so geht, aber ich brauche es transparent, ohne Hintergrund. So kann es über den Hintergrund gehen. – Luka

Verwenden Sie das auf einer komplizierten Oberfläche oder nur auf einer einfarbigen? Wenn das der Fall ist, können Sie einfach beide Farben als Hintergrund verwenden. Aber ich nehme an, Sie werden es in komplexen Hintergrundszenarien verwenden. Damit. Vielleicht bevorzugen Sie stattdessen Svg. –

Bootstrap HTML5 Titel mit Rahmen und kleinem Text wie fieldset, aber kein fieldset/legend

Antwort

Verwandte Themen