Come rendere il testo trasparente nascondendo il bordo?

Question

Ho creato una sezione di eroi in cui il contenuto si sovrappone al bordo. Ecco come si presenta come:

Voglio rimuovere quella zona grigia per renderla trasparente e rendere lo sfondo visibile. Ma come puoi vedere si sovrappone in un bordo. Quindi non voglio vedere il confine come uno sciopero. Il contenuto e l'immagine sono dinamici, quindi la larghezza potrebbe cambiare.

Demo Live: On Codepen

HTML

 <div class="wrap"> 
    <div class="border"> 
     <h1 class="hero-title">We make your website beautiyul & usable </h1> 
    <span class="attr">— Citation, ABC Inc</span> 
    </div> 
     </div> 

CSS

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900); 

body { 
    background: url('https://source.unsplash.com/category/nature') no-repeat center center #333; 
    color:#FFF; 
    font-family: "Playfair Display", Georgia, serif; 
    background-size:cover; 
} 

.wrap { 
    max-width:1200px; 
    margin:0 auto; 
    padding:130px 20px; 
} 

.border { 
    border:solid 10px #FFF; 
    text-align:center; 
} 

.attr { 
    position:relative; 
    top:-45px; 
    font-size:20px; 
    display:block; 
} 

.hero-title { 
    font-weight:700; 
    font-size:90px; 
    text-align:center; 
    margin:0 50px; 
    padding:0; 
    position:relative; 
    top:-75px; 
    background:#8b8b8b; 
    display:inline-block; 
} 

Live Demo: On Codepen

Alla ricerca di una soluzione solo CSS. Qualsiasi aiuto sarebbe apprezzato. Grazie in anticipo.

Answer 1

Per rimuovere la modifica dell'area grigia background:#8b8b8b; a background:transparent;.

quanto si tratta per la sovrapposizione probabilmente si dovrebbe aggiungere

.border{ padding-top: 20px; }

cambiare il 20px valore al vostro personalizzato.

Answer 2

L'ho fatto i cambiamenti nel css, css finale dovrebbe essere come

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400, 700, 900); 
body { 
    background: url('https://source.unsplash.com/category/nature') no-repeat center center #333; 
    color:#FFF; 
    font-family:"Playfair Display", Georgia, serif; 
    background-size:cover; 
} 
.wrap { 
    max-width:1200px; 
    margin:0 auto; 
    padding:130px 20px; 
} 
.border { 
    border:solid 10px #FFF; 
    text-align:center; 
    position:relative; 
} 
.attr { 
    top:-45px; 
    font-size:20px; 
    display:block; 
} 
.hero-title { 
    font-weight:700; 
    font-size:90px; 
    text-align:center; 
    margin:0 50px; 
    padding:0; 
    top:-75px; 
    display:inline-block; 
} 

guardare il demo qui - http://jsfiddle.net/922auw0w/

Answer 3

http://codepen.io/anon/pen/MazGwm

Ho appena "falsificate" bordo superiore con div.

<div class="border"> 
    <span class="border-top"></span> 
    <span class="border-top right"></span> 
     <h1 class="hero-title">We make your website beautiful & usable </h1> 
    <span class="attr">— Citation, ABC Inc</span> 
    </div> 



.border-top{ 
    width:50px; 
    height: 10px; 
    background-color: #fff; 
    float:left; 
} 
.border-top.right{ 
    float:right; 
} 

Answer 4

È possibile ottenere un bordo superiore reattivo con scatole flessibili. Ovviamente, se il testo avvolge i tuoi pezzi del bordo sarà la lunghezza minima. Ma se il tuo testo è veramente breve, si espanderà per occupare lo spazio disponibile.

Di seguito è quello che ho aggiunto/modificato nel css. Guardalo in azione il codepen.

.wrap{ 
    padding: 130px 0; /* We will put a min-width on our lines */ 
} 
.hero-title{ 
    display: flex; 
    margin: -80px 0 0; /* margin + padding */ 
    position: static; /* We don't need relative and a top -xx */ 
    background: transparent; 
} 
.hero-title::before, .hero-title::after{ 
    display: block; 
    content: ""; 
    height: 0; 
    min-width: 60px; 
    flex: 1; 
    border-top: 10px solid red; /* to see what we're drawing here */ 
    margin-top: 75px; /* how much the text sticks out on top */ 
} 
.hero-title::before{ 
    margin-right: 10px; /* We want to prevert our borders from touching the text */ 
} 
.hero-title::after{ 
    margin-left: 10px; 
} 
.border{ 
    border-top-width: 0px; 
    padding-top: 5px; /* anything > 0px */ 
} 
.attr{ 
    position: static; /* We don't need relative and a top -xx */ 
    margin: 25px; 
} 

Answer 5

Per rendere il bordo superiore reattivo con il testo, ho aggiunto uno pseudo elemento e ottenuto il bordo con un'ombra. Abbiamo bisogno di impostare prima un limite inferiore alla larghezza del testo.

E, se questa larghezza è troppo bassa, potrebbe essere necessario giocare con più ombre.

Nel mio esempio, ho impostato 4 ombre, ma è possibile impostarne altre se necessario.

Dal momento che il bordo superiore è ormai falso, avevo bisogno di usare le alternative UFT il bordo laterale (sfondi)

body { 
 
    background: url('https://source.unsplash.com/category/nature') no-repeat center center #333; 
 
    color:#FFF; 
 
    font-family: "Playfair Display", Georgia, serif; 
 
    background-size:cover; 
 
} 
 

 
.wrap { 
 
    max-width:1200px; 
 
    margin:0 auto; 
 
    padding:70px 20px; 
 
} 
 

 
.border { 
 
    margin-top: 0px; 
 
    border-bottom:solid 10px white; 
 
    text-align:center; 
 
    overflow: hidden; 
 
    background-image: linear-gradient(white, white), linear-gradient(white, white); 
 
    background-size: 10px calc(100% - 70px), 10px calc(100% - 70px); 
 
    background-position: left bottom, right bottom; 
 
    background-repeat: no-repeat; 
 

 
} 
 

 
.attr { 
 
    position:relative; 
 
    top:-45px; 
 
    font-size:20px; 
 
    display:block; 
 
} 
 

 
.hero-title { 
 
    font-weight:700; 
 
    font-size:90px; 
 
    text-align:center; 
 
    margin:0 50px; 
 
    padding:0; 
 
    position:relative; 
 
    top: 0px; 
 
    display:inline-block; 
 
} 
 

 
.hero-title:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 10px; 
 
    width: 100%; 
 
    background-color: transparent; 
 
    left: 0px; 
 
    top: 70px; 
 
    box-shadow: 200px 0px 0px 0px white, 400px 0px 0px 0px white, -200px 0px 0px 0px white, -400px 0px 0px 0px white; 
 
}

<div class="wrap"> 
 
    <div class="border"> 
 
     <h1 class="hero-title">We make beatifull webs</h1> 
 
    </div> 
 
</div>