Skip to content

Instantly share code, notes, and snippets.

@kdankov
Forked from Daniel-Hug/dabblet.css
Created March 5, 2013 11:38
Show Gist options
  • Save kdankov/5089724 to your computer and use it in GitHub Desktop.
Save kdankov/5089724 to your computer and use it in GitHub Desktop.
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: #EEE;
overflow: hidden;
}
.depth {
display: block;
padding: 50px;
color: #FFF;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(0,0,0,.1);
position: absolute;
}
.depth:before { top: -1px; left: -1px }
.depth:after { top: -2px; left: -0px }
<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