Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Embossed print
<div class="container">
<div class="circle embossed">
<p class="embossedtext">Lorem</br>Ipsum</p>
</div>
<div class="content embossed">
<p class="embossedtext">
Lorem ipsum dolor sit amet, consect adipiscing elit. Nulla placerat, arcuf sit amet interdum malesuada, nunc et nibh porta augue, non tincidunt au i metus quis neque.</br></br>Praesent sapien diam, interdum quiste pretium quis, blandit et velit. Donec in nisi quis erat varius convallis nec a felis. Integer condimentum dolor a.</p>
<p class="embossedtext icons"><i class="fa fa-twitter" aria-hidden="true"></i><i class="fa fa-facebook" aria-hidden="true"></i><i class="fa fa-pinterest-p" aria-hidden="true"></i></p>
</div>
</div>
body {
background: #e4e1d7;
}
.container {
max-width: 600px;
}
p {
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
letter-spacing: 0.25em;
font-weight: bold;
text-align: center;
}
.embossedtext {
color: rgba(255, 255, 255, 0.7);
text-shadow: -2px 2px 1px rgba(0, 0, 0, 0.4);
}
.embossed {
border: 3px solid rgba(255, 255, 255, 0.6);
box-shadow: inset -2px 2px 1px rgba(0, 0, 0, 0.2), -2px 2px 1px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.circle {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 30px auto;
}
.circle p {
padding-top: 53px;
padding-left: 6px;
font-size: 30px;
}
img {
opacity: 0.9;
filter: grayscale(100%);
padding-bottom: 15px;
}
.content {
font-size: 18px;
padding: 15px;
}
.fa {
padding: 10px 15px 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment