Skip to content

Instantly share code, notes, and snippets.

@andrewdh
Created June 25, 2012 22:38
Show Gist options
  • Save andrewdh/2991896 to your computer and use it in GitHub Desktop.
Save andrewdh/2991896 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: #fff;
overflow: hidden;
}
.depth {
display: block;
padding: 50px;
color: #9b9b9b;
font: bold 7em Arial, sans-serif;
position: relative;
}
.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.2);
position: absolute;
}
.depth:before {
top: -1px;
left: -1px;
}
.depth:after {
top: -2px;
left: -2px;
}
<h1 class="depth" title="Lorem ipsum">Lorem ipsum</h1>
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment