Skip to content

Instantly share code, notes, and snippets.

@rizowski
Forked from Daniel-Hug/dabblet.css
Created January 31, 2012 03:42
Show Gist options
  • Save rizowski/1708614 to your computer and use it in GitHub Desktop.
Save rizowski/1708614 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: #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","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment