Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

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 browse...
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 browse...
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 browse...
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 browse...
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 browse...
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 browse...
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.