-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
281 lines (248 loc) · 17.9 KB
/
index.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Dave Shea">
<meta name="keywords"
content="design, css, cascading, style, sheets, xhtml, graphic design, w3c, web standards, visual, display">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<title>css Zen Garden: The Beauty in CSS Design</title>
<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
<script type="text/javascript"></script>
<style type="text/css" media="all">
@import "sample.css";
</style><!--
This xhtml document is marked up to provide the designer with the maximum possible flexibility.
There are more classes and extraneous tags than needed, and in a real world situation, it's more
likely that it would be much leaner.
However, I think we can all agree that even given that, we're still better off than if this had been
built with tables.
-->
</head>
<body onload="window.defaultStatus='css Zen Garden: The Beauty in CSS Design';" id="css-zen-garden">
<div id="container">
<div id="intro">
<div id="pageHeader">
<h1><span>css Zen Garden</span></h1>
<h2><span>The Beauty of <acronym title="Cascading Style Sheets">CSS</acronym> Design</span></h2>
</div>
<div id="quickSummary">
<p class="p1"><span>A demonstration of what can be accomplished visually through <acronym
title="Cascading Style Sheets">CSS</acronym>-based design. Select any style sheet from the
list to load it
into this page.</span></p>
<p class="p2"><span>Download the sample <a href="http://www.csszengarden.com/zengarden-sample.html"
title="This page's source HTML code, not to be modified.">html file</a> and <a
href="http://www.csszengarden.com/zengarden-sample.css"
title="This page's sample CSS, the file you may modify.">css file</a></span></p>
</div>
<div id="preamble">
<h3><span>The Road to Enlightenment</span></h3>
<p class="p1"><span>Littering a dark and dreary road lay the past relics of browser-specific tags,
incompatible
<acronym title="Document Object Model">DOM</acronym>s, and broken <acronym
title="Cascading Style Sheets">CSS</acronym> support.</span></p>
<p class="p2"><span>Today,
we must clear the mind of past practices. Web enlightenment has been
achieved thanks to the tireless efforts of folk like the <acronym
title="World Wide Web Consortium">W3C</acronym>, <acronym
title="Web Standards Project">WaSP</acronym> and
the major browser creators.</span></p>
<p class="p3"><span>The
css Zen Garden invites you to relax and meditate on the important
lessons of the masters. Begin to see with clarity. Learn to use the
(yet to be) time-honored techniques in new and invigorating fashion.
Become one with the web.</span></p>
</div>
</div>
<div id="supportingText">
<div id="explanation">
<h3><span>So What is This About?</span></h3>
<p class="p1"><span>There is clearly a need for <acronym title="Cascading Style Sheets">CSS</acronym>
to be taken seriously by graphic artists. The Zen Garden aims to
excite, inspire, and encourage participation. To begin, view some of
the existing designs in the list. Clicking on any one will load the
style sheet into this very page. The code remains the same, the only
thing that has changed is the external .css file. Yes, really.</span></p>
<p class="p2"><span><acronym title="Cascading Style Sheets">CSS</acronym>
allows complete and total control over the style of a hypertext
document. The only way this can be illustrated in a way that gets
people excited is by demonstrating what it can truly be, once the reins
are placed in the hands of those able to create beauty from structure.
To date, most examples of neat tricks and hacks have been demonstrated
by structurists and coders. Designers have yet to make their mark. This
needs to change.</span></p>
</div>
<div id="participation">
<h3><span>Participation</span></h3>
<p class="p1"><span>Graphic artists only please. You are modifying this page, so strong <acronym
title="Cascading Style Sheets">CSS</acronym> skills are necessary, but the example files are
commented
well enough that even <acronym title="Cascading Style Sheets">CSS</acronym> novices can use them
as starting
points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/"
title="A listing of CSS-related resources"><acronym
title="Cascading Style Sheets">CSS</acronym> Resource
Guide</a> for advanced tutorials and tips on working with <acronym
title="Cascading Style Sheets">CSS</acronym>.</span></p>
<p class="p2"><span>You may modify the style sheet in any way you wish, but not the <acronym
title="HyperText Markup Language">HTML</acronym>.
This may seem daunting at first if you’ve never worked this way before,
but follow the listed links to learn more, and use the sample files as
a guide.</span></p>
<p class="p3"><span>Download the sample <a href="http://www.csszengarden.com/zengarden-sample.html"
title="This page's source HTML code, not to be modified.">html file</a> and <a
href="http://www.csszengarden.com/zengarden-sample.css"
title="This page's sample CSS, the file you may modify.">css file</a>
to work on a copy locally. Once you have completed your masterpiece
(and please, don’t submit half-finished work) upload your .css file to
a web server under your control. <a href="http://www.mezzoblue.com/zengarden/submit/"
title="Use the contact form to send us your CSS file">Send us a link</a> to the file and if
we choose to
use it, we will spider the associated images. Final submissions will be placed on our
server.</span></p>
</div>
<div id="benefits">
<h3><span>Benefits</span></h3>
<p class="p1"><span>Why participate? For recognition, inspiration, and a resource we can all refer to
when
making the case for <acronym title="Cascading Style Sheets">CSS</acronym>-based
design. This is sorely needed, even today. More and more major sites
are taking the leap, but not enough have. One day this gallery will be
a historical curiosity; that day is not today.</span></p>
</div>
<div id="requirements">
<h3><span>Requirements</span></h3>
<p class="p1"><span>We would like to see as much <acronym
title="Cascading Style Sheets, version 1">CSS1</acronym> as possible. <acronym
title="Cascading Style Sheets, version 2">CSS2</acronym> should be limited to
widely-supported elements
only. The css Zen Garden is about functional, practical <acronym
title="Cascading Style Sheets">CSS</acronym> and not the latest bleeding-edge tricks
viewable by 2% of the
browsing public. The only real requirement we have is that your <acronym
title="Cascading Style Sheets">CSS</acronym> validates.</span></p>
<p class="p2"><span>Unfortunately, designing this way highlights the flaws in the various
implementations of
<acronym title="Cascading Style Sheets">CSS</acronym>. Different browsers display differently,
even
completely valid <acronym title="Cascading Style Sheets">CSS</acronym> at times, and this
becomes maddening
when a fix for one leads to breakage in another. View the <a
href="http://www.mezzoblue.com/zengarden/resources/"
title="A listing of CSS-related resources">Resources</a>
page for information on some of the fixes available. Full browser
compliance is still sometimes a pipe dream, and we do not expect you to
come up with pixel-perfect code across every platform. But do test in
as many as you can. If your design doesn’t work in at least IE5+/Win
and Mozilla (run by over 90% of the population), chances are we won’t
accept it.</span></p>
<p class="p3"><span>We ask that you submit
original artwork. Please respect copyright laws. Please keep
objectionable material to a minimum; tasteful nudity is acceptable,
outright pornography will be rejected.</span></p>
<p class="p4"><span>This
is a learning exercise as well as a demonstration. You retain full
copyright on your graphics (with limited exceptions, see <a
href="http://www.mezzoblue.com/zengarden/submit/guidelines/">submission guidelines</a>), but
we ask you
release your <acronym title="Cascading Style Sheets">CSS</acronym> under a Creative Commons
license
identical to the <a href="http://creativecommons.org/licenses/sa/1.0/"
title="View the Zen Garden's license information.">one on this site</a> so that others may
learn from your
work.</span></p>
<p class="p5"><span>Bandwidth graciously donated by <a href="http://www.dreamfirestudios.com/">DreamFire
Studios</a></span></p>
</div>
<div id="footer">
<a href="http://validator.w3.org/check/referer"
title="Check the validity of this site’s XHTML">xhtml</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"
title="Check the validity of this site’s CSS">css</a>
<a href="http://creativecommons.org/licenses/by-nc-sa/1.0/"
title="View details of the license of this site, courtesy of Creative Commons.">cc</a>
<a href="http://mezzoblue.com/zengarden/faq/#s508"
title="Read about the accessibility of this site">508</a>
<a href="http://www.mezzoblue.com/zengarden/faq/#aaa"
title="Read about the accessibility of this site">aaa</a>
</div>
</div>
<div id="linkList">
<!--extra div for flexibility - this list will probably be the trickiest spot you'll deal with -->
<div id="linkList2">
<!-- If you're wondering about the extra at the end of the link, it's a hack to meet WCAG 1 Accessibility. -->
<!-- I don't like having to do it, but this is a visual exercise. It's a compromise. -->
<div id="lselect">
<h3 class="select"><span>Select a Design:</span></h3>
<!-- list of links begins here. There will be no more than 8 links per page -->
<ul>
<li><a href="http://www.csszengarden.com/" title="AccessKey: a" accesskey="a">Sample #1</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="http://www.csszengarden.com/" title="AccessKey: b" accesskey="b">Sample #2</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="http://www.csszengarden.com/" title="AccessKey: c" accesskey="c">Sample #3</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="http://www.csszengarden.com/" title="AccessKey: d" accesskey="d">Sample #4</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="http://www.csszengarden.com/" title="AccessKey: e" accesskey="e">Sample #5</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="http://www.csszengarden.com/" title="AccessKey: f" accesskey="f">Sample #6</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="http://www.csszengarden.com/" title="AccessKey: g" accesskey="g">Sample #7</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
<li><a href="http://www.csszengarden.com/" title="AccessKey: h" accesskey="h">Sample #8</a> by
<a href="http://www.mezzoblue.com/" class="c">Dave Shea</a> </li>
</ul>
</div>
<div id="larchives">
<h3 class="archives"><span>Archives:</span></h3>
<ul>
<li><a href="http://www.csszengarden.com/" title="View next set of designs. AccessKey: n"
accesskey="n"><span class="accesskey">n</span>ext designs �</a> </li>
<li><a href="http://www.csszengarden.com/" title="View previous set of designs. AccessKey: p"
accesskey="p">� <span class="accesskey">p</span>revious designs</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/alldesigns/"
title="View every submission to the Zen Garden. AccessKey: w" accesskey="w">Vie<span
class="accesskey">w</span> All Designs</a></li>
</ul>
</div>
<div id="lresources">
<h3 class="resources"><span>Resources:</span></h3>
<ul>
<li><a href="http://www.csszengarden.com/001/001.css"
title="View the source CSS file for the currently-viewed design, AccessKey: v"
accesskey="v"><span class="accesskey">V</span>iew This Design’s <acronym
title="Cascading Style Sheets">CSS</acronym></a></li>
<li><a href="http://www.mezzoblue.com/zengarden/resources/"
title="Links to great sites with information on using CSS. AccessKey: r"
accesskey="r"><acronym title="Cascading Style Sheets">CSS</acronym> <span
class="accesskey">R</span>esources</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/faq/"
title="A list of Frequently Asked Questions about the Zen Garden. AccessKey: q"
accesskey="q"><acronym title="Frequently Asked Questions">FA<span
class="accesskey">Q</span></acronym></a> </li>
<li><a href="http://www.mezzoblue.com/zengarden/submit/"
title="Send in your own CSS file. AccessKey: s" accesskey="s"><span
class="accesskey">S</span>ubmit a Design</a></li>
<li><a href="http://www.mezzoblue.com/zengarden/translations/"
title="View translated versions of this page. AccessKey: t" accesskey="t"><span
class="accesskey">T</span>ranslations</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- These extra divs/spans may be used as catch-alls to add extra imagery. -->
<!-- Add a background image to each and use width and height to control sizing, place with absolute positioning -->
<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>
<div id="extraDiv4"><span></span></div>
<div id="extraDiv5"><span></span></div>
<div id="extraDiv6"><span></span></div>
</body>
</html>