public
Created — forked from dgmid/dabblet.css

CSS3 Isometric Text Demo v2

  • Download Gist
dabblet.css
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91
/**
* 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;
}
dabblet.html
HTML
1 2 3 4
<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 &amp; 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>
settings.json
JSON
1
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.