Skip to content

Instantly share code, notes, and snippets.

@octatone
Created March 2, 2012 05:10
Show Gist options
  • Save octatone/1955849 to your computer and use it in GitHub Desktop.
Save octatone/1955849 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: 0px;
margin: 0;
color: black;
font: bold 7em Times, sans-serif;
line-height: 1em;
position: relative;
}
.depth:before, .depth:after {
content: attr(title);
padding: 0px;
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":"separate","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment