1/** 2 Copyright (c) 2011 Lea Verou, http://lea.verou.me/ 3 4 Permission is hereby granted, free of charge, to any person obtaining 5 a copy of this software and associated documentation files (the 6 "Software"), to deal in the Software without restriction, including 7 without limitation the rights to use, copy, modify, merge, publish, 8 distribute, sublicense, and/or sell copies of the Software, and to 9 permit persons to whom the Software is furnished to do so, subject to 10 the following conditions: 11 12 The above copyright notice and this permission notice shall be 13 included in all copies or substantial portions of the Software. 14 15 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 16 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 18 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 19 LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 20 OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 21 WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 22 */ 23 24/** 25 This backgrounds were taken from Lea Verou's "CSS3 Patterns Gallery". 26 See the website at "http://lea.verou.me/css3patterns/" or the github 27 repository at "https://github.com/LeaVerou/css3patterns". 28 */ 29 30/* Title "Weave", author "Jeroen Franse", URL "http://twitter.com/jroenf" */ 31.weave { 32 background: 33 linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), 34 linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px; 35 background-color:#708090; 36 background-size: 64px 128px; 37} 38 39/* Title "Upholstery", author "Nate Eagle", URL "http://nateeagle.com/" */ 40.upholstery { 41 background: 42 radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, 43 radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, 44 radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, 45 radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, 46 radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, 47 radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, 48 radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, 49 radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, 50 linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, 51 linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; 52 background-color: #300; 53 background-size: 100px 100px; 54} 55 56/* Title "Bricks", author "Tab Atkins Jr", URL "http://www.xanthir.com/blog/" */ 57.bricks { 58 background-color: silver; 59 background-image: linear-gradient(335deg, #b00 23px, transparent 23px), 60 linear-gradient(155deg, #d00 23px, transparent 23px), 61 linear-gradient(335deg, #b00 23px, transparent 23px), 62 linear-gradient(155deg, #d00 23px, transparent 23px); 63 background-size: 58px 58px; 64 background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; 65} 66 67/* Title "Diagonal stripes", author "Lea Verou", URL "http://lea.verou.me/css3patterns/" */ 68.diagonal_stripes { 69 background-color: gray; 70 background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px); 71} 72 73/* Title "Tablecloth", author "Lea Verou", URL "http://lea.verou.me/css3patterns/" */ 74.tablecloth { 75 background-color: white; 76 background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), 77 linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); 78 background-size:50px 50px; 79} 80 81/* Title "Waves", author "Lea Verou", URL "http://lea.verou.me/css3patterns/" */ 82.waves { 83 background: 84 radial-gradient(circle at 100% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent), 85 radial-gradient(circle at 0% 50%, transparent 20%, rgba(255,255,255,.3) 21%, rgba(255,255,255,.3) 34%, transparent 35%, transparent) 0 -50px; 86 background-color: slategray; 87 background-size:75px 100px; 88} 89 90/* Title "Lined paper", author "Sarah Backhouse", URL "http://www.jadu.net" */ 91.lined_paper { 92 background-color: #fff; 93 background-image: 94 linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 95 linear-gradient(#eee .1em, transparent .1em); 96 background-size: 100% 1.2em; 97} 98 99/* Title "Blueprint grid", author "Lea Verou", URL "http://lea.verou.me/css3patterns/" */ 100.blueprint_grid { 101 background-color:#269; 102 background-image: linear-gradient(white 2px, transparent 2px), 103 linear-gradient(90deg, white 2px, transparent 2px), 104 linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), 105 linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); 106 background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; 107 background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px; 108} 109 110/* Title "Cicada stripes", author "Randy Merrill", URL "http://forthedeveloper.com/" */ 111.cicada_stripes { 112 background-color: #026873; 113 background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), 114 linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), 115 linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), 116 linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); 117 background-size: 13px, 29px, 37px, 53px; 118} 119 120/* Title "HoneyComb", author "Paul Salentiny" */ 121.honey_comb { 122 background: 123 radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, 124 radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px, 125 linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, 126 linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, 127 linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0, 128 linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1; 129 background-size: 40px 60px; 130} 131 132/* Title "Cross-Dots", author "Natali Davydova" */ 133.cross_dots { 134 background: 135 radial-gradient(black 3px, transparent 4px), 136 radial-gradient(black 3px, transparent 4px), 137 linear-gradient(#fff 4px, transparent 0), 138 linear-gradient(45deg, transparent 74px, transparent 75px, #a4a4a4 75px, #a4a4a4 76px, transparent 77px, transparent 109px), 139 linear-gradient(-45deg, transparent 75px, transparent 76px, #a4a4a4 76px, #a4a4a4 77px, transparent 78px, transparent 109px), 140 #fff; 141 background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px; 142 background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px; 143} 144 145/* Title "Cross", author "Lea Verou", URL "http://lea.verou.me/css3patterns/" */ 146.cross { 147 background: 148 radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), 149 radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px, 150 linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px, 151 linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0; 152 background-color: slategray; 153 background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px; 154} 155 156/* Title "Tartan", author "Marta Armada", URL "http://swwweet.com" */ 157.tartan { 158 background-color: hsl(2, 57%, 40%); 159 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), 160 repeating-linear-gradient(270deg, 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), 161 repeating-linear-gradient(125deg, 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); 162} 163 164/* Title "Cross", author "Lea Verou", URL "http://lea.verou.me/css3patterns/" */ 165.japanese_cube { 166 background-color:#556; 167 background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 168 linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 169 linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 170 linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), 171 linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 172 linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); 173 background-size:80px 140px; 174 background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; 175} 176