Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

remove demos

  • Loading branch information...
commit 3e99aa603745d398ae3e1060058e3b499a40bcb5 1 parent 58d1bb7
dodola authored March 23, 2013

Showing 38 changed files with 0 additions and 3,093 deletions. Show diff stats Hide diff stats

  1. 181  demos/accordion/css/style.css
  2. 157  demos/accordion/index.html
  3. 14  demos/border-radius/index.html
  4. 114  demos/centred-nav/dropdown.html
  5. 67  demos/centred-nav/index.html
  6. 130  demos/css-dropdown/css/style.css
  7. 74  demos/css-dropdown/index.html
  8. 128  demos/css-powered-ribbons/css/style.css
  9. BIN  demos/css-powered-ribbons/img/css/ribbon-2.png
  10. BIN  demos/css-powered-ribbons/img/css/ribbon.png
  11. 40  demos/css-powered-ribbons/index.html
  12. 100  demos/graphs/css/style.css
  13. 88  demos/graphs/index.php
  14. 98  demos/graphs/index2.php
  15. 119  demos/lukes-beard-social-icons/css/style.css
  16. BIN  demos/lukes-beard-social-icons/img/css/Thumbs.db
  17. BIN  demos/lukes-beard-social-icons/img/css/icons.png
  18. 43  demos/lukes-beard-social-icons/index.html
  19. 75  demos/maximising-hit-area/index.html
  20. BIN  demos/mo-robust-paragraph-indenting/demo.jpg
  21. 134  demos/mo-robust-paragraph-indenting/index.html
  22. 102  demos/multiple-column-lists/css/style.css
  23. 88  demos/multiple-column-lists/index.html
  24. 170  demos/progress-bar/css/style.css
  25. BIN  demos/progress-bar/img/css/last.gif
  26. BIN  demos/progress-bar/img/css/splitter.gif
  27. 68  demos/progress-bar/index.php
  28. 47  demos/remote-controlled-hyperlinks/index.html
  29. 193  demos/sites-without-ids-classes/css/style.css
  30. 57  demos/sites-without-ids-classes/index.html
  31. 103  demos/snow/css/style.css
  32. BIN  demos/snow/img/css/snow.png
  33. 50  demos/snow/index.php
  34. 47  demos/snow/stable.txt
  35. 119  demos/typographic-work-planner/css/style.css
  36. 88  demos/typographic-work-planner/index.html
  37. 121  demos/zebra-striping/css/style.css
  38. 278  demos/zebra-striping/index.html
