Created
March 5, 2012 19:40
-
-
Save MikeFielden/1980561 to your computer and use it in GitHub Desktop.
Inset text
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Inset text | |
*/ | |
body { | |
padding-top: 100px; | |
background-color: #8d9794; | |
} | |
h1 { | |
font-size: 5em; | |
margin: 0px 0px 5px 10px; | |
position: relative; | |
} | |
.insetText { | |
font-family: serif; | |
background-color: rgba(10, 10, 10,.9); | |
-webkit-background-clip: text; | |
-moz-background-clip: text; | |
background-clip: text; | |
color: transparent; | |
text-shadow: 0px 2px 2px rgba(255,255,255,0.4); | |
} | |
.textContainer{ | |
border: 3px solid rgba(50, 50, 50, .6); | |
border-radius: 20px; | |
height: 210px; | |
width: 190px; | |
box-shadow: inset 0px 0px 10px rgba(255, 255, 255, .5); | |
} | |
h1 > span.one { | |
letter-spacing: -7px; | |
} | |
h1 > span.one:first-letter { | |
color: red; | |
} | |
h1 > span.v { | |
position: absolute; | |
top: 61px; | |
left: 108px; | |
font-size: .95em; | |
} | |
h1 > span.a { | |
position: absolute; | |
top: 122px; | |
left: 106px; | |
font-size: .97em; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="textContainer"> | |
<h1 class="insetText"> | |
<span class="one">ONE</span> | |
<span class="v insetText">V</span> | |
<span class="a insetText">A</span> | |
</h1> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"view":"split","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment