Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 648 lines (589 sloc) 41.322 kb
5424e71 Add gradient patterns site demo
Jason Johnston authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <meta content="text/html; charset=UTF-8" http-equiv="content-type">
6 <title>CSS3 PIE Demo: Buttons</title>
7
8 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
9
10 <!--[if lt IE 9]>
11 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
12 <![endif]-->
13
14
15
16 <style type="text/css">
17
18 /* Page styles */
19
20 body {
21 font-size: 12px;
22 font-family: sans-serif;
23 }
24
25
26
27
28 .nonIE {
29 color: #C00;
30 }
31
32 #patternGallery {
33 margin: 0;
34 padding: 0;
35 }
36
37 #patternGallery li {
38 display: block;
39 list-style: none;
40 clear: both;
41 margin: 0;
42 padding: 20px 0;
43 border-top: 1px solid #ccc;
44 }
45
46 #patternGallery .demo {
47 -webkit-border-radius: 25%;
48 -moz-border-radius: 25%;
49 border-radius: 25%;
50 -moz-box-shadow: 0 1px 8px #666;
51 -webkit-box-shadow: 0 1px 8px #666;
52 box-shadow: 0 1px 8px #666;
53 float: right;
54 width: 200px;
55 height: 200px;
56 list-style: none;
57 margin: 10px 10px 10px 30px;
58 position: relative;
59 behavior: url(../build/PIE.htc);
60 }
61
62 #patternGallery h2 {
63 margin: 0;
64 }
65
66 #patternGallery h3 {
67 color: #666;
68 margin: 0;
69 font-size: 1em;
70 }
71
72 #patternGallery p {
73 margin: 0 0 1.5em;
74 }
75
76 #patternGallery pre {
77 margin: 0 240px 0 0;
78 max-height: 250px;
4c8b877 @nfang Set a min-width for source code panel on demos/gradient-patterns.html
nfang authored
79 min-width: 344px;
5424e71 Add gradient patterns site demo
Jason Johnston authored
80 overflow: auto;
81 background: #eee;
82 border: 1px solid #ccc;
83 padding: .5em 1em;
84 }
85
86 </style>
87
88 <style type="text/css" id="dynamicStyle">
89
90 </style>
91
92 </head>
93 <body>
94
95
96 <h1>PIE Demo: CSS3 Gradient Patterns</h1>
97
98
99 <!-- noformat on -->
100
101
102 <p>The background patterns in this demo are created using nothing but CSS3 linear-gradients that are tiled.
103 The patterns below are borrowed (with slight modifications) from Lea Verou's <a href="http://leaverou.me/css3patterns/">CSS3 Patterns Gallery</a>
104 and from her original <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">post
105 on the topic of building patterns</a> with gradients.</p>
106
107 <p>These demos work properly in IE 9 thanks to PIE. They do not work in IE 6-8 due to lack of support for
108 sizing/positioning of linear-gradient as a tiled background.</p>
109
110
111 <ul id="patternGallery">
112 <!-- Begin patterns from http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ -->
113
114 <li>
115 <h2>Horizontal Stripes</h2>
116 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
117 <h3>CSS Code:</h3>
118 <pre><code>background-size: 50px;
119 background-color: #0ae;
120 background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
121 background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
122 background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
123 background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
124 background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
125 -pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;
126 behavior: url(/PIE.htc);</code></pre>
127 </li>
128
129 <li>
130 <h2>Vertical Stripes</h2>
131 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
132 <h3>CSS Code:</h3>
133 <pre><code>background-size: 50px;
134 background-color: #f90;
135 background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
136 background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
137 background-image: -mslinear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
138 background-image: -olinear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
139 background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
140 -pie-background: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px 50px #f90;
141 behavior: url(/PIE.htc);</code></pre>
142 </li>
143
144 <li>
145 <h2>Picnic</h2>
146 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
147 <h3>CSS Code:</h3>
148 <pre><code>background-size: 50px;
149 background-color: white;
150 background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
151 -webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
152 background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
153 -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
154 background-image: -ms-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
155 -ms-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
156 background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
157 -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
158 background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
159 linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
160 -pie-background: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px,
161 linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px white;
162 behavior: url(/PIE.htc);</code></pre>
163 </li>
164
165 <li>
166 <h2>Angled</h2>
167 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
168 <h3>CSS Code:</h3>
169 <pre><code>background-size: 50px;
170 background-color: #ac0;
171 background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
172 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
173 transparent 75%, transparent);
174 background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
175 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
176 transparent 75%, transparent);
177 background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
178 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
179 transparent 75%, transparent);
180 background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
181 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
182 transparent 75%, transparent);
183 background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
184 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
185 transparent 75%, transparent);
186 -pie-background: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
187 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
188 transparent 75%, transparent) 0 0 / 50px 50px #ac0;
189 behavior: url(/PIE.htc);</code></pre>
190 </li>
191
192 <li>
193 <h2>Angled 135</h2>
194 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
195 <h3>CSS Code:</h3>
196 <pre><code>background-size: 50px;
197 background-color: #c16;
198 background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
199 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
200 transparent 75%, transparent);
201 background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
202 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
203 transparent 75%, transparent);
204 background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
205 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
206 transparent 75%, transparent);
207 background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
208 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
209 transparent 75%, transparent);
210 background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
211 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
212 transparent 75%, transparent);
213 -pie-background: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
214 transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
215 transparent 75%, transparent) 0 0 / 50px 50px, #c16;
216 behavior: url(/PIE.htc);</code></pre>
217 </li>
218
219 <!-- End patterns from http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ -->
220
221
222
223
224
225 <!-- Begin patterns from http://leaverou.me/css3patterns/ -->
226
227 <li>
228 <h2>Checkerboard</h2>
229 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
230 <h3>CSS Code:</h3>
231 <pre><code>background-color: #eee;
232 background-size: 60px 60px;
233 background-position: 0 0, 30px 30px;
234 background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
235 -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
236 background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
237 -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
238 background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
239 -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
240 background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
241 -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
242 background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
243 linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
244 -pie-background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
245 linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 30px 30px / 60px,
246 #eee;
247 behavior: url(/PIE.htc);</code></pre>
248 </li>
249
250 <li>
251 <h2>Diagonal checkerboard</h2>
252 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
253 <h3>CSS Code:</h3>
254 <pre><code>background-color: #eee;
255 background-size: 60px 60px;
256 background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
257 -webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
258 background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
259 -moz-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
260 background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
261 -ms-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
262 background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
263 -o-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
264 background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
265 linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
266 -pie-background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
267 linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
268 #eee;
269 behavior: url(/PIE.htc);</code></pre>
270 </li>
271
272 <li>
273 <h2>Carbon</h2>
274 <p>Created by <a href="http://www.zencocoon.com/">Atle Mo (design), Sébastien Grosjean (code)</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
275 <h3>CSS Code:</h3>
276 <pre><code>background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
277 -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
278 -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
279 -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
280 -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
281 -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
282 background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
283 -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
284 -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
285 -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
286 -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
287 -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
288 background: -ms-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
289 -ms-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
290 -ms-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
291 -ms-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
292 -ms-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
293 -ms-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
294 background: -o-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
295 -o-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
296 -o-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
297 -o-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
298 -o-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
299 -o-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
300 background: linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
301 linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
302 linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
303 linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
304 linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
305 linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
306 background-size: 20px 20px;
307 background-color: #131313;
308 -pie-background: linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px / 20px,
309 linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px / 20px,
310 linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px / 20px,
311 linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px / 20px,
312 linear-gradient(0deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px,
313 linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424)
314 0 0 / 20px #131313;
315 behavior: url(/PIE.htc);</code></pre>
316 </li>
317
318 <li>
319 <h2>Steps</h2>
320 <p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
321 <h3>CSS Code:</h3>
322 <pre><code>background-color: #FF7D9D;
323 background-size: 58px 58px;
324 background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
325 0px 36px, 4px 2px, 29px 6px, 33px 30px;
326 background-image: -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
327 -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
328 -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
329 -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
330 -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
331 -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px),
332 -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
333 -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px);
334 background-image: -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
335 -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
336 -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
337 -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
338 -moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
339 -moz-linear-gradient(295deg, #C90032 10px, transparent 10px),
340 -moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
341 -moz-linear-gradient(295deg, #C90032 10px, transparent 10px);
342 background-image: -ms-linear-gradient(115deg, #C90032 23px, transparent 23px),
343 -ms-linear-gradient(295deg, #C90032 23px, transparent 23px),
344 -ms-linear-gradient(115deg, #C90032 23px, transparent 23px),
345 -ms-linear-gradient(295deg, #C90032 23px, transparent 23px),
346 -ms-linear-gradient(115deg, #C90032 10px, transparent 10px),
347 -ms-linear-gradient(295deg, #C90032 10px, transparent 10px),
348 -ms-linear-gradient(115deg, #C90032 10px, transparent 10px),
349 -ms-linear-gradient(295deg, #C90032 10px, transparent 10px);
350 background-image: -o-linear-gradient(115deg, #C90032 23px, transparent 23px),
351 -o-linear-gradient(295deg, #C90032 23px, transparent 23px),
352 -o-linear-gradient(115deg, #C90032 23px, transparent 23px),
353 -o-linear-gradient(295deg, #C90032 23px, transparent 23px),
354 -o-linear-gradient(115deg, #C90032 10px, transparent 10px),
355 -o-linear-gradient(295deg, #C90032 10px, transparent 10px),
356 -o-linear-gradient(115deg, #C90032 10px, transparent 10px),
357 -o-linear-gradient(295deg, #C90032 10px, transparent 10px);
358 background-image: linear-gradient(115deg, #C90032 23px, transparent 23px),
359 linear-gradient(295deg, #C90032 23px, transparent 23px),
360 linear-gradient(115deg, #C90032 23px, transparent 23px),
361 linear-gradient(295deg, #C90032 23px, transparent 23px),
362 linear-gradient(115deg, #C90032 10px, transparent 10px),
363 linear-gradient(295deg, #C90032 10px, transparent 10px),
364 linear-gradient(115deg, #C90032 10px, transparent 10px),
365 linear-gradient(295deg, #C90032 10px, transparent 10px);
366 -pie-background: linear-gradient(115deg, #C90032 23px, transparent 23px) 0 2px / 58px,
367 linear-gradient(295deg, #C90032 23px, transparent 23px) 4px 35px / 58px,
368 linear-gradient(115deg, #C90032 23px, transparent 23px) 29px 31px / 58px,
369 linear-gradient(295deg, #C90032 23px, transparent 23px) 33px 6px / 58px,
370 linear-gradient(115deg, #C90032 10px, transparent 10px) 0 36px / 58px,
371 linear-gradient(295deg, #C90032 10px, transparent 10px) 4px 2px / 58px,
372 linear-gradient(115deg, #C90032 10px, transparent 10px) 29px 6px / 58px,
373 linear-gradient(295deg, #C90032 10px, transparent 10px) 33px 30px / 58px,
374 #FF7D9D;
375 behavior: url(/PIE.htc);</code></pre>
376 </li>
377
378 <li>
379 <h2>Stars</h2>
380 <p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
381 <h3>CSS Code:</h3>
382 <pre><code>background: -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
383 -webkit-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
384 -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
385 -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
386 -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
387 -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
388 -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
389 -webkit-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
390 -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
391 -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
392 -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
393 -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
394 background: -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
395 -moz-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
396 -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
397 -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
398 -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
399 -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
400 -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
401 -moz-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
402 -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
403 -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
404 -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
405 -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
406 background: -ms-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
407 -ms-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
408 -ms-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
409 -ms-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
410 -ms-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
411 -ms-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
412 -ms-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
413 -ms-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
414 -ms-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
415 -ms-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
416 -ms-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
417 -ms-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
418 background: -o-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
419 -o-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
420 -o-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
421 -o-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
422 -o-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
423 -o-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
424 -o-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
425 -o-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
426 -o-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
427 -o-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
428 -o-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
429 -o-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
430 background: linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
431 linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
432 linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
433 linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
434 linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
435 linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
436 linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
437 linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
438 linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
439 linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
440 linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
441 linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
442 background-color: #232927;
443 background-size: 100px 100px;
444 -pie-background: linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px / 100px,
445 linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px / 100px,
446 linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px / 100px,
447 linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px / 100px,
448 linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px / 100px,
449 linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px / 100px,
450 linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px / 100px,
451 linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px / 100px,
452 linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px / 100px,
453 linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px / 100px,
454 linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px / 100px,
455 linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px / 100px,
456 #232927;
457 behavior: url(/PIE.htc);</code></pre>
458 </li>
459
460 <li>
461 <h2>Bricks</h2>
462 <p>Created by <a href="http://www.xanthir.com/blog/">Tab Atkins Jr</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
463 <h3>CSS Code:</h3>
464 <pre><code>background-color: silver;
465 background-size: 58px 58px;
466 background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
467 background-image: -webkit-linear-gradient(115deg, #b00 23px, transparent 23px),
468 -webkit-linear-gradient(295deg, #d00 23px, transparent 23px),
469 -webkit-linear-gradient(115deg, #b00 23px, transparent 23px),
470 -webkit-linear-gradient(295deg, #d00 23px, transparent 23px);
471 background-image: -moz-linear-gradient(115deg, #b00 23px, transparent 23px),
472 -moz-linear-gradient(295deg, #d00 23px, transparent 23px),
473 -moz-linear-gradient(115deg, #b00 23px, transparent 23px),
474 -moz-linear-gradient(295deg, #d00 23px, transparent 23px);
475 background-image: -ms-linear-gradient(115deg, #b00 23px, transparent 23px),
476 -ms-linear-gradient(295deg, #d00 23px, transparent 23px),
477 -ms-linear-gradient(115deg, #b00 23px, transparent 23px),
478 -ms-linear-gradient(295deg, #d00 23px, transparent 23px);
479 background-image: -o-linear-gradient(115deg, #b00 23px, transparent 23px),
480 -o-linear-gradient(295deg, #d00 23px, transparent 23px),
481 -o-linear-gradient(115deg, #b00 23px, transparent 23px),
482 -o-linear-gradient(295deg, #d00 23px, transparent 23px);
483 background-image: linear-gradient(115deg, #b00 23px, transparent 23px),
484 linear-gradient(295deg, #d00 23px, transparent 23px),
485 linear-gradient(115deg, #b00 23px, transparent 23px),
486 linear-gradient(295deg, #d00 23px, transparent 23px);
487 -pie-background: linear-gradient(115deg, #b00 23px, transparent 23px) 0 2px / 58px,
488 linear-gradient(295deg, #d00 23px, transparent 23px) 4px 35px / 58px,
489 linear-gradient(115deg, #b00 23px, transparent 23px) 29px 31px / 58px,
490 linear-gradient(295deg, #d00 23px, transparent 23px) 34px 6px / 58px,
491 silver;
492 behavior: url(/PIE.htc);</code></pre>
493 </li>
494
495 <li>
496 <h2>Japanese cube</h2>
497 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
498 <h3>CSS Code:</h3>
499 <pre><code>background-color:#556;
500 background-size: 80px 140px;
501 background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
502 background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
503 -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
504 -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
505 -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
506 -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
507 -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
508 background-image: -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
509 -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
510 -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
511 -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
512 -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
513 -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
514 background-image: -ms-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
515 -ms-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
516 -ms-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
517 -ms-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
518 -ms-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
519 -ms-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
520 background-image: -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
521 -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
522 -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
523 -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
524 -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
525 -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
526 background-image: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
527 linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
528 linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
529 linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
530 linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
531 linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
532 -pie-background: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px,
533 linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px,
534 linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px,
535 linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px,
536 linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 0 0 / 80px 140px,
537 linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 40px 70px / 80px 140px,
538 #556;
539 behavior: url(/PIE.htc);</code></pre>
540 </li>
541
542 <li>
543 <h2>Lined paper</h2>
544 <p>Created by <a href="http://www.jadu.net">Sarah Backhouse</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
545 <h3>CSS Code:</h3>
546 <pre><code>background-color: #fff;
547 background-size: 100% 1.2em;
548 background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
549 -webkit-linear-gradient(#eee .05em, transparent .05em);
550 background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
551 -moz-linear-gradient(#eee .05em, transparent .05em);
552 background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
553 -ms-linear-gradient(#eee .05em, transparent .05em);
554 background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
555 -o-linear-gradient(#eee .05em, transparent .05em);
556 background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
557 linear-gradient(#eee .05em, transparent .05em);
558 -pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em,
559 linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
560 behavior: url(/PIE.htc);</code></pre>
561 </li>
562
563 <li>
564 <h2>Blueprint grid</h2>
565 <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
566 <h3>CSS Code:</h3>
567 <pre><code>background-color: #269;
568 background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
569 background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
570 background-image: -webkit-linear-gradient(white 2px, transparent 2px),
571 -webkit-linear-gradient(0, white 2px, transparent 2px),
572 -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
573 -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
574 background-image: -moz-linear-gradient(white 2px, transparent 2px),
575 -moz-linear-gradient(0, white 2px, transparent 2px),
576 -moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
577 -moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
578 background-image: -ms-linear-gradient(white 2px, transparent 2px),
579 -ms-linear-gradient(0, white 2px, transparent 2px),
580 -ms-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
581 -ms-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
582 background-image: -o-linear-gradient(white 2px, transparent 2px),
583 -o-linear-gradient(0, white 2px, transparent 2px),
584 -o-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
585 -o-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
586 background-image: linear-gradient(white 2px, transparent 2px),
587 linear-gradient(0, white 2px, transparent 2px),
588 linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
589 linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
590 -pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
591 linear-gradient(0, white 2px, transparent 2px) -2px -2px / 100px,
592 linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
593 linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
594 #269;
595 behavior: url(/PIE.htc);</code></pre>
596 </li>
597
598 <li>
599 <h2>Cicada stripes</h2>
600 <p>Created by <a href="http://forthedeveloper.com/">Randy Merrill</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
601 <h3>CSS Code:</h3>
602 <pre><code>background-color: #026873;
603 background-size: 13px, 29px, 37px, 53px;
604 background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
605 -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
606 -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
607 -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
608 background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
609 -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
610 -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
611 -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
612 background-image: -ms-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
613 -ms-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
614 -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
615 -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
616 background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
617 -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
618 -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
619 -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
620 background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
621 linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
622 linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
623 linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
624 -pie-background: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%) 0 0 / 13px,
625 linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%) 0 0 / 29px,
626 linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%) 0 0 / 37px,
627 linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%) 0 0 / 53px,
628 #026873;
629 behavior: url(/PIE.htc);</code></pre>
630 </li>
631
632 <!-- End patterns from http://leaverou.me/css3patterns/ -->
633 </ul>
634
635 <!-- noformat off -->
636
637 <script>
638 $(function() {
639 $('#patternGallery>li').each(function() {
640 $('<div class="demo" style="' + $('code', this).text() + '"/>').prependTo(this);
641 });
642 });
643 </script>
644
645 </body>
646 </html>
647
Something went wrong with that request. Please try again.