181  demos/accordion/css/style.css
... ...
@@ -1,181 +0,0 @@
1  
-/*------------------------------------*\
2  
-	RESET
3  
-\*------------------------------------*/
4  
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
5  
-	margin:0;
6  
-	padding:0;
7  
-}
8  
-table{
9  
-	border-collapse:collapse;
10  
-	border-spacing:0;
11  
-}
12  
-fieldset,img{ 
13  
-	border:0;
14  
-}
15  
-address,caption,cite,dfn,th,var{
16  
-	font-style:normal;
17  
-	font-weight:normal;
18  
-}
19  
-caption,th{
20  
-	text-align:left;
21  
-}
22  
-h1,h2,h3,h4,h5,h6{
23  
-	font-size:100%;
24  
-	font-weight:normal;
25  
-}
26  
-q:before,q:after{
27  
-	content:'';
28  
-}
29  
-abbr,acronym{
30  
-	border:0;
31  
-}
32  
-
33  
-
34  
-
35  
-
36  
-
37  
-/*------------------------------------*\
38  
-	MAIN
39  
-\*------------------------------------*/
40  
-html{
41  
-	font-family:Calibri, Arial, sans-serif;
42  
-	background:url(http://dl.dropbox.com/u/2629908/adaptive/img/css/grid.png) top center repeat-y #fff;
43  
-	background:#fff;
44  
-	color:#666;
45  
-	height:101%;
46  
-	font-size-adjust:0.45;
47  
-}
48  
-body{
49  
-	width:940px;
50  
-	padding:100px 10px;
51  
-	margin:0 auto;
52  
-}
53  
-h1{
54  
-	font-weight:bold;
55  
-	font-size:2em;
56  
-}
57  
-h2{
58  
-	font-weight:bold;
59  
-	font-size:1.5em;
60  
-}
61  
-small{
62  
-	color:#ccc;
63  
-}
64  
-a{
65  
-	color:#6b0c36;
66  
-	text-decoration:none;
67  
-	font-weight:bold;
68  
-}
69  
-a:hover{
70  
-	text-decoration:underline;
71  
-}
72  
-p{
73  
-	margin-bottom:20px;
74  
-}
75  
-
76  
-
77  
-
78  
-
79  
-
80  
-
81  
-/*------------------------------------*\
82  
-	ACCORDION
83  
-\*------------------------------------*/
84  
-.accordion{
85  
-	width:940px;
86  
-	overflow:hidden;
87  
-	list-style:none;
88  
-	margin-bottom:10px;
89  
-	text-shadow:1px 1px 1px rgba(0,0,0,0.25);
90  
-	background:blue;
91  
-	
92  
-	-moz-border-radius:10px;
93  
-	-webkit-border-radius:10px;
94  
-	-o-border-radius:10px;
95  
-	border-radius:10px;
96  
-}
97  
-.accordion li{
98  
-	float:left;
99  
-	width:20%;
100  
-	overflow:hidden;
101  
-	height:250px;
102  
-	-moz-transition:all 0.2s ease-out;
103  
-	-webkit-transition:all 0.2s ease-out;
104  
-	-o-transition:all 0.2s ease-out;
105  
-	transition:all 0.2s ease-out;
106  
-	-moz-transition-delay:0.15s;
107  
-	-webkit-transition-delay:0.15s;
108  
-	-o-transition-delay:0.15s;
109  
-	transition-delay:0.15s;
110  
-}
111  
-.accordion li:first-of-type{
112  
-	-moz-border-radius:10px 0 0 10px;
113  
-	-webkit-border-radius:10px 0 0 10px;
114  
-	-o-border-radius:10px 0 0 10px;
115  
-	border-radius:10px 0 0 10px;
116  
-}
117  
-.accordion li:last-of-type{
118  
-	-moz-border-radius:0 10px 10px 0;
119  
-	-webkit-border-radius:0 10px 10px 0;
120  
-	-o-border-radius:0 10px 10px 0;
121  
-	border-radius:0 10px 10px 0;
122  
-}
123  
-.accordion div{
124  
-	padding:10px;
125  
-}
126  
-.accordion:hover li{
127  
-	width:10%;
128  
-}
129  
-.accordion li:hover{
130  
-	width:60%;
131  
-}
132  
-.slide-01	{ background:red; color:white; }
133  
-.slide-02	{ background:orange; color:white; }
134  
-.slide-03	{ background:yellow; color:#333; text-shadow:none; }
135  
-.slide-04	{ background:green; color:white; }
136  
-.slide-05	{ background:blue; color:white; }
137  
-
138  
-
139  
-
140  
-
141  
-
142  
-
143  
-/*------------------------------------*\
144  
-	VERTICAL
145  
-\*------------------------------------*/
146  
-#vertical{
147  
-	width:940px;
148  
-	height:300px;
149  
-}
150  
-#vertical li{
151  
-	height:20%;
152  
-	width:100%;
153  
-	-moz-transition:all 0.2s ease-out;
154  
-	-webkit-transition:all 0.2s ease-out;
155  
-	-o-transition:all 0.2s ease-out;
156  
-	transition:all 0.2s ease-out;
157  
-	-moz-transition-delay:0.15s;
158  
-	-webkit-transition-delay:0.15s;
159  
-	-o-transition-delay:0.15s;
160  
-	transition-delay:0.15s;
161  
-}
162  
-#vertical li:first-of-type{
163  
-	-moz-border-radius:10px 10px 0 0;
164  
-	-webkit-border-radius:10px 10px 0 0;
165  
-	-o-border-radius:10px 10px 0 0;
166  
-	border-radius:10px 10px 0 0;
167  
-}
168  
-#vertical li:last-of-type{
169  
-	-moz-border-radius:0 0 10px 10px;
170  
-	-webkit-border-radius:0 0 10px 10px;
171  
-	-o-border-radius:0 0 10px 10px;
172  
-	border-radius:0 0 10px 10px;
173  
-}
174  
-#vertical:hover li{
175  
-	height:10%;
176  
-	width:100%;
177  
-}
178  
-#vertical li:hover{
179  
-	height:60%;
180  
-	width:100%;
181  
-}
157  demos/accordion/index.html
... ...
@@ -1,157 +0,0 @@
1  
-<!DOCTYPE html>
2  
-<html lang="en">
3  
-<head>
4  
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5  
-	<title>Pure CSS accordion</title>
6  
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
7  
-</head>
8  
-
9  
-<body id="home">
10  
-
11  
-	<h1>Pure CSS(3) accordion<small>&mdash;view in Webkit for best experience</small></h1>
12  
-	
13  
-	<p>By <a href="http://twitter.com/csswizardry">Harry Roberts</a>. <a href="http://csswizardry.com/2011/02/pure-css3-accordion/">Return to article</a>.</p>
14  
-
15  
-	<ul class="accordion">
16  
-		
17  
-		<li class="slide-01">
18  
-			
19  
-			<div>
20  
-				
21  
-				<h2>Slide one</h2>
22  
-				
23  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
24  
-				
25  
-			</div>
26  
-			
27  
-		</li>
28  
-		
29  
-		<li class="slide-02">
30  
-			
31  
-			<div>
32  
-				
33  
-				<h2>Slide two</h2>
34  
-				
35  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
36  
-				
37  
-			</div>
38  
-			
39  
-		</li>
40  
-		
41  
-		<li class="slide-03">
42  
-			
43  
-			<div>
44  
-				
45  
-				<h2>Slide three</h2>
46  
-				
47  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
48  
-				
49  
-			</div>
50  
-			
51  
-		</li>
52  
-		
53  
-		<li class="slide-04">
54  
-			
55  
-			<div>
56  
-				
57  
-				<h2>Slide four</h2>
58  
-				
59  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
60  
-				
61  
-			</div>
62  
-			
63  
-		</li>
64  
-		
65  
-		<li class="slide-05">
66  
-			
67  
-			<div>
68  
-				
69  
-				<h2>Slide five</h2>
70  
-				
71  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
72  
-				
73  
-			</div>
74  
-			
75  
-		</li>
76  
-		
77  
-	</ul>
78  
-
79  
-	<ul class="accordion" id="vertical">
80  
-		
81  
-		<li class="slide-01">
82  
-			
83  
-			<div>
84  
-				
85  
-				<h2>Slide one</h2>
86  
-				
87  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
88  
-				
89  
-			</div>
90  
-			
91  
-		</li>
92  
-		
93  
-		<li class="slide-02">
94  
-			
95  
-			<div>
96  
-				
97  
-				<h2>Slide two</h2>
98  
-				
99  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
100  
-				
101  
-			</div>
102  
-			
103  
-		</li>
104  
-		
105  
-		<li class="slide-03">
106  
-			
107  
-			<div>
108  
-				
109  
-				<h2>Slide three</h2>
110  
-				
111  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
112  
-				
113  
-			</div>
114  
-			
115  
-		</li>
116  
-		
117  
-		<li class="slide-04">
118  
-			
119  
-			<div>
120  
-				
121  
-				<h2>Slide four</h2>
122  
-				
123  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
124  
-				
125  
-			</div>
126  
-			
127  
-		</li>
128  
-		
129  
-		<li class="slide-05">
130  
-			
131  
-			<div>
132  
-				
133  
-				<h2>Slide five</h2>
134  
-				
135  
-				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
136  
-				
137  
-			</div>
138  
-			
139  
-		</li>
140  
-		
141  
-	</ul>
142  
-	
143  
-	<p>By <a href="http://twitter.com/csswizardry">Harry Roberts</a>. <a href="http://csswizardry.com/2011/02/pure-css3-accordion/">Return to article</a>.</p>
144  
-	
145  
-	<script type="text/javascript">
146  
-		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
147  
-		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
148  
-	</script>
149  
-	<script type="text/javascript">
150  
-		try {
151  
-		var pageTracker = _gat._getTracker("UA-1856861-4");
152  
-		pageTracker._trackPageview();
153  
-		} catch(err) {}
154  
-	</script>
155  
-</body>
156  
-</html>
157  
-
14  demos/border-radius/index.html
... ...
@@ -1,14 +0,0 @@
1  
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2  
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3  
-<head>
4  
-	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
5  
-	<title>Border Radius</title>
6  
-	<style type="text/css">
7  
-		p{ -webkit-border-radius: 50px; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius:50px 10px 50px 10px; border-radius:50px 10px 50px 10px; background:red; color:white; padding:50px; }
8  
-	</style>
9  
-</head>
10  
-<body>
11  
-	<p>This is a test, yo!</p>
12  
-	<a href="http://csswizardry.com/2010/03/a-quick-note-on-border-radius/">Back to main article</a>
13  
-</body>
14  
-</html>
114  demos/centred-nav/dropdown.html
... ...
@@ -1,114 +0,0 @@
1  
-<!DOCTYPE html>
2  
-<html lang="en">
3  
-<head>
4  
-	<meta charset="utf-8" />
5  
-	
6  
-	<title>Vertically centred horizontal nav.</title>
7  
-	
8  
-	<style>
9  
-	
10  
-		body	{ width:960px; padding:100px 0; margin:0 auto; font-family:Calibri, sans-serif; }
11  
-		#nav{
12  
-			border:1px solid #ccc;
13  
-			border-width:1px 0;
14  
-			list-style:none;
15  
-			margin:0;
16  
-			padding:0;
17  
-			text-align:center;
18  
-		}
19  
-		#nav li{
20  
-			position:relative;
21  
-			display:inline;
22  
-		}
23  
-		#nav a{
24  
-			display:inline-block;
25  
-			padding:10px;
26  
-		}
27  
-		#nav ul{
28  
-			position:absolute;
29  
-			/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
30  
-			left:-9999px;
31  
-			margin:0;
32  
-			padding:0;
33  
-			text-align:left;
34  
-		}
35  
-		#nav ul li{
36  
-			display:block;
37  
-		}
38  
-		#nav li:hover ul{
39  
-			left:0;
40  
-		}
41  
-		#nav li:hover a{
42  
-			text-decoration:underline;
43  
-			background:#f1f1f1;
44  
-		}
45  
-		#nav li:hover ul a{
46  
-			text-decoration:none;
47  
-			background:none;
48  
-		}
49  
-		#nav li:hover ul a:hover{
50  
-			text-decoration:underline;
51  
-			background:#f1f1f1;
52  
-		}
53  
-		#nav ul a{
54  
-			white-space:nowrap;
55  
-			display:block;
56  
-			border-bottom:1px solid #ccc;
57  
-		}
58  
-		a{
59  
-			color:#c00;
60  
-			text-decoration:none;
61  
-			font-weight:bold;
62  
-		}
63  
-		a:hover{
64  
-			text-decoration:underline;
65  
-			background:#f1f1f1;
66  
-		}
67  
-		
68  
-	</style>
69  
-	
70  
-</head>
71  
-
72  
-<body>
73  
-
74  
-	<h1>Create a vertically centred horizontal navigation</h1>
75  
-
76  
-	
77  
-	<ul id="nav">
78  
-	
79  
-		<li><a href="/">Home</a></li>
80  
-		<li>
81  
-			<a href="/about/">About</a>
82  
-			<ul>
83  
-				<li><a href="#">About me</a></li>
84  
-				<li><a href="#">About my work</a></li>
85  
-			</ul>
86  
-		</li>
87  
-		<li>
88  
-			<a href="/portfolio/">Portfolio</a>
89  
-			<ul>
90  
-				<li><a href="#">Web</a></li>
91  
-				<li><a href="#">Print</a></li>
92  
-				<li><a href="#">Identity</a></li>
93  
-			</ul>
94  
-		</li>
95  
-		<li><a href="/archives/">Archives</a></li>
96  
-		<li><a href="/resources/">Resources</a></li>
97  
-		<li><a href="/contact/">Contact</a></li>
98  
-
99  
-	</ul>
100  
-	
101  
-	<p><a href="http://csswizardry.com/2011/01/create-a-vertically-centred-horizontal-navigation/">Back to article</a> | <a href="./">View regular version</a></p>
102  
-
103  
-	<script type="text/javascript">
104  
-		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
105  
-		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
106  
-	</script>
107  
-	<script type="text/javascript">
108  
-		try {
109  
-		var pageTracker = _gat._getTracker("UA-1856861-4");
110  
-		pageTracker._trackPageview();
111  
-		} catch(err) {}
112  
-	</script>
113  
-</body>
114  
-</html>
67  demos/centred-nav/index.html
... ...
@@ -1,67 +0,0 @@
1  
-<!DOCTYPE html>
2  
-<html lang="en">
3  
-<head>
4  
-	<meta charset="utf-8" />
5  
-	
6  
-	<title>Vertically centred horizontal nav.</title>
7  
-	
8  
-	<style>
9  
-	
10  
-		body	{ width:960px; padding:100px 0; margin:0 auto; font-family:Calibri, sans-serif; }
11  
-		#nav{
12  
-			border:1px solid #ccc;
13  
-			border-width:1px 0;
14  
-			list-style:none;
15  
-			margin:0;
16  
-			padding:0;
17  
-			text-align:center;
18  
-		}
19  
-		#nav li{
20  
-			display:inline;
21  
-		}
22  
-		#nav a{
23  
-			display:inline-block;
24  
-			padding:10px;
25  
-		}
26  
-		a{
27  
-			color:#c00;
28  
-			text-decoration:none;
29  
-			font-weight:bold;
30  
-		}
31  
-		a:hover{
32  
-			text-decoration:underline;
33  
-		}
34  
-		
35  
-	</style>
36  
-	
37  
-</head>
38  
-
39  
-<body>
40  
-
41  
-	<h1>Create a vertically centred horizontal navigation</h1>
42  
-	
43  
-	<ul id="nav">
44  
-	
45  
-		<li><a href="/">Home</a></li>
46  
-		<li><a href="/about/">About</a></li>
47  
-		<li><a href="/portfolio/">Portfolio</a></li>
48  
-		<li><a href="/archives/">Archives</a></li>
49  
-		<li><a href="/resources/">Resources</a></li>
50  
-		<li><a href="/contact/">Contact</a></li>
51  
-	
52  
-	</ul>
53  
-	
54  
-	<p><a href="http://csswizardry.com/2011/01/create-a-vertically-centred-horizontal-navigation/">Back to article</a> | <a href="dropdown.html">View dropdown version</a></p>
55  
-
56  
-	<script type="text/javascript">
57  
-		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
58  
-		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
59  
-	</script>
60  
-	<script type="text/javascript">
61  
-		try {
62  
-		var pageTracker = _gat._getTracker("UA-1856861-4");
63  
-		pageTracker._trackPageview();
64  
-		} catch(err) {}
65  
-	</script>
66  
-</body>
67  
-</html>
130  demos/css-dropdown/css/style.css
... ...
@@ -1,130 +0,0 @@
1  
-/*------------------------------------*\
2  
-	RESET
3  
-\*------------------------------------*/
4  
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
5  
-	margin:0;
6  
-	padding:0;
7  
-}
8  
-table{
9  
-	border-collapse:collapse;
10  
-	border-spacing:0;
11  
-}
12  
-fieldset,img{
13  
-	border:0;
14  
-}
15  
-address,caption,cite,code,dfn,th,var{
16  
-	font-style:normal;
17  
-	font-weight:normal;
18  
-}
19  
-caption,th{
20  
-	text-align:left;
21  
-}
22  
-h1,h2,h3,h4,h5,h6{
23  
-	font-size:100%;
24  
-	font-weight:normal;
25  
-}
26  
-q:before,q:after{
27  
-	content:'';
28  
-}
29  
-abbr,acronym{
30  
-	border:0;
31  
-}
32  
-
33  
-
34  
-
35  
-
36  
-
37  
-/*------------------------------------*\
38  
-	MAIN
39  
-\*------------------------------------*/
40  
-html{
41  
-	height:101%;
42  
-	background:#fff url(/img/css/bg.gif) top left repeat-x;
43  
-}
44  
-body{
45  
-	font-family:Arial,Verdana,sans-serif;
46  
-	font-size:0.75em;
47  
-	color:#333;
48  
-	width:960px;
49  
-	margin:0 auto;
50  
-	padding:10px;
51  
-}
52  
-
53  
-
54  
-
55  
-
56  
-
57  
-/*------------------------------------*\
58  
-	NAV
59  
-\*------------------------------------*/
60  
-#nav{
61  
-	list-style:none;
62  
-	font-weight:bold;
63  
-	margin-bottom:10px;
64  
-	/* Clear floats */
65  
-	float:left;
66  
-	width:100%;
67  
-	/* Bring the nav above everything else--uncomment if needed.
68  
-	position:relative;
69  
-	z-index:5;
70  
-	*/
71  
-}
72  
-#nav li{
73  
-	float:left;
74  
-	margin-right:10px;
75  
-	position:relative;
76  
-}
77  
-#nav a{
78  
-	display:block;
79  
-	padding:5px;
80  
-	color:#fff;
81  
-	background:#333;
82  
-	text-decoration:none;
83  
-}
84  
-#nav a:hover{
85  
-	color:#fff;
86  
-	background:#6b0c36;
87  
-	text-decoration:underline;
88  
-}
89  
-
90  
-/*--- DROPDOWN ---*/
91  
-#nav ul{
92  
-	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
93  
-	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
94  
-	list-style:none;
95  
-	position:absolute;
96  
-	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
97  
-}
98  
-#nav ul li{
99  
-	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
100  
-	float:none;
101  
-}
102  
-#nav ul a{
103  
-	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
104  
-}
105  
-#nav li:hover ul{ /* Display the dropdown on hover */
106  
-	left:0; /* Bring back on-screen when needed */
107  
-}
108  
-#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
109  
-	background:#6b0c36;
110  
-	text-decoration:underline;
111  
-}
112  
-#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
113  
-	text-decoration:none;
114  
-}
115  
-#nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
116  
-	background:#333;
117  
-}
118  
-
119  
-
120  
-
121  
-
122  
-
123  
-/*------------------------------------*\
124  
-	TYPE
125  
-\*------------------------------------*/
126  
-h1{
127  
-	font-family:Calibri, Arial, Verdana, sans-serif;
128  
-	font-size:2em;
129  
-	width:520px;
130  
-}
74  demos/css-dropdown/index.html
... ...
@@ -1,74 +0,0 @@
1  
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2  
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3  
-<head>
4  
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
5  
-	<title>Pure CSS Dropdown Menus</title>
6  
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
7  
-</head>
8  
-<body>
9  
-	<ul id="nav">
10  
-		<li>
11  
-			<a href="#" title="Return home">Home</a>
12  
-
13  
-		</li>
14  
-		<li>
15  
-			<a href="#" title="About the company">About</a>
16  
-			<ul>
17  
-				<li><a href="#">The product</a></li>
18  
-				<li><a href="#">Meet the team</a></li>
19  
-			</ul>
20  
-
21  
-		</li>
22  
-		<li>
23  
-			<a href="#" title="The services we offer">Services</a>
24  
-			<ul>
25  
-				<li><a href="#">Sevice one</a></li>
26  
-				<li><a href="#">Sevice two</a></li>
27  
-				<li><a href="#">Sevice three</a></li>
28  
-
29  
-				<li><a href="#">Sevice four</a></li>
30  
-			</ul>
31  
-		</li>
32  
-		<li>
33  
-			<a href="#" title="Our product range">Product</a>
34  
-			<ul>
35  
-				<li><a href="#">Small product (one)</a></li>
36  
-
37  
-				<li><a href="#">Small product (two)</a></li>
38  
-				<li><a href="#">Small product (three)</a></li>
39  
-				<li><a href="#">Small product (four)</a></li>
40  
-				<li><a href="#">Big product (five)</a></li>
41  
-				<li><a href="#">Big product (six)</a></li>
42  
-				<li><a href="#">Big product (seven)</a></li>
43  
-
44  
-				<li><a href="#">Big product (eight)</a></li>
45  
-				<li><a href="#">Enourmous product (nine)</a></li>
46  
-				<li><a href="#">Enourmous product (ten)</a></li>
47  
-				<li><a href="#">Enourmous product (eleven)</a></li>
48  
-			</ul>
49  
-		</li>
50  
-		<li>
51  
-
52  
-			<a href="#" title="Get in touch with us">Contact</a>
53  
-			<ul>
54  
-				<li><a href="#">Out-of-hours</a></li>
55  
-				<li><a href="#">Directions</a></li>
56  
-			</ul>
57  
-		</li>
58  
-	</ul>
59  
-
60  
-	<h1>And here is some dummy content, to show how you can hover over other things on the page</h1>
61  
-	<p><a href="http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/" style="color:#6b0c36;">Return to main article&hellip;</a></p>
62  
-	
63  
-	<script type="text/javascript">
64  
-		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
65  
-		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
66  
-	</script>
67  
-	<script type="text/javascript">
68  
-		try {
69  
-		var pageTracker = _gat._getTracker("UA-1856861-4");
70  
-		pageTracker._trackPageview();
71  
-		} catch(err) {}
72  
-	</script>
73  
-</body>
74  
-</html>
128  demos/css-powered-ribbons/css/style.css
... ...
@@ -1,128 +0,0 @@
1  
-/*------------------------------------*\
2  
-	RESET
3  
-\*------------------------------------*/
4  
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
5  
-	margin:0;
6  
-	padding:0;
7  
-}
8  
-table{
9  
-	border-collapse:collapse;
10  
-	border-spacing:0;
11  
-}
12  
-fieldset,img{ 
13  
-	border:0;
14  
-}
15  
-address,caption,cite,dfn,th,var{
16  
-	font-style:normal;
17  
-	font-weight:normal;
18  
-}
19  
-caption,th{
20  
-	text-align:left;
21  
-}
22  
-h1,h2,h3,h4,h5,h6{
23  
-	font-size:100%;
24  
-	font-weight:normal;
25  
-}
26  
-q:before,q:after{
27  
-	content:'';
28  
-}
29  
-abbr,acronym{
30  
-	border:0;
31  
-}
32  
-
33  
-
34  
-
35  
-
36  
-
37  
-/*------------------------------------*\
38  
-	MAIN
39  
-\*------------------------------------*/
40  
-html{
41  
-	font-family:Cambria, Georgia, "Times New Roman", Times, serif;
42  
-	background:#e4e3d5;
43  
-	color:#666;
44  
-	height:101%;
45  
-}
46  
-body{
47  
-	width:940px;
48  
-	padding:75px 10px;
49  
-	margin:0 auto;
50  
-	background:#fff;
51  
-}
52  
-
53  
-
54  
-
55  
-
56  
-
57  
-
58  
-/*------------------------------------*\
59  
-	TYPE
60  
-\*------------------------------------*/
61  
-h1,h2{
62  
-	clear:both;
63  
-	position:relative;
64  
-	color:#fff;
65  
-	background:#f43059;
66  
-	text-shadow:0 -1px #d0284b, 0 1px #f96080;
67  
-}
68  
-h1{
69  
-	font-size:2em;
70  
-	text-align:center;
71  
-	margin:0 -20px 50px -20px;
72  
-	padding:20px 0;
73  
-	
74  
-	-moz-box-shadow:0 2px 0 rgba(0,0,0,0.1);
75  
-	-webkit-box-shadow:0 2px 0 rgba(0,0,0,0.1);
76  
-	-o-box-shadow:0 2px 0 rgba(0,0,0,0.1);
77  
-	box-shadow:0 2px 0 rgba(0,0,0,0.1);
78  
-}
79  
-h1:before,
80  
-h1:after,
81  
-h2:before{
82  
-	content:" ";
83  
-	background:url(../img/css/ribbon.png);
84  
-	display:block;
85  
-	width:10px;
86  
-	height:10px;
87  
-	position:absolute;
88  
-	bottom:0;
89  
-	left:0;
90  
-	margin-bottom:-10px;
91  
-	z-index:-1;
92  
-}
93  
-h1:after{
94  
-	background:url(../img/css/ribbon-2.png);
95  
-	right:0;
96  
-	left:auto;
97  
-}
98  
-h2{
99  
-	font-size:1.5em;
100  
-	float:left;
101  
-	padding:10px 10px 10px 20px;
102  
-	margin-left:-20px;
103  
-	margin-bottom:20px;
104  
-	
105  
-	-moz-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
106  
-	-webkit-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
107  
-	-o-box-shadow:2px 2px 0 rgba(0,0,0,0.1);
108  
-	box-shadow:2px 2px 0 rgba(0,0,0,0.1);
109  
-}
110  
-h2:nth-of-type(even){
111  
-	float:right;
112  
-	padding:10px 20px 10px 10px;
113  
-	margin-right:-20px;
114  
-	
115  
-	-moz-box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
116  
-	-webkit-box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
117  
-	-o-box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
118  
-	box-shadow:-2px 2px 0 rgba(0,0,0,0.1);
119  
-}
120  
-h2:nth-of-type(even):before{
121  
-	background:url(../img/css/ribbon-2.png);
122  
-	right:0;
123  
-	left:auto;
124  
-}
125  
-p{
126  
-	clear:both;
127  
-	margin-bottom:20px;
128  
-}
BIN  demos/css-powered-ribbons/img/css/ribbon-2.png
BIN  demos/css-powered-ribbons/img/css/ribbon.png
40  demos/css-powered-ribbons/index.html
... ...
@@ -1,40 +0,0 @@
1  
-<!DOCTYPE html>
2  
-<html lang="en">
3  
-<head>
4  
-	<meta charset="UTF-8" />
5  
-	
6  
-	<title>Ribbons in clean HTML and progressive CSS</title>
7  
-	
8  
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
9  
-</head>
10  
-<body>
11  
-
12  
-	<h1>Ribbons in clean HTML and progressive CSS</h1>
13  
-	
14  
-	<h2>This is an example heading&hellip;</h2>
15  
-	
16  
-	<p><a href="/2011/02/css-powered-ribbons-the-clean-way/">Return to article.</a></p>
17  
-	
18  
-	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
19  
-	
20  
-	<h2>&hellip;as is this one&hellip;</h2>
21  
-	
22  
-	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
23  
-	
24  
-	<h2>&hellip;and this!</h2>
25  
-	
26  
-	<p>&copy; Copyright Harry Roberts 2011</p>
27  
-
28  
-	<script type="text/javascript">
29  
-		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
30  
-		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
31  
-	</script>
32  
-	<script type="text/javascript">
33  
-		try {
34  
-		var pageTracker = _gat._getTracker("UA-1856861-4");
35  
-		pageTracker._trackPageview();
36  
-		} catch(err) {}
37  
-	</script>
38  
-
39  
-</body>
40  
-</html>
100  demos/graphs/css/style.css
... ...
@@ -1,100 +0,0 @@
1  
-/*------------------------------------*\
2  
-	RESET
3  
-\*------------------------------------*/
4  
-body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ 
5  
-	margin:0;
6  
-	padding:0;
7  
-}
8  
-table{
9  
-	border-collapse:collapse;
10  
-	border-spacing:0;
11  
-}
12  
-fieldset,img{ 
13  
-	border:0;
14  
-}
15  
-address,caption,cite,code,em,strong,dfn,th,var{
16  
-	font-style:normal;
17  
-	font-weight:normal;
18  
-}
19  
-ol,ul{
20  
-	list-style:none;
21  
-}
22  
-caption,th{
23  
-	text-align:left;
24  
-}
25  
-h1,h2,h3,h4,h5,h6{
26  
-	font-size:100%;
27  
-	font-weight:normal;
28  
-}
29  
-q:before,q:after{
30  
-	content:'';
31  
-}
32  
-abbr,acronym{
33  
-	border:0;
34  
-}
35  
-
36  
-
37  
-
38  
-
39  
-
40  
-/*------------------------------------*\
41  
-	MAIN
42  
-\*------------------------------------*/
43  
-html{
44  
-	font-size:100%;
45  
-	height:101%;
46  
-}
47  
-body{
48  
-	font-size:75%;
49  
-	font-family:Arial, Verdana, sans-serif;
50  
-	background:/*url(//csswizardry.com/whitleyjournalism.co.uk/img/css/grid.png) top center repeat-y */#fff;
51  
-	color:#333;
52  
-}
53  
-#wrapper{
54  
-	width:940px;
55  
-	padding:10px;
56  
-	margin:0 auto;
57  
-}
58  
-
59  
-
60  
-
61  
-
62  
-
63  
-
64  
-/*------------------------------------*\
65  
-	CHART
66  
-\*------------------------------------*/
67  
-#chart{
68  
-	width:520px;
69  
-}
70  
-#chart dt{
71  
-	width:160px;
72  
-	float:left;
73  
-	margin:0 20px 5px 0;
74  
-	padding:2px 0;
75  
-	display:inline;
76  
-	font-weight:bold;
77  
-	text-align:right;
78  
-	clear:left;
79  
-}
80  
-#chart dd{
81  
-	width:339px;
82  
-	border-right:1px solid #ddd;
83  
-	float:left;
84  
-	margin-bottom:5px;
85  
-	display:inline;
86  
-}
87  
-#chart dd span{
88  
-	color:#fff;
89  
-	background:#09f;
90  
-	text-align:center;
91  
-	padding:2px 0;
92  
-	display:block;
93  
-	
94  
-	text-shadow:1px 1px 1px rgba(0,0,0,0.2);
95  
-	-moz-border-radius:2px;
96  
-	-webkit-border-radius:2px;
97  
-	border-radius:2px;
98  
-	background:-webkit-gradient(linear, left top, left bottom, from(#09f), to(#077fd0));
99  
-	-webkit-box-reflect:below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));
100  
-}
88  demos/graphs/index.php
... ...
@@ -1,88 +0,0 @@
1  
-<?php
2  
-	$widthOne = rand(20,100);
3  
-	$widthTwo = rand(20,100);
4  
-	$widthThree = rand(20,100);
5  
-?>
6  
-
7  
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
8  
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
9  
-<head>
10  
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
11  
-	
12  
-	<title>CSS bar charts&mdash;styling data with CSS3 and progressive enhancement</title>
13  
-
14  
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
15  
-	<style type="text/css">
16  
-		#data-one{
17  
-			width:<?php echo $widthOne; ?>%;
18  
-		}
19  
-		#data-two{
20  
-			width:<?php echo $widthTwo; ?>%;
21  
-		}
22  
-		#data-three{
23  
-			width:<?php echo $widthThree; ?>%;
24  
-		}
25  
-		#data-one{
26  
-			-webkit-animation-name:bar-one;
27  
-		}
28  
-		#data-two{
29  
-			-webkit-animation-name:bar-two;
30  
-		}
31  
-		#data-three{
32  
-			-webkit-animation-name:bar-three;
33  
-		}
34  
-		#data-one,#data-two,#data-three{
35  
-			-webkit-animation-duration:0.5s;
36  
-			-webkit-animation-iteration-count:1;
37  
-			-webkit-animation-timing-function:ease-out;
38  
-		}
39  
-		@-webkit-keyframes bar-one{
40  
-			0%{
41  
-				width:0%;
42  
-			}
43  
-			100%{
44  
-				width:<?php echo $widthOne; ?>%;
45  
-			}
46  
-		}
47  
-		@-webkit-keyframes bar-two{
48  
-			0%{
49  
-				width:0%;
50  
-			}
51  
-			100%{
52  
-				width:<?php echo $widthTwo; ?>%;
53  
-			}
54  
-		}
55  
-		@-webkit-keyframes bar-three{
56  
-			0%{
57  
-				width:0%;
58  
-			}
59  
-			100%{
60  
-				width:<?php echo $widthThree; ?>%;
61  
-			}
62  
-		}
63  
-	</style>
64  
-</head>
65  
-<body id="home">
66  
-	<div id="wrapper">
67  
-		<dl id="chart">
68  
-			<dt>Sales increase</dt>
69  
-			<dd><span id="data-one"><?php echo $widthOne; ?>%</span></dd>
70  
-			<dt>Revenue increase</dt>
71  
-			<dd><span id="data-two"><?php echo $widthTwo; ?>%</span></dd>
72  
-			<dt>Profit increase</dt>
73  
-			<dd><span id="data-three"><?php echo $widthThree; ?>%</span></dd>
74  
-		</dl>
75  
-		<p style="padding:10px 0;clear:both;"><a href="?">Refresh page</a>. <a href="http://csswizardry.com/2010/02/css-bar-charts-styling-data-with-css3-and-progressive-enhancement">Return to main article</a></p>
76  
-	</div>
77  
-	<script type="text/javascript">
78  
-		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
79  
-		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
80  
-	</script>
81  
-	<script type="text/javascript">
82  
-		try {
83  
-		var pageTracker = _gat._getTracker("UA-1856861-4");
84  
-		pageTracker._trackPageview();
85  
-		} catch(err) {}
86  
-	</script>
87  
-</body>
88  
-</html>
98  demos/graphs/index2.php
... ...
@@ -1,98 +0,0 @@
1  
-<?php
2  
-	$widthOne = rand(20,100);
3  
-	$widthTwo = rand(20,100);
4  
-	$widthThree = rand(20,100);
5  
-?>
6  
-
7  
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
8  
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
9  
-<head>
10  
-	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
11  
-	
12  
-	<title>CSS bar charts&mdash;styling data with CSS3 and progressive enhancement</title>
13  
-
14  
-	<link rel="stylesheet" type="text/css" href="css/style.css" />
15