Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 308 lines (273 sloc) 20.993 kb
ee42724 Initial import
Lea Verou authored
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>CSS3 Patterns Gallery</title>
6 <link href="style.css" rel="stylesheet" />
7 </head>
8 <body>
9 <h1>CSS3 Patterns Gallery</h1>
10 <div id="social">
11 <div class="topsy_widget_data"><!--
12 {
13 "url": "http://leaverou.me/css3patterns/",
14 "title": "CSS3 Patterns Gallery",
15 "nick": "LeaVerou"
16 }
17 --></div>
18 <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fleaverou.me%2Fcss3patterns%2F&amp;send=true&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
19 </div>
20 <ul id="help">
21 <li>Click on a pattern to expand</li>
22 <li>Textareas are editable</li>
23 <li><a href="#browser-support">Browser support</a></li>
24 <li><a href="#new-submissions">Submit a new one</a></li>
25 <li><a href="https://github.com/LeaVerou/CSS3-Patterns-Gallery">Github repo</a></li>
26 <li>Enjoy!</li>
27 </ul>
28 <ul id="patterns">
0f850f3 New pattern: Starry Night
Lea Verou authored
29 <li style="background-color:black;
30 background-image:
31 radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
32 radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
33 radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
34 radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
35 background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
36 background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;" title="Starry night"></li>
37
ee42724 Initial import
Lea Verou authored
38 <li style="background-color:white;
39 background-image:
40 radial-gradient(midnightblue 9px, transparent 10px),
41 repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);
42 background-size: 30px 30px, 90px 90px;
43 background-position: 0 0;" title="Marrakesh" data-author="Divya Manian" data-author-url="http://nimbupani.com"></li>
44
45 <li style="background:
46 radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,
47 radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0,
48 radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px,
49 radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px,
50 radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px,
51 radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0,
52 linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
53 background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%;
54 background-color: #840b2a;"
f57e460 @MoOx author url fixed for the Rainbow bokey pattern (https://twitter.com/l…
MoOx authored
55 title="Rainbow bokeh" data-author="Auke Zwart" data-author-url="http://twitter.com/okke29"></li>
ee42724 Initial import
Lea Verou authored
56
57 <li style="background:
58 linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
59 linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
60 linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
61 linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
62 linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
63 linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
64 background-color: #131313;
65 background-size: 20px 20px;" title="Carbon" data-author="Atle Mo (design), Sébastien Grosjean (code)" data-author-url="http://www.zencocoon.com/"></li>
66
67 <li style="background:
68 radial-gradient(black 15%, transparent 16%) 0 0,
69 radial-gradient(black 15%, transparent 16%) 8px 8px,
70 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
71 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
72 background-color:#282828;
73 background-size:16px 16px;" title="Carbon fibre" data-author="Atle Mo (design), Lea Verou (code)" data-author-url="http://subtlepatterns.com/#post-22"></li>
74
75 <li style="background:
76 radial-gradient(60% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%),
77 radial-gradient(40% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%),
78 radial-gradient(40% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%),
79 radial-gradient(60% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%),
80 radial-gradient(50% 35%, closest-side circle, #d35 30%, rgba(221,51,85,0) 31%),
81
82 radial-gradient(60% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
83 radial-gradient(40% 43%, closest-side circle, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px,
84 radial-gradient(40% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
85 radial-gradient(60% 22%, closest-side circle, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px,
86 radial-gradient(50% 35%, closest-side circle, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px;
87 background-color:#b03;
88 background-size:100px 100px;" title="Hearts"></li>
89
90 <li style="background-color: #6d695c;
91 background-image:
92 repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
93 repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
94 linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
95 linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
96 background-size: 70px 120px;" title="Argyle" data-author="Anna Kassner" data-author-url="http://annamation.ca/"></li>
97
98 <li style="background-color: #FF7D9D;
99 background-size: 58px 58px;
100 background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
101 0px 36px, 4px 2px, 29px 6px, 33px 30px;
102 background-image:
103 linear-gradient(115deg, #C90032 23px, transparent 23px),
104 linear-gradient(295deg, #C90032 23px, transparent 23px),
105 linear-gradient(115deg, #C90032 23px, transparent 23px),
106 linear-gradient(295deg, #C90032 23px, transparent 23px),
107
108 linear-gradient(115deg, #C90032 10px, transparent 10px),
109 linear-gradient(295deg, #C90032 10px, transparent 10px),
110 linear-gradient(115deg, #C90032 10px, transparent 10px),
111 linear-gradient(295deg, #C90032 10px, transparent 10px);"
112 title="Steps" data-author="Nicolas Gallagher" data-author-url="http://nicolasgallagher.com/"></li>
113
114 <li style="background:
115 radial-gradient(100% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent),
116 radial-gradient(0% 50%, circle, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px;
117 background-color: slategray;
118 background-size:75px 100px;" title="Waves"></li>
119
120 <li style="background:
121 radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
122 radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
123 linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
124 linear-gradient(0, #A8B1BB 8px, transparent 8px) -4px 0;
125 background-color: slategray;
126 background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;" title="Cross"></li>
127 <li style="background:
128 radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,
129 radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,
130 radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,
131 radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,
132 radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%),
133 radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%),
134 radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,
135 radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;
136 background-color:#63773F;
137 background-size:100px 100px;" title="Yin Yang"></li>
138
139 <li style="background:
140 linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
141 linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
142 linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
143 linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
144 linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
145 linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
146
147 linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
148 linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
149 linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
150 linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
151 linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
152 linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
153 background-color: #232927;
154 background-size: 100px 100px;"
155 title="Stars" data-author="Nicolas Gallagher" data-author-url="http://nicolasgallagher.com/"></li>
156
157 <li style="background-image:
158 radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%),
159 radial-gradient(closest-side, transparent 0%, transparent 75%, #B6CC66 76%, #B6CC66 85%, #EDFFDB 86%, #EDFFDB 94%, #FFFFFF 95%, #FFFFFF 103%, #D9E6A7 104%, #D9E6A7 112%, #798B3C 113%, #798B3C 121%, #FFFFFF 122%, #FFFFFF 130%, #E0EAD7 131%, #E0EAD7 140%);
160 background-size: 110px 110px;
161 background-color: #C8D3A7;
162 background-position: 0 0, 55px 55px;" title="Brady Bunch" data-author="Estelle Weyl" data-author-url="http://www.standardista.com"></li>
163
164 <li style="background-color:#def;
165 background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
166 radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
167 background-size:80px 80px;
168 background-position:0 0, 40px 40px;" title="Shippo"></li>
169
170 <li style="background-color: silver;
171 background-image: linear-gradient(115deg, #b00 23px, transparent 23px),
172 linear-gradient(295deg, #d00 23px, transparent 23px),
173 linear-gradient(115deg, #b00 23px, transparent 23px),
174 linear-gradient(295deg, #d00 23px, transparent 23px);
175 background-size: 58px 58px;
176 background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;"
177 title="Bricks" data-author="Tab Atkins Jr" data-author-url="http://www.xanthir.com/blog/"></li>
178
179 <li style="background-color:silver;
180 background-image:
181 radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
182 radial-gradient(0 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
183 radial-gradient(50% 100%, circle, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
184 radial-gradient(100% 50%, circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
185 radial-gradient(0 50%, circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
186 background-size:100px 50px;" title="Seigaiha"></li>
187
188 <li style="background-color:#556;
189 background-image: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
190 linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
191 linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
192 linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
193 linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
194 linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
195 background-size:80px 140px;
196 background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;" title="Japanese cube"></li>
197
198 <li style="background-color:#001;
199 background-image: radial-gradient(white 15%, transparent 16%),
200 radial-gradient(white 15%, transparent 16%);
201 background-size:60px 60px;
202 background-position: 0 0, 30px 30px;" title="Polka dot"></li>
203
204 <li style="background-color: #eee;
205 background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
206 linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
207 background-size:60px 60px;
208 background-position:0 0, 30px 30px" title="Checkerboard"></li>
209
210 <li style="background-color: #eee;
211 background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
212 linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
213 background-size:60px 60px;" title="Diagonal checkerboard"></li>
214
215 <li style="background-color: hsl(2, 57%, 40%);
216 background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
217 repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
218 repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);"
219 title="Tartan" data-author="Marta Armada" data-author-url="http://swwweet.com"></li>
220
221 <li style="background-color: hsl(34, 53%, 82%);
222 background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
223 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
224 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
225 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
226 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
227 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
228 ),
229 repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
230 hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
231 hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
232 hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
233 hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
234 hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
235 );" title="Madras" data-author="Divya Manian" data-author-url="http://nimbupani.com"></li>
236
237 <li style="background-color: #fff;
238 background-image:
239 linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
240 linear-gradient(#eee .05em, transparent .05em);
d9c4248 Added Sarah Backhouse’s URL
Lea Verou authored
241 background-size: 100% 1.2em;" title="Lined paper" data-author="Sarah Backhouse" data-author-url="http://www.jadu.net"></li>
ee42724 Initial import
Lea Verou authored
242
243 <li style="background-color:#269;
244 background-image: linear-gradient(white 2px, transparent 2px),
245 linear-gradient(0, white 2px, transparent 2px),
246 linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
247 linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
248 background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
249 background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px" title="Blueprint grid"></li>
250
251 <li style="background-color:white;
252 background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%),
253 linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
254 background-size:50px 50px;" title="Tablecloth"></li>
255
256 <li style="background-color: gray;
257 background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);" title="Diagonal stripes"></li>
258
259 <li style="background-color: #026873;
260 background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
261 linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
262 linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
263 linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
264 background-size: 13px, 29px, 37px, 53px;" title="Cicada stripes" data-author="Randy Merrill" data-author-url="http://forthedeveloper.com/"></li>
265
266 <li style="background-color: gray;
267 background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%);
268 background-size: 50px;" title="Vertical stripes"></li>
269
270 <li style="background-color: gray;
271 background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
272 background-size: 50px;" title="Horizontal stripes"></li>
273 </ul>
274
275 <h2 id="browser-support">Browser support</h2>
276 <p>The patterns themselves should work on <strong>Firefox 3.6+</strong>, <strong>Chrome</strong>, <strong>Safari 5.1</strong>, <strong>Opera 11.10+</strong> and <strong>IE10+</strong>.
277 However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Opera doesn’t support radial gradients and Gecko is quite buggy with them).</p>
278 <p>Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation.</p>
279
280 <h2 id="new-submissions">Submission guidelines</h2>
281 <p>If you have a new pattern to submit, drop me a line at me @ this domain. However, please bear in mind that I can't accept all submissions, sorry for that. For a pattern to be accepted, the following factors are considered (in descending order of importance):</p>
282 <ul>
283 <li>Does it present a new technique?</li>
284 <li>Is the number of gradients and color stops worth the effect? The whole point of those patterns is to make page loading faster by reducing file size and HTTP requests without the unreadable gibberish that data URIs add in our stylesheets. If your pattern needs a 2KB code for example (which becomes 10KB when used in production, due to all the prefixes), then it's not very useful, except serving as a proof of concept.</li>
285 <li>How common is the pattern?</li>
286 <li>Very aesthetically pleasing patterns might be accepted, even if they don't satisfy the above criteria, since they are useful for authors.</li>
287 </ul>
288
289 <p id="footer">
290 By <a href="http://leaverou.me">Lea Verou</a>
291 &bull; If no other author is mentioned, the pattern is created by <a href="http://leaverou.me">Lea Verou</a>
292 </p>
293
294 <script src="//leaverou.me/csss/plugins/css-snippets.js"></script>
295 <script src="//raw.github.com/LeaVerou/Incrementable/master/incrementable.js"></script>
296 <script src="//bytesizematters.com/bytesize.js"></script>
297 <script src="css3patterns.js"></script>
298
299 <script src="http://www.google-analytics.com/ga.js"></script>
300 <script>
301 try {
302 var pageTracker = _gat._getTracker("UA-597483-5");
303 pageTracker._trackPageview();
304 } catch(err) {}
305 </script>
306 <script src="http://cdn.topsy.com/topsy.js?init=topsyWidgetCreator"></script>
307 </body>
308 </html>
Something went wrong with that request. Please try again.