Created
January 11, 2012 20:17
-
-
Save dgmid/1596559 to your computer and use it in GitHub Desktop.
CSS3 Isometric Text Demo v2
This file contains hidden or 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
| /** | |
| * CSS3 Isometric Text Demo v2 | |
| */ | |
| @font-face { | |
| font-family: 'LeagueGothicRegular'; | |
| src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot'); | |
| src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot?iefix') format('eot'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.woff') format('woff'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.ttf') format('truetype'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.svg#webfontIQSKTUY8') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @font-face { | |
| font-family: 'ArchitectsDaughterRegular'; | |
| src: url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.eot'); | |
| src: url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.woff') format('woff'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.ttf') format('truetype'), | |
| url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.svg#ArchitectsDaughterRegular') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| body { | |
| width: 1000px; | |
| color: #fff; | |
| position: relative; | |
| background-color: #2f5faf; | |
| background-image: url(http://www.midwinter-dg.com/blog_demos/css-isometric-text/blueprint.png); | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| h1 { | |
| font: 80px 'LeagueGothicRegular'; | |
| position: relative; | |
| top: -30px; | |
| left: 100px; | |
| color: rgba(0,0,0,0); | |
| transform: skew(63deg,-26.6deg); | |
| text-shadow: 0 0 3px rgba(0, 0, 128, 0.25); | |
| z-index: 50; | |
| } | |
| h1:after { | |
| content:"ISOMETRIC DEMO ✪ v2"; | |
| position: absolute; | |
| top: 15px; | |
| left: 25px; | |
| color: rgba(255,255,255,1); | |
| transform: skew(-63deg) scale(1,.5); | |
| text-shadow: | |
| -1px -1px 1px #aaa, | |
| -2px -2px 1px #999, | |
| -3px -3px 1px #888, | |
| -4px -4px 1px #777, | |
| -5px -5px 1px #666, | |
| -6px -6px 1px #555, | |
| -7px -7px 5px rgba(0, 0, 128, 0.75); | |
| z-index: 100; | |
| } | |
| p { | |
| width: 460px; | |
| height: 220px; | |
| position: absolute; | |
| top: 180px; | |
| left: 430px; | |
| font: 14px/24px 'ArchitectsDaughterRegular'; | |
| color: rgba(255,255,255,.35); | |
| text-align: center; | |
| transform: skew(63deg,-26.6deg); | |
| position: absolute; | |
| z-index: 50; | |
| } | |
| a:link, a:visited { | |
| color: rgba(255, 211, 132, 0.5); | |
| text-decoration: none; | |
| transition: all .5s; | |
| } | |
| a:hover { | |
| color: rgba(255, 255, 255, 0.7); | |
| text-shadow: 0 0 3px #63fdfe, 0 0 8px #fff; | |
| } |
This file contains hidden or 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
| <body> | |
| <h1>ISOMETRIC DEMO ✪ v2</h1> | |
| <p>Here's a reworking of my original CSS3 Isometric Text demo, this version improves on the first attempt by using the CSS :after selector to duplicate the title to create the shadow - in fact the title IS the shadow & the Isometric lettering is the :after content. The original demo can be seen here: <a href="http://www.midwinter-dg.com/permalink-css3-isometric-text-demo-2011-03-14.html" target="_blank">Isometric Text Demo v1</a></p> | |
| </body> |
This file contains hidden or 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","prefixfree":"1","page":"result"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Dang. This is great. Thanks for this gist, too.
One problem: the shadow text isn't showing up for me in Safari 6. Not sure what the issue is; Chrome 27 is good, latest FF is good.