Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Mar 29, 2017
Embed
What would you like to do?
Text in a border
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<div class='box'>
<img src='https://source.unsplash.com/-XvFzO6lmb0/600x600'>
<div class='text'>
<div>
<span class='innertext'>Text goes here</span>
</div>
</div>
</div>
$pad: 40px;
$space: 0px;
$stroke: 4px;
html {
background: #ddd;
}
.box {
width: 400px;
background: #123;
margin: 48px auto;
padding: 16px;
position: relative;
}
.box > img {
width: 400px;
height: 300px;
opacity: .5;
object-fit: cover;
}
.box::after {
content: '';
display: block;
position: absolute;
top: $pad;
right: $pad;
left: $pad;
bottom: $pad - $space + 7px;
border: solid $stroke white;
border-bottom: 0;
}
.text {
color: white;
position: absolute;
text-align: center;
bottom: $pad - $space;
left: $pad;
right: $pad;
white-space: nowrap;
overflow: hidden;
font-family: 'fjalla one', sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.text > div {
width: 2000px;
margin-left: -1 * (2000px - (400px - $pad)) / 2;
}
.innertext::before,
.innertext::after {
content: '';
display: inline-block;
width: 600px;
height: $stroke;
background: white;
vertical-align: middle;
}
.innertext::before {
margin-right: 16px;
}
.innertext::after {
margin-left: 16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment