Skip to content

HTTPS clone URL

Subversion checkout URL

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