Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
A "deeper" indented text effect with the :before and :after pseudo-elements.
/**
* A "deeper" indented text effect with the :before and :after pseudo-elements.
*/
html, body {
height: 100%;
}
body {
margin: 0;
background: #0A539C;
background: linear-gradient(top, #4293d6 0%,#001e96 100%);
overflow: hidden;
}
.depth {
display: block;
padding: 50px;
color: black;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 1px; left: 1px }
.depth:after { top: 2px; left: 2px }
<h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment