Ajax Loader
HTML 
<h1>ISOMETRIC TEXT</h1>
1
<h1>ISOMETRIC TEXT</h1>
2
<p>
3
  Here's a reworking of my original CSS3
4
  Isometric Text demo, this version improves
5
  on the first attempt by using the CSS :after
6
  selector to duplicate the title to create
7
  the shadow - in fact the title IS the shadow
8
  &amp; the Isometric lettering is the :after
9
  content.
10
</p>
11
 
 
CSS 
/**
1
/**
2
 * CSS3 Isometric Text Demo v2
3
 */
4
@font-face {
5
  font-family: 'LeagueGothicRegular';
6
  src: url('http://www.midwinter-dg.com/blog_demos/css-text-shadows/fonts/league_gothic-webfont.eot');
7
  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');
8
  font-weight: normal;
9
  font-style: normal;
10
}
11
 
12
@font-face {
13
  font-family: 'ArchitectsDaughterRegular';
14
  src: url('http://www.midwinter-dg.com/blog_demos/css-isometric-text/architectsdaughter-webfont.eot');
15
  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');
16
  font-weight: normal;
17
  font-style: normal;
18
}
19
 
20
body {
21
  width: 1000px;
22
  color: #fff;
23
  position: relative;
24
  background-color: #2f5faf;
25
  background-image: url(http://www.midwinter-dg.com/blog_demos/css-isometric-text/blueprint.png);
26
  -webkit-font-smoothing: antialiased;
27
}
28
 
29
h1 {
30
  font: 80px 'LeagueGothicRegular';
31
  position: relative;
32
  top: -30px;
33
  left: 100px;
34
  color: rgba(0,0,0,0);
35
 
36
  -webkit-transform: skew(63deg,-26.6deg);
37
  -moz-transform: skew(63deg,-26.6deg);
38
  -o-transform: skew(63deg,-26.6deg);
39
  -ms-transform: skew(63deg,-26.6deg);
40
  transform: skew(63deg,-26.6deg);
41
  text-shadow: 0 0 3px rgba(0, 0, 128, 0.25);
42
  z-index: 50;
43
}
44
 
45
h1:after {
46
  content: "ISOMETRIC TEXT";
47
  position: absolute;
48
  top: 15px;
49
  left: 25px;
50
  color: rgba(255,255,255,1);
51
 
52
  -webkit-transform: skew(-63deg) scale(1,.5);
53
  -moz-transform: skew(-63deg) scale(1,.5);
54
  -o-transform: skew(-63deg) scale(1,.5);
55
  -ms-transform: skew(-63deg) scale(1,.5);
56
  transform: skew(-63deg) scale(1,.5);
57
  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);
58
  z-index: 100;
59
}
60
 
61
p {
62
  width: 460px;
63
  height: 220px;
64
  position: absolute;
65
  top: 180px;
66
  left: 430px;
67
  font: 14px/24px 'ArchitectsDaughterRegular';
68
  color: rgba(255,255,255,.35);
69
  text-align: center;
70
 
71
  -webkit-transform: skew(63deg,-26.6deg);
72
  -moz-transform: skew(63deg,-26.6deg);
73
  -o-transform: skew(63deg,-26.6deg);
74
  -ms-transform: skew(63deg,-26.6deg);
75
  transform: skew(63deg,-26.6deg);
76
  position: absolute;
77
  z-index: 50;
78
}
 

Isometric Angle Text Using CC3

CSSDeck G+