Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/demo.css

Created Sep 29, 2015
Embed
What would you like to do?
Transparent H1 Intersects Border - A Pen For /u/nXception https://www.reddit.com/r/webdev/comments/3maouu/quick_question_htmlcss/ This example uses two absolutely positioned "lines" to take the place of the top border. The width can be set to preference, and the snippet is fully responsive.
* {
box-sizing: border-box;
color: #333;
}
body {
font-family: "PT Sans";
background-color: #ddd;
}
.section {
position: relative;
width: 900px;
max-width: 80%;
border: 2px solid #333;
border-top: none;
text-align: center;
margin: 60px auto;
}
.section h1 {
position: relative;
margin-top: -14px;
display: inline-block;
letter-spacing: 4px;
}
.top-border{
position: absolute;
height: 2px;
width: 24%;
background-color: #333;
}
.right {
right: 0;
}
.left {
left: 0;
}
@media (max-width: 685px) {
.top-border {
width: 18%;
}
}
.section p {
width: 61%;
margin: 20px auto 40px auto;
line-height: 30px;
}
.section a {
outline: 0;
display: inline-block;
padding: 20px;
margin-bottom: 40px;
width: 440px;
max-width: 80%;
background-color: #333;
color: #fff;
font-size: 22px;
letter-spacing: 3px;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
.section a:hover {
background-color: #1D222D;
}
.section a:link, .section a:visited, .section a:link:hover, .section a:visited:hover {
text-decoration: none;
color: #fff;
}
@media (max-width: 500px) {
.top-border {
display: none;
}
.section {
border-top: 2px solid #333;
}
.section h1 {
margin: 20px 6px;
}
}
<div class="section">
<div class="top-border left"></div>
<div class="top-border right"></div>
<h1>CONTACT US</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#">CONTACT US</a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.