├── .gitignore ├── LICENSE ├── README.md ├── elastic.css ├── elastic.scss └── parts ├── animations ├── _001.scss ├── _002.scss ├── _003.scss ├── _004.scss ├── _005.scss ├── _006.scss ├── _007.scss ├── _008.scss ├── _009.scss ├── _010.scss ├── _011.scss ├── _012.scss ├── _013.scss ├── _014.scss ├── _015.scss └── _016.scss └── patterns ├── _001.scss ├── _002.scss ├── _003.scss ├── _004.scss ├── _005.scss ├── _006.scss ├── _007.scss ├── _008.scss ├── _009.scss ├── _010.scss ├── _011.scss ├── _012.scss ├── _013.scss ├── _014.scss ├── _015.scss ├── _016.scss ├── _017.scss ├── _018.scss ├── _019.scss ├── _020.scss ├── _021.scss ├── _022.scss ├── _023.scss ├── _024.scss ├── _025.scss ├── _026.scss ├── _027.scss ├── _028.scss ├── _029.scss ├── _030.scss ├── _031.scss ├── _032.scss ├── _033.scss ├── _034.scss ├── _035.scss ├── _036.scss ├── _037.scss ├── _038.scss ├── _039.scss ├── _040.scss ├── _041.scss ├── _042.scss ├── _043.scss ├── _044.scss ├── _045.scss └── _046.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | sitemap.xml 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Sota Ohara 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Elastic CSS 2 | 3 | *A collection of CSS background image* 4 | 5 | [View demo »](http://www.sottar.net/elastic/) 6 | 7 | ## How to use 8 | Download the stylesheet [`elastic.css`](https://github.com/sottar/elastic/blob/master/elastic.css), add it to your project folder structure, then call it in the `` section of your document. 9 | 10 | ``` 11 | html 12 | 13 | 14 | 15 | ``` 16 | 17 | or you can also compile any of the individual classes, from the `parts` list folder with the SCSS versions. 18 | 19 | ## Browsers 20 | Some of the background-image use linear-gradient, support for which is limited in [some browsers](http://caniuse.com/#search=linear-gradient). 21 | 22 | ## License 23 | see [LICENSE file](https://github.com/sottar/elastic/blob/master/LICENSE) 24 | -------------------------------------------------------------------------------- /elastic.css: -------------------------------------------------------------------------------- 1 | /* 001 */ 2 | .elastic_001 { 3 | background-color: #e6e6e6; 4 | background-image: -webkit-linear-gradient(135deg, transparent, rgba(0, 0, 0, 0.05)); 5 | background-image: linear-gradient(-45deg, transparent, rgba(0, 0, 0, 0.05)); 6 | background-size: 80px 80px; } 7 | 8 | /* 002 */ 9 | .elastic_002 { 10 | background-color: rgba(230, 230, 230, 0.5); 11 | background-image: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.8), #000); 12 | background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8), #000); 13 | background-size: 10px 10px; } 14 | 15 | /* 003 */ 16 | .elastic_003 { 17 | background-color: rgba(230, 230, 230, 0.01); 18 | background-image: -webkit-radial-gradient(30% 25%, rgba(0, 0, 0, 0.1) 0%, transparent 100%), -webkit-radial-gradient(30% 75%, rgba(0, 0, 0, 0.1) 0%, transparent 100%), -webkit-radial-gradient(25% 30%, rgba(0, 0, 0, 0.1) 0%, transparent 100%), -webkit-radial-gradient(75% 28%, rgba(0, 0, 0, 0.1) 0%, transparent 100%); 19 | background-image: radial-gradient(30% 25%, rgba(0, 0, 0, 0.1) 0%, transparent 100%), radial-gradient(30% 75%, rgba(0, 0, 0, 0.1) 0%, transparent 100%), radial-gradient(25% 30%, rgba(0, 0, 0, 0.1) 0%, transparent 100%), radial-gradient(75% 28%, rgba(0, 0, 0, 0.1) 0%, transparent 100%); 20 | background-size: 10px 10px; } 21 | 22 | /* 004 */ 23 | .elastic_004 { 24 | background-color: #e6e6e6; 25 | background-image: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), -webkit-repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%), -webkit-linear-gradient(top, #c7c7c7 0%, #e6e6e6 47%, #c7c7c7 53%, #b3b3b3 100%); 26 | background-image: repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%), linear-gradient(180deg, #c7c7c7 0%, #e6e6e6 47%, #c7c7c7 53%, #b3b3b3 100%); 27 | background-size: 10px 10px; } 28 | 29 | /* 005 */ 30 | .elastic_005 { 31 | background-color: #b2dae7; 32 | background-image: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), -webkit-repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 33 | background-image: repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 34 | background-size: 500px 500px; } 35 | 36 | /* 006 */ 37 | .elastic_006 { 38 | background-color: rgba(42, 40, 40, 0.24); 39 | background-image: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), -webkit-repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 40 | background-image: repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 41 | background-size: 5000px 500px; } 42 | 43 | /* 007 */ 44 | .elastic_007 { 45 | background-color: rgba(230, 230, 230, 0.5); 46 | background-image: -webkit-linear-gradient(45deg, transparent, rgba(0, 0, 0, 0.05)); 47 | background-image: linear-gradient(45deg, transparent, rgba(0, 0, 0, 0.05)); 48 | background-size: 10px 10px; } 49 | 50 | /* 008 */ 51 | .elastic_008 { 52 | background: -webkit-radial-gradient(left top, ellipse farthest-side, #f0f0f0, #999 100px, #777); 53 | background: radial-gradient(left top, ellipse farthest-side, #f0f0f0, #999 100px, #777); 54 | background-size: 30px 30px; } 55 | 56 | /* 009 */ 57 | .elastic_009 { 58 | background-color: rgba(228, 115, 81, 0.24); 59 | background-image: -webkit-repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), -webkit-repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 60 | background-image: repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(top, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 61 | background-size: 1px 500px; } 62 | 63 | /* 010 */ 64 | .elastic_010 { 65 | background-image: -webkit-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); 66 | background-image: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); 67 | background-size: 5px 5px; } 68 | 69 | /* 011 */ 70 | .elastic_011 { 71 | background-image: -webkit-repeating-linear-gradient(135deg, #c9c9fc, #c9c9fc 5px, white 5px, white 10px); 72 | background-image: repeating-linear-gradient(-45deg, #c9c9fc, #c9c9fc 5px, white 5px, white 10px); } 73 | 74 | /* 012 */ 75 | .elastic_012 { 76 | background-image: -webkit-repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(138, 138, 138, 0.1) 7.5%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.13) 4.5%), -webkit-repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(138, 138, 138, 0) 1.2%, rgba(138, 138, 138, 0.15) 2.2%); 77 | background-image: repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(138, 138, 138, 0.1) 7.5%), repeating-linear-gradient(top, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.13) 4.5%), repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(138, 138, 138, 0) 1.2%, rgba(138, 138, 138, 0.15) 2.2%); 78 | background-size: 1px 2000px; } 79 | 80 | /* 013 */ 81 | .elastic_013 { 82 | background-color: #fff; 83 | background-image: -webkit-repeating-linear-gradient(left, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), -webkit-repeating-linear-gradient(bottom, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) -63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), -webkit-repeating-linear-gradient(135deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), -webkit-repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); 84 | background-image: repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) -63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); } 85 | 86 | /* 014 */ 87 | .elastic_014 { 88 | background-color: #fff; 89 | background-image: -webkit-linear-gradient(45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6), -webkit-linear-gradient(45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6); 90 | background-image: linear-gradient(45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6), linear-gradient(45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6); 91 | background-position: 0 0, 25px 25px; 92 | background-size: 50px 50px; } 93 | 94 | /* 015 */ 95 | .elastic_015 { 96 | background-color: #555; 97 | background-image: -webkit-linear-gradient(60deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), -webkit-linear-gradient(300deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), -webkit-linear-gradient(60deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), -webkit-linear-gradient(300deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), -webkit-linear-gradient(30deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888), -webkit-linear-gradient(30deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888); 98 | background-image: linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888), linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888); 99 | background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px; 100 | background-size: 50px 100px; } 101 | 102 | /* 016 */ 103 | .elastic_016 { 104 | background-color: #fff; 105 | background-image: -webkit-linear-gradient(135deg, rgba(0, 0, 0, 0.5) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 75%, transparent 75%, transparent 100%), -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.5) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 75%, transparent 75%, transparent 100%); 106 | background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.5) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 75%, transparent 75%, transparent 100%), linear-gradient(45deg, rgba(0, 0, 0, 0.5) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 75%, transparent 75%, transparent 100%); 107 | background-size: 52px 52px; } 108 | 109 | /* 017 */ 110 | .elastic_017 { 111 | background-color: #f6f6f6; 112 | background-image: -webkit-radial-gradient(#444 20%, transparent 0), -webkit-radial-gradient(#444 20%, transparent 0); 113 | background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0); 114 | background-position: 0 0, 10px 10px; 115 | background-size: 20px 20px; } 116 | 117 | /* 018 */ 118 | .elastic_018 { 119 | background: -webkit-linear-gradient(335deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 0 0, -webkit-linear-gradient(205deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 0 0, -webkit-linear-gradient(335deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 7px -15px, -webkit-linear-gradient(205deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 7px -15px; 120 | background: linear-gradient(115deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 0 0, linear-gradient(245deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 0 0, linear-gradient(115deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 7px -15px, linear-gradient(245deg, transparent 75%, rgba(255, 255, 255, 0.8) 75%) 7px -15px; 121 | background-color: #36c; 122 | background-size: 15px 30px; } 123 | 124 | /* 019 */ 125 | .elastic_019 { 126 | background: -webkit-radial-gradient(#8a0000 4%, #5c0000 9%, rgba(102, 0, 0, 0) 9%) 0 0, -webkit-radial-gradient(#8a0000 4%, #5c0000 8%, rgba(102, 0, 0, 0) 10%) 50px 50px, -webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)) 50px 0, -webkit-radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)) 0 50px, -webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%) 50px 0, -webkit-radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%) 100px 50px, -webkit-radial-gradient(rgba(77, 0, 0, 0.7), rgba(102, 0, 0, 0)) 0 0, -webkit-radial-gradient(rgba(77, 0, 0, 0.7), rgba(102, 0, 0, 0)) 50px 50px, -webkit-linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, black 50%, rgba(102, 0, 0, 0) 70%) 0 0, -webkit-linear-gradient(135deg, rgba(102, 0, 0, 0) 49%, black 50%, rgba(102, 0, 0, 0) 70%) 0 0; 127 | background: radial-gradient(#8a0000 4%, #5c0000 9%, rgba(102, 0, 0, 0) 9%) 0 0, radial-gradient(#8a0000 4%, #5c0000 8%, rgba(102, 0, 0, 0) 10%) 50px 50px, radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)) 50px 0, radial-gradient(rgba(153, 0, 0, 0.8) 20%, rgba(102, 0, 0, 0)) 0 50px, radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%) 50px 0, radial-gradient(#660000 35%, rgba(102, 0, 0, 0) 60%) 100px 50px, radial-gradient(rgba(77, 0, 0, 0.7), rgba(102, 0, 0, 0)) 0 0, radial-gradient(rgba(77, 0, 0, 0.7), rgba(102, 0, 0, 0)) 50px 50px, linear-gradient(45deg, rgba(102, 0, 0, 0) 49%, black 50%, rgba(102, 0, 0, 0) 70%) 0 0, linear-gradient(-45deg, rgba(102, 0, 0, 0) 49%, black 50%, rgba(102, 0, 0, 0) 70%) 0 0; 128 | background-color: #300; 129 | background-size: 100px 100px; } 130 | 131 | /* 020 */ 132 | .elastic_020 { 133 | background: -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0, -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); 134 | background: radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); 135 | background-color: #840b2a; 136 | background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; } 137 | 138 | /* 021 */ 139 | .elastic_021 { 140 | background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, -webkit-linear-gradient(left, #1b1b1b 10px, transparent 10px), -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 141 | background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 142 | background-color: #131313; 143 | background-size: 20px 20px; } 144 | 145 | /* 022 */ 146 | .elastic_022 { 147 | background: -webkit-radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), -webkit-radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); 148 | background: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); 149 | background-color: #000; 150 | background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 151 | background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; } 152 | 153 | /* 023 */ 154 | .elastic_023 { 155 | background: -webkit-radial-gradient(black 15%, transparent 16%) 0 0, -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px, -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px; 156 | background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px; 157 | background-color: #282828; 158 | background-size: 16px 16px; } 159 | 160 | /* 024 */ 161 | .elastic_024 { 162 | background-color: #6d695c; 163 | background-image: -webkit-repeating-linear-gradient(330deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 60px), -webkit-repeating-linear-gradient(30deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 60px), -webkit-linear-gradient(30deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), -webkit-linear-gradient(330deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); 164 | background-image: repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)), linear-gradient(120deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.1) 75%, rgba(0, 0, 0, 0.1)); 165 | background-size: 70px 120px; } 166 | 167 | /* 025 */ 168 | .elastic_025 { 169 | background-color: #a0302c; 170 | background-image: -webkit-repeating-linear-gradient(transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), -webkit-repeating-linear-gradient(right, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), -webkit-repeating-linear-gradient(325deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px); 171 | background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0, 0, 0, 0.4) 50px, rgba(0, 0, 0, 0.4) 53px, transparent 53px, transparent 63px, rgba(0, 0, 0, 0.4) 63px, rgba(0, 0, 0, 0.4) 66px, transparent 66px, transparent 116px, rgba(0, 0, 0, 0.5) 116px, rgba(0, 0, 0, 0.5) 166px, rgba(255, 255, 255, 0.2) 166px, rgba(255, 255, 255, 0.2) 169px, rgba(0, 0, 0, 0.5) 169px, rgba(0, 0, 0, 0.5) 179px, rgba(255, 255, 255, 0.2) 179px, rgba(255, 255, 255, 0.2) 182px, rgba(0, 0, 0, 0.5) 182px, rgba(0, 0, 0, 0.5) 232px, transparent 232px), repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0, 0, 0, 0.2) 2px, rgba(0, 0, 0, 0.2) 3px, transparent 3px, transparent 5px, rgba(0, 0, 0, 0.2) 5px); } 172 | 173 | /* 026 */ 174 | .elastic_026 { 175 | background: -webkit-linear-gradient(135deg, #f6f6f6 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc) 0 0, -webkit-linear-gradient(135deg, #ccc 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6) 1em 1em, -webkit-linear-gradient(45deg, #ccc 17%, transparent 17%, transparent 25%, #ccc 25%, #ccc 36%, transparent 36%, transparent 64%, #ccc 64%, #ccc 75%, transparent 75%, transparent 83%, #ccc 83%) 1em 1em; 176 | background: linear-gradient(-45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc) 0 0, linear-gradient(-45deg, #ccc 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6) 1em 1em, linear-gradient(45deg, #ccc 17%, transparent 17%, transparent 25%, #ccc 25%, #ccc 36%, transparent 36%, transparent 64%, #ccc 64%, #ccc 75%, transparent 75%, transparent 83%, #ccc 83%) 1em 1em; 177 | background-color: #f6f6f6; 178 | background-size: 2em 2em; } 179 | 180 | /* 027 */ 181 | .elastic_027 { 182 | background-color: #e9d4b9; 183 | background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), -webkit-repeating-linear-gradient(315deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); 184 | background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 120px, rgba(11, 36, 45, 0.5) 120px, rgba(11, 36, 45, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, rgba(11, 36, 45, 0.5) 5px, rgba(11, 36, 45, 0.5) 10px, rgba(211, 119, 111, 0) 10px, rgba(211, 119, 111, 0) 35px, rgba(211, 119, 111, 0.5) 35px, rgba(211, 119, 111, 0.5) 40px, rgba(11, 36, 45, 0.5) 40px, rgba(11, 36, 45, 0.5) 50px, rgba(11, 36, 45, 0) 50px, rgba(11, 36, 45, 0) 60px, rgba(211, 119, 111, 0.5) 60px, rgba(211, 119, 111, 0.5) 70px, rgba(247, 179, 85, 0.5) 70px, rgba(247, 179, 85, 0.5) 80px, rgba(247, 179, 85, 0) 80px, rgba(247, 179, 85, 0) 90px, rgba(211, 119, 111, 0.5) 90px, rgba(211, 119, 111, 0.5) 110px, rgba(211, 119, 111, 0) 110px, rgba(211, 119, 111, 0) 140px, rgba(11, 36, 45, 0.5) 140px, rgba(11, 36, 45, 0.5) 160px); } 185 | 186 | /* 028 */ 187 | .elastic_028 { 188 | background-color: #f6f6f6; 189 | background-image: -webkit-linear-gradient(left, rgba(200, 0, 0, 0.5) 50%, transparent 50%), -webkit-linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 50%); 190 | background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.5) 50%, transparent 50%), linear-gradient(rgba(200, 0, 0, 0.5) 50%, transparent 50%); 191 | background-size: 50px 50px; } 192 | 193 | /* 029 */ 194 | .elastic_029 { 195 | background-color: #026873; 196 | background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.07) 50%, transparent 50%), -webkit-linear-gradient(left, rgba(255, 255, 255, 0.13) 50%, transparent 50%), -webkit-linear-gradient(left, transparent 50%, rgba(255, 255, 255, 0.17) 50%), -webkit-linear-gradient(left, transparent 50%, rgba(255, 255, 255, 0.19) 50%); 197 | background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 255, 255, 0.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255, 255, 255, 0.19) 50%); 198 | background-size: 13px, 29px, 37px, 53px; } 199 | 200 | /* 030 */ 201 | .elastic_030 { 202 | background-color: #753; 203 | background-image: -webkit-linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0), -webkit-linear-gradient(315deg, transparent 37%, #a85 0, #a85 63%, transparent 0), -webkit-linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0); 204 | background-image: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0), linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0), linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0); 205 | background-size: 25px 25px; } 206 | 207 | /* 031 */ 208 | .elastic_031 { 209 | background-color: #def; 210 | background-image: -webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), -webkit-radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%); 211 | background-image: radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%), radial-gradient(closest-side, transparent 98%, rgba(0, 0, 0, 0.3) 99%); 212 | background-size: 80px 80px; 213 | background-position: 0 0, 40px 40px; } 214 | 215 | /* 032 */ 216 | .elastic_032 { 217 | background: -webkit-linear-gradient(135deg, transparent 75%, #d45d55 0)-10px 0, -webkit-linear-gradient(45deg, transparent 75%, #d45d55 0)-10px 0, -webkit-linear-gradient(315deg, #a7332b 50%, transparent 0) 0 0, -webkit-linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0; 218 | background: linear-gradient(315deg, transparent 75%, #d45d55 0)-10px 0, linear-gradient(45deg, transparent 75%, #d45d55 0)-10px 0, linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0, linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0; 219 | background-color: #561a16; 220 | background-size: 20px 20px; } 221 | 222 | /* 033 */ 223 | .elastic_033 { 224 | background: -webkit-radial-gradient(circle farthest-side at 0% 50%, #fb1 23.5%, rgba(240, 166, 17, 0) 0) 21px 30px, -webkit-radial-gradient(circle farthest-side at 0% 50%, #B71 24%, rgba(240, 166, 17, 0) 0) 19px 30px, -webkit-linear-gradient(#fb1 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #fb1 0) 0 0, -webkit-linear-gradient(300deg, #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, -webkit-linear-gradient(60deg, #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, -webkit-linear-gradient(left, #B71 2%, #fb1 0, #fb1 98%, #B71 0%) 0 0 #fb1; 225 | background: radial-gradient(circle farthest-side at 0% 50%, #fb1 23.5%, rgba(240, 166, 17, 0) 0) 21px 30px, radial-gradient(circle farthest-side at 0% 50%, #B71 24%, rgba(240, 166, 17, 0) 0) 19px 30px, linear-gradient(#fb1 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 85%, #fb1 0) 0 0, 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, 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, linear-gradient(90deg, #B71 2%, #fb1 0, #fb1 98%, #B71 0%) 0 0 #fb1; 226 | background-size: 40px 60px; } 227 | 228 | /* 034 */ 229 | .elastic_034 { 230 | background-color: #c0c0c0; 231 | background-image: -webkit-linear-gradient(115deg, #b00 23px, transparent 23px), -webkit-linear-gradient(295deg, #d00 23px, transparent 23px), -webkit-linear-gradient(115deg, #b00 23px, transparent 23px), -webkit-linear-gradient(295deg, #d00 23px, transparent 23px); 232 | background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); 233 | background-size: 58px 58px; 234 | background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; } 235 | 236 | /* 035 */ 237 | .elastic_035 { 238 | background-color: #f6f6f6; 239 | background-image: -webkit-linear-gradient(#eee 0.1em, transparent 0.1em); 240 | background-image: linear-gradient(#eee 0.1em, transparent 0.1em); 241 | background-size: 100% 1.2em; } 242 | 243 | /* 036 */ 244 | .elastic_036 { 245 | background: -webkit-radial-gradient(0% 50% circle, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, -webkit-radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px); 246 | background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px); 247 | background-color: #8a3; 248 | background-size: 20px 20px; } 249 | 250 | /* 037 */ 251 | .elastic_037 { 252 | background: -webkit-linear-gradient(315deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), -webkit-linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px) 0 64px; 253 | background: linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px) 0 64px; 254 | background-color: #708090; 255 | background-size: 64px 128px; } 256 | 257 | /* 038 */ 258 | .elastic_038 { 259 | background-color: #f6f6f6; 260 | background-image: -webkit-linear-gradient(45deg, rgba(102, 238, 238, 0.5) 25%, transparent 25%, transparent 50%, rgba(102, 238, 238, 0.5) 50%, rgba(102, 238, 238, 0.5) 75%, transparent 75%, transparent), -webkit-linear-gradient(135deg, rgba(102, 238, 238, 0.5) 25%, transparent 25%, transparent 50%, rgba(102, 238, 238, 0.5) 50%, rgba(102, 238, 238, 0.5) 75%, transparent 75%, transparent); 261 | background-image: linear-gradient(45deg, rgba(102, 238, 238, 0.5) 25%, transparent 25%, transparent 50%, rgba(102, 238, 238, 0.5) 50%, rgba(102, 238, 238, 0.5) 75%, transparent 75%, transparent), linear-gradient(-45deg, rgba(102, 238, 238, 0.5) 25%, transparent 25%, transparent 50%, rgba(102, 238, 238, 0.5) 50%, rgba(102, 238, 238, 0.5) 75%, transparent 75%, transparent); 262 | background-size: 30px 30px; } 263 | 264 | /* 039 */ 265 | .elastic_039 { 266 | background-color: #f6f6f6; 267 | background-image: -webkit-linear-gradient(45deg, #000 25%, #000 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(225deg, #000 25%, #000 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(225deg, #f6f6f6 25%, #f6f6f6 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(45deg, #f6f6f6 25%, #f6f6f6 25%, transparent 25%, transparent 100%), -webkit-linear-gradient(45deg, #000 0%, #000 6%, transparent 6%, transparent 11%, #000 11%, #000 17%, transparent 17%, transparent 22%, #000 22%, #000 28%, transparent 28%, transparent 33%, #000 33%, #000 39%, transparent 39%, transparent 44%, #000 44%, #000 50%, transparent 50%, transparent 55%, #000 55%, #000 61%, transparent 61%, transparent 66%, #000 66%, #000 72%, transparent 72%, transparent 77%, #000 77%, #000 83%, transparent 83%, transparent 88%, #000 88%, #000 94%, transparent 94%, transparent 100%); 268 | background-image: linear-gradient(45deg, #000 25%, #000 25%, transparent 25%, transparent 100%), linear-gradient(-135deg, #000 25%, #000 25%, transparent 25%, transparent 100%), linear-gradient(-135deg, #f6f6f6 25%, #f6f6f6 25%, transparent 25%, transparent 100%), linear-gradient(45deg, #f6f6f6 25%, #f6f6f6 25%, transparent 25%, transparent 100%), linear-gradient(45deg, #000 0%, #000 6%, transparent 6%, transparent 11%, #000 11%, #000 17%, transparent 17%, transparent 22%, #000 22%, #000 28%, transparent 28%, transparent 33%, #000 33%, #000 39%, transparent 39%, transparent 44%, #000 44%, #000 50%, transparent 50%, transparent 55%, #000 55%, #000 61%, transparent 61%, transparent 66%, #000 66%, #000 72%, transparent 72%, transparent 77%, #000 77%, #000 83%, transparent 83%, transparent 88%, #000 88%, #000 94%, transparent 94%, transparent 100%); 269 | background-position: 0 0, 10px 10px, 0 0, 10px 10px, 0 0; 270 | background-size: 20px 20px; } 271 | 272 | /* 040 */ 273 | .elastic_040 { 274 | background-color: #3cc; 275 | background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%); 276 | background-image: radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%); 277 | background-position: 0 0, 40px 40px; 278 | background-size: 80px 80px; } 279 | 280 | /* 041 */ 281 | .elastic_041 { 282 | background-color: rgba(42, 40, 40, 0.24); 283 | background-image: -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), -webkit-repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), -webkit-repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 284 | background-image: repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, 0.1) 7.5%), repeating-linear-gradient(left, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.03) 4.5%), repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, 0.15) 2.2%); 285 | background-size: 35px 5px; } 286 | 287 | /* 042 */ 288 | .elastic_042 { 289 | background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0) 48%, white 48%, white 50%, rgba(204, 204, 204, 0) 50%, rgba(204, 204, 204, 0) 100%), -webkit-linear-gradient(top, #3498db 48%, white 48%, white 50%, #3498db 50%, #3498db 100%); 290 | background: linear-gradient(left, rgba(204, 204, 204, 0) 48%, white 48%, white 50%, rgba(204, 204, 204, 0) 50%, rgba(204, 204, 204, 0) 100%), linear-gradient(top, #3498db 48%, white 48%, white 50%, #3498db 50%, #3498db 100%); 291 | background-size: 30px 30px; } 292 | 293 | /* 043 */ 294 | .elastic_043 { 295 | background: -webkit-repeating-linear-gradient(45deg, rgba(171, 0, 0, 0.6) 10px, transparent 10px, transparent 20px, rgba(0, 186, 255, 0.6) 20px, rgba(0, 186, 255, 0.6) 30px, transparent 30px, transparent 40px, rgba(10, 53, 10, 0.6) 40px, rgba(10, 53, 10, 0.6) 50px, transparent 50px, transparent 60px, rgba(191, 128, 12, 0.6) 60px, rgba(191, 128, 12, 0.6) 70px, transparent 70px, transparent 80px, rgba(165, 165, 28, 0.6) 80px, rgba(165, 165, 28, 0.6) 90px, transparent 90px); 296 | background: repeating-linear-gradient(45deg, rgba(171, 0, 0, 0.6) 10px, transparent 10px, transparent 20px, rgba(0, 186, 255, 0.6) 20px, rgba(0, 186, 255, 0.6) 30px, transparent 30px, transparent 40px, rgba(10, 53, 10, 0.6) 40px, rgba(10, 53, 10, 0.6) 50px, transparent 50px, transparent 60px, rgba(191, 128, 12, 0.6) 60px, rgba(191, 128, 12, 0.6) 70px, transparent 70px, transparent 80px, rgba(165, 165, 28, 0.6) 80px, rgba(165, 165, 28, 0.6) 90px, transparent 90px); } 297 | 298 | /* 044 */ 299 | .elastic_044 { 300 | background: -webkit-linear-gradient(315deg, #BBF 25%, transparent 25%) -50px 0, -webkit-linear-gradient(225deg, #BBF 25%, transparent 25%) -50px 0, -webkit-linear-gradient(135deg, #BBF 25%, transparent 25%), -webkit-linear-gradient(45deg, #BBF 25%, transparent 25%); 301 | background: linear-gradient(135deg, #BBF 25%, transparent 25%) -50px 0, linear-gradient(225deg, #BBF 25%, transparent 25%) -50px 0, linear-gradient(315deg, #BBF 25%, transparent 25%), linear-gradient(45deg, #BBF 25%, transparent 25%); 302 | background-size: 25px 25px; } 303 | 304 | /* 045 */ 305 | .elastic_045 { 306 | background: -webkit-repeating-radial-gradient(50% 50% circle, #386ad8 4%, #386ad8 7%, transparent 12%); 307 | background: repeating-radial-gradient(circle at 50% 50%, #386ad8 4%, #386ad8 7%, transparent 12%); 308 | background-size: 48px 50px; } 309 | 310 | /* 046 */ 311 | .elastic_046 { 312 | background: -webkit-linear-gradient(left, rgba(204, 204, 204, 0) 44%, white 44%, white 47%, rgba(204, 204, 204, 0) 47%, rgba(204, 204, 204, 0) 50%, white 50%, white 53%, rgba(204, 204, 204, 0) 53%, rgba(204, 204, 204, 0) 100%), -webkit-linear-gradient(top, #ccc 44%, #fff 44%, #fff 47%, #ccc 47%, #ccc 50%, #fff 50%, #fff 53%, #ccc 53%, #ccc 100%); 313 | background: linear-gradient(left, rgba(204, 204, 204, 0) 44%, white 44%, white 47%, rgba(204, 204, 204, 0) 47%, rgba(204, 204, 204, 0) 50%, white 50%, white 53%, rgba(204, 204, 204, 0) 53%, rgba(204, 204, 204, 0) 100%), linear-gradient(top, #ccc 44%, #fff 44%, #fff 47%, #ccc 47%, #ccc 50%, #fff 50%, #fff 53%, #ccc 53%, #ccc 100%); 314 | background-size: 50px 50px; } 315 | 316 | /* 001 */ 317 | .elastic_ani_001 { 318 | position: absolute; 319 | top: 0; 320 | left: 0; 321 | width: 100%; 322 | height: 100%; 323 | background: -webkit-linear-gradient(top, #a6d900 0%, #ff4454 100%); 324 | background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%); 325 | opacity: .7; 326 | -webkit-animation: animation_001 3s infinite alternate; 327 | animation: animation_001 3s infinite alternate; } 328 | 329 | @-webkit-keyframes animation_001 { 330 | 0% { 331 | -webkit-filter: hue-rotate(0deg); 332 | filter: hue-rotate(0deg); } 333 | 100% { 334 | -webkit-filter: hue-rotate(360deg); 335 | filter: hue-rotate(360deg); } } 336 | 337 | @keyframes animation_001 { 338 | 0% { 339 | -webkit-filter: hue-rotate(0deg); 340 | filter: hue-rotate(0deg); } 341 | 100% { 342 | -webkit-filter: hue-rotate(360deg); 343 | filter: hue-rotate(360deg); } } 344 | 345 | /* 002 */ 346 | .elastic_ani_002 { 347 | background: -webkit-linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); 348 | background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); 349 | background-size: 400% 400%; 350 | opacity: .8; 351 | -webkit-animation: animation_002 3s ease infinite; 352 | animation: animation_002 3s ease infinite; } 353 | 354 | @-webkit-keyframes animation_002 { 355 | 0% { 356 | background-position: 0% 50%; } 357 | 50% { 358 | background-position: 100% 50%; } 359 | 100% { 360 | background-position: 0% 50%; } } 361 | 362 | @keyframes animation_002 { 363 | 0% { 364 | background-position: 0% 50%; } 365 | 50% { 366 | background-position: 100% 50%; } 367 | 100% { 368 | background-position: 0% 50%; } } 369 | 370 | /* 003 */ 371 | .elastic_ani_003 { 372 | background: -webkit-linear-gradient(213deg, #23bf97, #2379bf, #23bf52); 373 | background: linear-gradient(237deg, #23bf97, #2379bf, #23bf52); 374 | background-size: 600% 600%; 375 | -webkit-animation: animation_003 5s ease infinite; 376 | animation: animation_003 5s ease infinite; 377 | opacity: .8; } 378 | 379 | @-webkit-keyframes animation_003 { 380 | 0% { 381 | background-position: 0% 48%; } 382 | 50% { 383 | background-position: 100% 53%; } 384 | 100% { 385 | background-position: 0% 48%; } } 386 | 387 | @keyframes animation_003 { 388 | 0% { 389 | background-position: 0% 48%; } 390 | 50% { 391 | background-position: 100% 53%; } 392 | 100% { 393 | background-position: 0% 48%; } } 394 | 395 | /* 004 */ 396 | .elastic_ani_004 { 397 | background: -webkit-radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), -webkit-radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); 398 | background: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); 399 | background-color: #7093b7; 400 | background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 401 | background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; 402 | -webkit-animation: animation_004 1000s linear infinite; 403 | animation: animation_004 1000s linear infinite; } 404 | 405 | @-webkit-keyframes animation_004 { 406 | 0% { 407 | background-position: 0% 0%; } 408 | 100% { 409 | background-position: 0% 10000%; } } 410 | 411 | @keyframes animation_004 { 412 | 0% { 413 | background-position: 0% 0%; } 414 | 100% { 415 | background-position: 0% 10000%; } } 416 | 417 | /* 005 */ 418 | .elastic_ani_005 { 419 | background: -webkit-linear-gradient(bottom left, rgba(255, 175, 189, 0.7), rgba(100, 216, 243, 0.7), rgba(234, 236, 198, 0.7), rgba(245, 146, 176, 0.7), rgba(52, 219, 216, 0.7)); 420 | background: linear-gradient(to top right, rgba(255, 175, 189, 0.7), rgba(100, 216, 243, 0.7), rgba(234, 236, 198, 0.7), rgba(245, 146, 176, 0.7), rgba(52, 219, 216, 0.7)); 421 | background-size: 500% 500%; 422 | -webkit-animation: animation_005 5s ease infinite; 423 | animation: animation_005 5s ease infinite; } 424 | 425 | @-webkit-keyframes animation_005 { 426 | 0% { 427 | background-position: 0% 50%; } 428 | 50% { 429 | background-position: 100% 50%; } 430 | 100% { 431 | background-position: 0% 50%; } } 432 | 433 | @keyframes animation_005 { 434 | 0% { 435 | background-position: 0% 50%; } 436 | 50% { 437 | background-position: 100% 50%; } 438 | 100% { 439 | background-position: 0% 50%; } } 440 | 441 | /* 006 */ 442 | .elastic_ani_006 { 443 | background: -webkit-radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), -webkit-radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), -webkit-radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); 444 | background: radial-gradient(white, rgba(255, 255, 255, 0.2) 2px, transparent 40px), radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px), radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px), radial-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1) 2px, transparent 30px); 445 | background-color: #000; 446 | background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 447 | background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; 448 | -webkit-animation: animation_006 1000s linear infinite; 449 | animation: animation_006 1000s linear infinite; } 450 | 451 | @-webkit-keyframes animation_006 { 452 | 0% { 453 | background-position: 0% 0%; } 454 | 100% { 455 | background-position: 10000% 10000%; } } 456 | 457 | @keyframes animation_006 { 458 | 0% { 459 | background-position: 0% 0%; } 460 | 100% { 461 | background-position: 10000% 10000%; } } 462 | 463 | /* 007 */ 464 | .elastic_ani_007 { 465 | background: -webkit-linear-gradient(left, #ff6c37, #ffd037, #ff3766, #ff6c37); 466 | background: linear-gradient(90deg, #ff6c37, #ffd037, #ff3766, #ff6c37); 467 | background-size: 500% 500%; 468 | opacity: .7; 469 | -webkit-animation: animation_007 5s ease infinite; 470 | animation: animation_007 5s ease infinite; } 471 | 472 | @-webkit-keyframes animation_007 { 473 | 0% { 474 | background-position: 0% 50%; } 475 | 50% { 476 | background-position: 100% 50%; } 477 | 100% { 478 | background-position: 0% 50%; } } 479 | 480 | @keyframes animation_007 { 481 | 0% { 482 | background-position: 0% 50%; } 483 | 50% { 484 | background-position: 100% 50%; } 485 | 100% { 486 | background-position: 0% 50%; } } 487 | 488 | /* 008 */ 489 | .elastic_ani_008 { 490 | background: #fff; 491 | background-size: 500% 500%; 492 | opacity: .7; 493 | -webkit-animation: animation_008 5s ease infinite; 494 | animation: animation_008 5s ease infinite; } 495 | 496 | @-webkit-keyframes animation_008 { 497 | 0% { 498 | background: #ff6c37; } 499 | 33% { 500 | background: #37ff6c; } 501 | 67% { 502 | background: #6c37ff; } 503 | 100% { 504 | background: #ff6c37; } } 505 | 506 | @keyframes animation_008 { 507 | 0% { 508 | background: #ff6c37; } 509 | 33% { 510 | background: #37ff6c; } 511 | 67% { 512 | background: #6c37ff; } 513 | 100% { 514 | background: #ff6c37; } } 515 | 516 | /* 009 */ 517 | .elastic_ani_009 { 518 | background: #fff; 519 | background-size: 500% 500%; 520 | opacity: .7; 521 | -webkit-animation: animation_009 5s ease infinite; 522 | animation: animation_009 5s ease infinite; } 523 | 524 | @-webkit-keyframes animation_009 { 525 | 0% { 526 | background: #37caff; } 527 | 33% { 528 | background: #ff37ca; } 529 | 67% { 530 | background: #caff37; } 531 | 100% { 532 | background: #37caff; } } 533 | 534 | @keyframes animation_009 { 535 | 0% { 536 | background: #37caff; } 537 | 33% { 538 | background: #ff37ca; } 539 | 67% { 540 | background: #caff37; } 541 | 100% { 542 | background: #37caff; } } 543 | 544 | /* 010 */ 545 | .elastic_ani_010 { 546 | background: #fff; 547 | background-size: 500% 500%; 548 | opacity: .7; 549 | -webkit-animation: animation_010 5s ease infinite; 550 | animation: animation_010 5s ease infinite; } 551 | 552 | @-webkit-keyframes animation_010 { 553 | 0% { 554 | background: #58ffff; } 555 | 33% { 556 | background: #ff58ff; } 557 | 67% { 558 | background: #ffff58; } 559 | 100% { 560 | background: #58ffff; } } 561 | 562 | @keyframes animation_010 { 563 | 0% { 564 | background: #58ffff; } 565 | 33% { 566 | background: #ff58ff; } 567 | 67% { 568 | background: #ffff58; } 569 | 100% { 570 | background: #58ffff; } } 571 | 572 | /* 011 */ 573 | .elastic_ani_011 { 574 | background: -webkit-linear-gradient(45deg, #0000ff, #ff0000, #ffff00); 575 | background: linear-gradient(45deg, #0000ff, #ff0000, #ffff00); 576 | background-size: 500% 500%; 577 | opacity: .5; 578 | -webkit-animation: animation_011 10s ease infinite; 579 | animation: animation_011 10s ease infinite; } 580 | 581 | @-webkit-keyframes animation_011 { 582 | 0% { 583 | background-position: 0% 50%; } 584 | 50% { 585 | background-position: 100% 50%; } 586 | 100% { 587 | background-position: 0% 50%; } } 588 | 589 | @keyframes animation_011 { 590 | 0% { 591 | background-position: 0% 50%; } 592 | 50% { 593 | background-position: 100% 50%; } 594 | 100% { 595 | background-position: 0% 50%; } } 596 | 597 | /* 012 */ 598 | .elastic_ani_012 { 599 | background: #fff; 600 | background-size: 500% 500%; 601 | opacity: .7; 602 | -webkit-animation: animation_012 5s ease infinite; 603 | animation: animation_012 5s ease infinite; } 604 | 605 | @-webkit-keyframes animation_012 { 606 | 0% { 607 | background: #9932cc; } 608 | 25% { 609 | background: #cc32b2; } 610 | 50% { 611 | background: #ff1d8e; } 612 | 75% { 613 | background: #4c32cc; } 614 | 100% { 615 | background: #9932cc; } } 616 | 617 | @keyframes animation_012 { 618 | 0% { 619 | background: #9932cc; } 620 | 25% { 621 | background: #cc32b2; } 622 | 50% { 623 | background: #ff1d8e; } 624 | 75% { 625 | background: #4c32cc; } 626 | 100% { 627 | background: #9932cc; } } 628 | 629 | /* 013 */ 630 | .elastic_ani_013 { 631 | background: #fff; 632 | background-size: 500% 500%; 633 | opacity: .5; 634 | -webkit-animation: animation_013 5s ease infinite; 635 | animation: animation_013 5s ease infinite; } 636 | 637 | @-webkit-keyframes animation_013 { 638 | 0% { 639 | background: #0000ff; } 640 | 20% { 641 | background: #ff00bf; } 642 | 40% { 643 | background: #ff004c; } 644 | 60% { 645 | background: #bfff00; } 646 | 80% { 647 | background: #00ff6a; } 648 | 100% { 649 | background: #0000ff; } } 650 | 651 | @keyframes animation_013 { 652 | 0% { 653 | background: #0000ff; } 654 | 20% { 655 | background: #ff00bf; } 656 | 40% { 657 | background: #ff004c; } 658 | 60% { 659 | background: #bfff00; } 660 | 80% { 661 | background: #00ff6a; } 662 | 100% { 663 | background: #0000ff; } } 664 | 665 | /* 014 */ 666 | .elastic_ani_014 { 667 | background-color: #3cc; 668 | background-image: -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), -webkit-radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%); 669 | background-image: radial-gradient(rgba(255, 255, 255, 0.1) 40%, transparent 40%), radial-gradient(rgba(255, 255, 255, 0.1) 20%, transparent 20%); 670 | background-position: 0 0, 40px 40px; 671 | background-size: 80px 80px; 672 | -webkit-animation: animation_014 1000s linear infinite; 673 | animation: animation_014 1000s linear infinite; } 674 | 675 | @-webkit-keyframes animation_014 { 676 | 0% { 677 | background-position: 50% 0%; } 678 | 100% { 679 | background-position: 50% 10000%; } } 680 | 681 | @keyframes animation_014 { 682 | 0% { 683 | background-position: 50% 0%; } 684 | 100% { 685 | background-position: 50% 10000%; } } 686 | 687 | /* 015 */ 688 | .elastic_ani_015 { 689 | background: -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0, -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); 690 | background: radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0, linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); 691 | background-color: #840b2a; 692 | background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; 693 | -webkit-animation: animation_015 500s linear infinite; 694 | animation: animation_015 500s linear infinite; } 695 | 696 | @-webkit-keyframes animation_015 { 697 | 0% { 698 | background-position: 0% 0%; } 699 | 50% { 700 | background-position: 1000% 1000%; } } 701 | 702 | @keyframes animation_015 { 703 | 0% { 704 | background-position: 0% 0%; } 705 | 50% { 706 | background-position: 1000% 1000%; } } 707 | 708 | /* 016 */ 709 | .elastic_ani_016 { 710 | background: -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0; 711 | background: radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.3) 32%, rgba(255, 255, 255, 0) 33%) 0 0, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.3) 13%, rgba(255, 255, 255, 0) 14%) 0 0, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 17%, rgba(255, 255, 255, 0.43) 19%, rgba(255, 255, 255, 0) 20%) 0 110px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) -130px -170px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 11%, rgba(255, 255, 255, 0.4) 13%, rgba(255, 255, 255, 0) 14%) 130px 370px, radial-gradient(rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.1) 11%, rgba(255, 255, 255, 0.2) 13%, rgba(255, 255, 255, 0) 14%) 0 0; 712 | background-color: #0a0a5e; 713 | background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; 714 | -webkit-animation: animation_016 200s linear infinite; 715 | animation: animation_016 200s linear infinite; } 716 | 717 | @-webkit-keyframes animation_016 { 718 | 0% { 719 | background-position: 1000% 1000%; } 720 | 100% { 721 | background-position: 1000% 0; } } 722 | 723 | @keyframes animation_016 { 724 | 0% { 725 | background-position: 1000% 1000%; } 726 | 100% { 727 | background-position: 1000% 0; } } 728 | -------------------------------------------------------------------------------- /elastic.scss: -------------------------------------------------------------------------------- 1 | // patterns 2 | @import './parts/patterns/001'; 3 | @import './parts/patterns/002'; 4 | @import './parts/patterns/003'; 5 | @import './parts/patterns/004'; 6 | @import './parts/patterns/005'; 7 | @import './parts/patterns/006'; 8 | @import './parts/patterns/007'; 9 | @import './parts/patterns/008'; 10 | @import './parts/patterns/009'; 11 | @import './parts/patterns/010'; 12 | @import './parts/patterns/011'; 13 | @import './parts/patterns/012'; 14 | @import './parts/patterns/013'; 15 | @import './parts/patterns/014'; 16 | @import './parts/patterns/015'; 17 | @import './parts/patterns/016'; 18 | @import './parts/patterns/017'; 19 | @import './parts/patterns/018'; 20 | @import './parts/patterns/019'; 21 | @import './parts/patterns/020'; 22 | @import './parts/patterns/021'; 23 | @import './parts/patterns/022'; 24 | @import './parts/patterns/023'; 25 | @import './parts/patterns/024'; 26 | @import './parts/patterns/025'; 27 | @import './parts/patterns/026'; 28 | @import './parts/patterns/027'; 29 | @import './parts/patterns/028'; 30 | @import './parts/patterns/029'; 31 | @import './parts/patterns/030'; 32 | @import './parts/patterns/031'; 33 | @import './parts/patterns/032'; 34 | @import './parts/patterns/033'; 35 | @import './parts/patterns/034'; 36 | @import './parts/patterns/035'; 37 | @import './parts/patterns/036'; 38 | @import './parts/patterns/037'; 39 | @import './parts/patterns/038'; 40 | @import './parts/patterns/039'; 41 | @import './parts/patterns/040'; 42 | @import './parts/patterns/041'; 43 | @import './parts/patterns/042'; 44 | @import './parts/patterns/043'; 45 | @import './parts/patterns/044'; 46 | @import './parts/patterns/045'; 47 | @import './parts/patterns/046'; 48 | 49 | // animations 50 | @import './parts/animations/001'; 51 | @import './parts/animations/002'; 52 | @import './parts/animations/003'; 53 | @import './parts/animations/004'; 54 | @import './parts/animations/005'; 55 | @import './parts/animations/006'; 56 | @import './parts/animations/007'; 57 | @import './parts/animations/008'; 58 | @import './parts/animations/009'; 59 | @import './parts/animations/010'; 60 | @import './parts/animations/011'; 61 | @import './parts/animations/012'; 62 | @import './parts/animations/013'; 63 | @import './parts/animations/014'; 64 | @import './parts/animations/015'; 65 | @import './parts/animations/016'; 66 | -------------------------------------------------------------------------------- /parts/animations/_001.scss: -------------------------------------------------------------------------------- 1 | /* 001 */ 2 | .elastic_ani_001 { 3 | position: absolute; 4 | top: 0; 5 | left: 0; 6 | width: 100%; 7 | height: 100%; 8 | background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%); 9 | opacity: .7; 10 | animation: animation_001 3s infinite alternate; 11 | } 12 | 13 | @keyframes animation_001 { 14 | 0% { 15 | filter: hue-rotate(0deg); 16 | } 17 | 100% { 18 | filter: hue-rotate(360deg); 19 | } 20 | } -------------------------------------------------------------------------------- /parts/animations/_002.scss: -------------------------------------------------------------------------------- 1 | /* 002 */ 2 | .elastic_ani_002 { 3 | background: linear-gradient(45deg, #6cb8ff, #fff66c, #ffa36c); 4 | background-size: 400% 400%; 5 | opacity: .8; 6 | animation: animation_002 3s ease infinite;; 7 | } 8 | 9 | @keyframes animation_002 { 10 | 0% { 11 | background-position:0% 50%; 12 | } 13 | 50% { 14 | background-position:100% 50%; 15 | } 16 | 100% { 17 | background-position:0% 50%; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /parts/animations/_003.scss: -------------------------------------------------------------------------------- 1 | /* 003 */ 2 | .elastic_ani_003 { 3 | background: linear-gradient(237deg, #23bf97, #2379bf, #23bf52); 4 | background-size: 600% 600%; 5 | animation: animation_003 5s ease infinite; 6 | opacity: .8; 7 | } 8 | 9 | @keyframes animation_003 { 10 | 0% { 11 | background-position:0% 48% 12 | } 13 | 50% { 14 | background-position:100% 53% 15 | } 16 | 100% { 17 | background-position:0% 48% 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /parts/animations/_004.scss: -------------------------------------------------------------------------------- 1 | /* 004 */ 2 | .elastic_ani_004 { 3 | background: 4 | radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), 5 | radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), 6 | radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), 7 | radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); 8 | background-color: #7093b7; 9 | background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 10 | background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; 11 | animation: animation_004 1000s linear infinite; 12 | } 13 | 14 | @keyframes animation_004 { 15 | 0% { 16 | background-position: 0% 0%; 17 | } 18 | 100% { 19 | background-position: 0% 10000%; 20 | } 21 | } -------------------------------------------------------------------------------- /parts/animations/_005.scss: -------------------------------------------------------------------------------- 1 | /* 005 */ 2 | .elastic_ani_005 { 3 | background: linear-gradient(to top right, rgba(255,175,189,.7), rgba(100,216,243,.7), rgba(234,236,198,.7), rgba(245,146,176,.7), rgba(52,219,216,.7)); 4 | background-size: 500% 500%; 5 | animation: animation_005 5s ease infinite; 6 | } 7 | 8 | @keyframes animation_005 { 9 | 0% { 10 | background-position:0% 50%; 11 | } 12 | 50% { 13 | background-position:100% 50%; 14 | } 15 | 100% { 16 | background-position:0% 50%; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /parts/animations/_006.scss: -------------------------------------------------------------------------------- 1 | /* 006 */ 2 | .elastic_ani_006 { 3 | background: 4 | radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), 5 | radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), 6 | radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), 7 | radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); 8 | background-color: #000; 9 | background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 10 | background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; 11 | animation: animation_006 1000s linear infinite; 12 | } 13 | 14 | @keyframes animation_006 { 15 | 0% { 16 | background-position: 0% 0%; 17 | } 18 | 100% { 19 | background-position: 10000% 10000%; 20 | } 21 | } -------------------------------------------------------------------------------- /parts/animations/_007.scss: -------------------------------------------------------------------------------- 1 | /* 007 */ 2 | .elastic_ani_007 { 3 | background: linear-gradient(90deg, #ff6c37, #ffd037, #ff3766, #ff6c37); 4 | background-size: 500% 500%; 5 | opacity: .7; 6 | animation: animation_007 5s ease infinite; 7 | } 8 | 9 | @keyframes animation_007 { 10 | 0% { 11 | background-position:0% 50%; 12 | } 13 | 50% { 14 | background-position:100% 50%; 15 | } 16 | 100% { 17 | background-position:0% 50%; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /parts/animations/_008.scss: -------------------------------------------------------------------------------- 1 | /* 008 */ 2 | .elastic_ani_008 { 3 | background: #fff; 4 | background-size: 500% 500%; 5 | opacity: .7; 6 | animation: animation_008 5s ease infinite; 7 | } 8 | 9 | @keyframes animation_008 { 10 | 0% { 11 | background: #ff6c37; 12 | } 13 | 33% { 14 | background: #37ff6c; 15 | } 16 | 67% { 17 | background: #6c37ff; 18 | } 19 | 100% { 20 | background: #ff6c37; 21 | } 22 | } -------------------------------------------------------------------------------- /parts/animations/_009.scss: -------------------------------------------------------------------------------- 1 | /* 009 */ 2 | .elastic_ani_009 { 3 | background: #fff; 4 | background-size: 500% 500%; 5 | opacity: .7; 6 | animation: animation_009 5s ease infinite; 7 | } 8 | 9 | @keyframes animation_009 { 10 | 0% { 11 | background: #37caff; 12 | } 13 | 33% { 14 | background: #ff37ca; 15 | } 16 | 67% { 17 | background: #caff37; 18 | } 19 | 100% { 20 | background: #37caff; 21 | } 22 | } -------------------------------------------------------------------------------- /parts/animations/_010.scss: -------------------------------------------------------------------------------- 1 | /* 010 */ 2 | .elastic_ani_010 { 3 | background: #fff; 4 | background-size: 500% 500%; 5 | opacity: .7; 6 | animation: animation_010 5s ease infinite; 7 | } 8 | 9 | @keyframes animation_010 { 10 | 0% { 11 | background: #58ffff; 12 | } 13 | 33% { 14 | background: #ff58ff; 15 | } 16 | 67% { 17 | background: #ffff58; 18 | } 19 | 100% { 20 | background: #58ffff; 21 | } 22 | } -------------------------------------------------------------------------------- /parts/animations/_011.scss: -------------------------------------------------------------------------------- 1 | /* 011 */ 2 | .elastic_ani_011 { 3 | background: linear-gradient(45deg, #0000ff, #ff0000, #ffff00); 4 | background-size: 500% 500%; 5 | opacity: .5; 6 | animation: animation_011 10s ease infinite; 7 | } 8 | 9 | @keyframes animation_011 { 10 | 0% { 11 | background-position:0% 50%; 12 | } 13 | 50% { 14 | background-position:100% 50%; 15 | } 16 | 100% { 17 | background-position:0% 50%; 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /parts/animations/_012.scss: -------------------------------------------------------------------------------- 1 | /* 012 */ 2 | .elastic_ani_012 { 3 | background: #fff; 4 | background-size: 500% 500%; 5 | opacity: .7; 6 | animation: animation_012 5s ease infinite; 7 | } 8 | 9 | @keyframes animation_012 { 10 | 0% { 11 | background: #9932cc; 12 | } 13 | 25% { 14 | background: #cc32b2; 15 | } 16 | 50% { 17 | background: #ff1d8e; 18 | } 19 | 75% { 20 | background: #4c32cc; 21 | } 22 | 100% { 23 | background: #9932cc; 24 | } 25 | } -------------------------------------------------------------------------------- /parts/animations/_013.scss: -------------------------------------------------------------------------------- 1 | /* 013 */ 2 | .elastic_ani_013 { 3 | background: #fff; 4 | background-size: 500% 500%; 5 | opacity: .5; 6 | animation: animation_013 5s ease infinite; 7 | } 8 | 9 | @keyframes animation_013 { 10 | 0% { 11 | background: #0000ff; 12 | } 13 | 20% { 14 | background: #ff00bf; 15 | } 16 | 40% { 17 | background: #ff004c; 18 | } 19 | 60% { 20 | background: #bfff00; 21 | } 22 | 80% { 23 | background: #00ff6a; 24 | } 25 | 100% { 26 | background: #0000ff; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /parts/animations/_014.scss: -------------------------------------------------------------------------------- 1 | /* 014 */ 2 | .elastic_ani_014 { 3 | background-color:#3cc; 4 | background-image: 5 | radial-gradient(rgba(255,255,255,.1) 40%, transparent 40%), 6 | radial-gradient(rgba(255,255,255,.1) 20%, transparent 20%); 7 | background-position: 0 0, 40px 40px; 8 | background-size:80px 80px; 9 | animation: animation_014 1000s linear infinite; 10 | } 11 | 12 | @keyframes animation_014 { 13 | 0% { 14 | background-position: 50% 0%; 15 | } 16 | 100% { 17 | background-position: 50% 10000%; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /parts/animations/_015.scss: -------------------------------------------------------------------------------- 1 | /* 015 */ 2 | .elastic_ani_015 { 3 | background: 4 | 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, 5 | 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, 6 | 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, 7 | 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, 8 | 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, 9 | 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, 10 | linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); 11 | background-color: #840b2a; 12 | background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; 13 | animation: animation_015 500s linear infinite; 14 | } 15 | 16 | @keyframes animation_015 { 17 | 0% { 18 | background-position: 0% 0%; 19 | } 20 | 50% { 21 | background-position: 1000% 1000%; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /parts/animations/_016.scss: -------------------------------------------------------------------------------- 1 | /* 016 */ 2 | .elastic_ani_016 { 3 | background: 4 | 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, 5 | 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, 6 | 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, 7 | 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, 8 | 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, 9 | 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; 10 | background-color: #0a0a5e; 11 | background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; 12 | animation: animation_016 200s linear infinite; 13 | } 14 | 15 | @keyframes animation_016 { 16 | 0% { 17 | background-position: 1000% 1000%; 18 | } 19 | 100% { 20 | background-position: 1000% 0; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /parts/patterns/_001.scss: -------------------------------------------------------------------------------- 1 | /* 001 */ 2 | .elastic_001 { 3 | background-color: #e6e6e6; 4 | background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .05)); 5 | background-size: 80px 80px; 6 | } -------------------------------------------------------------------------------- /parts/patterns/_002.scss: -------------------------------------------------------------------------------- 1 | /* 002 */ 2 | .elastic_002 { 3 | background-color: rgba(230, 230, 230, .5); 4 | background-image: linear-gradient(45deg, rgba(0, 0, 0, .8), #000); 5 | background-size: 10px 10px; 6 | } -------------------------------------------------------------------------------- /parts/patterns/_003.scss: -------------------------------------------------------------------------------- 1 | /* 003 */ 2 | .elastic_003 { 3 | background-color: rgba(230, 230, 230, .01); 4 | background-image: 5 | radial-gradient(30% 25%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 100%), 6 | radial-gradient(30% 75%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 100%), 7 | radial-gradient(25% 30%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 100%), 8 | radial-gradient(75% 28%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, 0) 100%); 9 | background-size: 10px 10px; 10 | } 11 | -------------------------------------------------------------------------------- /parts/patterns/_004.scss: -------------------------------------------------------------------------------- 1 | /* 004 */ 2 | .elastic_004 { 3 | background-color: #e6e6e6; 4 | background-image: 5 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), 6 | repeating-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, .03) 4.5%), 7 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .15) 2.2%), 8 | linear-gradient(180deg, #c7c7c7 0%, #e6e6e6 47%, #c7c7c7 53%, #b3b3b3 100%); 9 | background-size: 10px 10px; 10 | } 11 | -------------------------------------------------------------------------------- /parts/patterns/_005.scss: -------------------------------------------------------------------------------- 1 | /* 005 */ 2 | .elastic_005 { 3 | background-color: #b2dae7; 4 | background-image: 5 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), 6 | repeating-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, .03) 4.5%), 7 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .15) 2.2%); 8 | background-size: 500px 500px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_006.scss: -------------------------------------------------------------------------------- 1 | /* 006 */ 2 | .elastic_006 { 3 | background-color: rgba(42, 40, 40, 0.24); 4 | background-image: 5 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), 6 | repeating-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, .03) 4.5%), 7 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .15) 2.2%); 8 | background-size: 5000px 500px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_007.scss: -------------------------------------------------------------------------------- 1 | /* 007 */ 2 | .elastic_007 { 3 | background-color: rgba(230, 230, 230, .5); 4 | background-image: linear-gradient(45deg, hsla(0,0%,0%,.0), hsla(0,0%,0%,.05)); 5 | background-size: 10px 10px; 6 | } -------------------------------------------------------------------------------- /parts/patterns/_008.scss: -------------------------------------------------------------------------------- 1 | /* 008 */ 2 | .elastic_008 { 3 | background: radial-gradient(left top, ellipse farthest-side, #f0f0f0, #999 100px, #777); 4 | background-size: 30px 30px; 5 | } 6 | -------------------------------------------------------------------------------- /parts/patterns/_009.scss: -------------------------------------------------------------------------------- 1 | /* 009 */ 2 | .elastic_009 { 3 | background-color: rgba(228, 115, 81, 0.24); 4 | background-image: 5 | repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), 6 | repeating-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, .03) 4.5%), 7 | repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .15) 2.2%); 8 | background-size: 1px 500px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_010.scss: -------------------------------------------------------------------------------- 1 | /* 010 */ 2 | .elastic_010 { 3 | background-image: radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white); 4 | background-size: 5px 5px; 5 | } -------------------------------------------------------------------------------- /parts/patterns/_011.scss: -------------------------------------------------------------------------------- 1 | /* 011 */ 2 | .elastic_011 { 3 | background-image: repeating-linear-gradient(-45deg, #c9c9fc, #c9c9fc 5px, white 5px, white 10px); 4 | } -------------------------------------------------------------------------------- /parts/patterns/_012.scss: -------------------------------------------------------------------------------- 1 | /* 012 */ 2 | .elastic_012 { 3 | background-image: 4 | repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(138, 138, 138, 0.1) 7.5%), 5 | repeating-linear-gradient(top, transparent 0%, transparent 4%, rgba(0, 0, 0, 0.13) 4.5%), 6 | repeating-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(138, 138, 138, 0) 1.2%, rgba(138, 138, 138, 0.15) 2.2%); 7 | background-size: 1px 2000px; 8 | } -------------------------------------------------------------------------------- /parts/patterns/_013.scss: -------------------------------------------------------------------------------- 1 | /* 013 */ 2 | .elastic_013 { 3 | background-color: #fff; 4 | background-image: 5 | repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), 6 | repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) -63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px), 7 | repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px), 8 | repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px); 9 | } -------------------------------------------------------------------------------- /parts/patterns/_014.scss: -------------------------------------------------------------------------------- 1 | /* 014 */ 2 | .elastic_014 { 3 | background-color: #fff; 4 | background-image: 5 | linear-gradient(45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6), 6 | linear-gradient(45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6); 7 | background-position: 0 0, 25px 25px; 8 | background-size: 50px 50px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_015.scss: -------------------------------------------------------------------------------- 1 | /* 015 */ 2 | .elastic_015 { 3 | background-color: #555; 4 | background-image: 5 | linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), 6 | linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), 7 | linear-gradient(30deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), 8 | linear-gradient(150deg, #444 12%, transparent 12.5%, transparent 87%, #444 87.5%, #444), 9 | linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888), 10 | linear-gradient(60deg, #888 25%, transparent 25.5%, transparent 75%, #888 75%, #888); 11 | background-position: 0 0, 0 0, 25px 50px, 25px 50px, 0 0, 25px 50px; 12 | background-size: 50px 100px; 13 | } -------------------------------------------------------------------------------- /parts/patterns/_016.scss: -------------------------------------------------------------------------------- 1 | /* 016 */ 2 | .elastic_016 { 3 | background-color: #fff; 4 | background-image: 5 | linear-gradient(-45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%), 6 | linear-gradient(45deg, rgba(0,0,0,.5) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 75%, transparent 75%, transparent 100%); 7 | background-size: 52px 52px; 8 | } -------------------------------------------------------------------------------- /parts/patterns/_017.scss: -------------------------------------------------------------------------------- 1 | /* 017 */ 2 | .elastic_017 { 3 | background-color: #f6f6f6; 4 | background-image: radial-gradient(#444 20%, transparent 0), radial-gradient(#444 20%, transparent 0); 5 | background-position: 0 0, 10px 10px; 6 | background-size: 20px 20px; 7 | } -------------------------------------------------------------------------------- /parts/patterns/_018.scss: -------------------------------------------------------------------------------- 1 | /* 018 */ 2 | .elastic_018 { 3 | background: 4 | linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, 5 | linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0, 6 | linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px, 7 | linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px; 8 | background-color: #36c; 9 | background-size: 15px 30px 10 | } -------------------------------------------------------------------------------- /parts/patterns/_019.scss: -------------------------------------------------------------------------------- 1 | /* 019 */ 2 | .elastic_019 { 3 | background: 4 | radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0, 5 | radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px, 6 | radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0, 7 | radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px, 8 | radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0, 9 | radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px, 10 | radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0, 11 | radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px, 12 | linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0, 13 | linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0; 14 | background-color: #300; 15 | background-size: 100px 100px; 16 | } -------------------------------------------------------------------------------- /parts/patterns/_020.scss: -------------------------------------------------------------------------------- 1 | /* 020 */ 2 | .elastic_020 { 3 | background: 4 | 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, 5 | 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, 6 | 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, 7 | 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, 8 | 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, 9 | 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, 10 | linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%); 11 | background-color: #840b2a; 12 | background-size: 470px 470px, 970px 970px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 100% 100%; 13 | } -------------------------------------------------------------------------------- /parts/patterns/_021.scss: -------------------------------------------------------------------------------- 1 | /* 021 */ 2 | .elastic_021 { 3 | background: 4 | linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, 5 | linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, 6 | linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, 7 | linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, 8 | linear-gradient(90deg, #1b1b1b 10px, transparent 10px), 9 | linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); 10 | background-color: #131313; 11 | background-size: 20px 20px; 12 | } -------------------------------------------------------------------------------- /parts/patterns/_022.scss: -------------------------------------------------------------------------------- 1 | /* 022 */ 2 | .elastic_022 { 3 | background: 4 | radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), 5 | radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), 6 | radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), 7 | radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); 8 | background-color: #000; 9 | background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 10 | background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; 11 | } -------------------------------------------------------------------------------- /parts/patterns/_023.scss: -------------------------------------------------------------------------------- 1 | /* 023 */ 2 | .elastic_023 { 3 | background: 4 | radial-gradient(black 15%, transparent 16%) 0 0, 5 | radial-gradient(black 15%, transparent 16%) 8px 8px, 6 | radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, 7 | radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; 8 | background-color:#282828; 9 | background-size:16px 16px; 10 | } -------------------------------------------------------------------------------- /parts/patterns/_024.scss: -------------------------------------------------------------------------------- 1 | /* 024 */ 2 | .elastic_024 { 3 | background-color: #6d695c; 4 | background-image: 5 | repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 6 | repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), 7 | linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), 8 | linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); 9 | background-size: 70px 120px; 10 | } -------------------------------------------------------------------------------- /parts/patterns/_025.scss: -------------------------------------------------------------------------------- 1 | /* 025 */ 2 | .elastic_025 { 3 | background-color: #a0302c; 4 | background-image: 5 | 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), 6 | 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), 7 | 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); 8 | } -------------------------------------------------------------------------------- /parts/patterns/_026.scss: -------------------------------------------------------------------------------- 1 | /* 026 */ 2 | .elastic_026 { 3 | background: 4 | linear-gradient(-45deg, #f6f6f6 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc) 0 0, 5 | linear-gradient(-45deg, #ccc 25%, transparent 25%, transparent 75%, #f6f6f6 75%, #f6f6f6) 1em 1em, 6 | linear-gradient(45deg, #ccc 17%, transparent 17%, transparent 25%, #ccc 25%, #ccc 36%, transparent 36%, transparent 64%, #ccc 64%, #ccc 75%, transparent 75%, transparent 83%, #ccc 83%) 1em 1em; 7 | background-color: #f6f6f6; 8 | background-size: 2em 2em; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_027.scss: -------------------------------------------------------------------------------- 1 | /* 027 */ 2 | .elastic_027 { 3 | background-color: #e9d4b9; 4 | background-image: 5 | repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 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, 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, 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, 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, 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), 6 | repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 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, 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, 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, 7 | 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, 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); 8 | } -------------------------------------------------------------------------------- /parts/patterns/_028.scss: -------------------------------------------------------------------------------- 1 | /* 028 */ 2 | .elastic_028 { 3 | background-color: #f6f6f6; 4 | background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); 5 | background-size:50px 50px; 6 | } -------------------------------------------------------------------------------- /parts/patterns/_029.scss: -------------------------------------------------------------------------------- 1 | /* 029 */ 2 | .elastic_029 { 3 | background-color: #026873; 4 | background-image: 5 | linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), 6 | linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), 7 | linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), 8 | linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); 9 | background-size: 13px, 29px, 37px, 53px; 10 | } -------------------------------------------------------------------------------- /parts/patterns/_030.scss: -------------------------------------------------------------------------------- 1 | /* 030 */ 2 | .elastic_030 { 3 | background-color: #753; 4 | background-image: 5 | linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0), 6 | linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0), 7 | linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0); 8 | background-size: 25px 25px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_031.scss: -------------------------------------------------------------------------------- 1 | /* 031 */ 2 | .elastic_031 { 3 | background-color:#def; 4 | background-image: 5 | radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%), 6 | radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%); 7 | background-size:80px 80px; 8 | background-position:0 0, 40px 40px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_032.scss: -------------------------------------------------------------------------------- 1 | /* 032 */ 2 | .elastic_032 { 3 | background: 4 | linear-gradient(315deg, transparent 75%, #d45d55 0)-10px 0, 5 | linear-gradient(45deg, transparent 75%, #d45d55 0)-10px 0, 6 | linear-gradient(135deg, #a7332b 50%, transparent 0) 0 0, 7 | linear-gradient(45deg, #6a201b 50%, #561a16 0) 0 0; 8 | background-color: #561a16; 9 | background-size: 20px 20px; 10 | } -------------------------------------------------------------------------------- /parts/patterns/_033.scss: -------------------------------------------------------------------------------- 1 | /* 033 */ 2 | .elastic_033 { 3 | background: 4 | radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px, 5 | radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px, 6 | linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0, 7 | 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, 8 | 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, 9 | linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1; 10 | background-size:40px 60px; 11 | } -------------------------------------------------------------------------------- /parts/patterns/_034.scss: -------------------------------------------------------------------------------- 1 | /* 034 */ 2 | .elastic_034 { 3 | background-color: #c0c0c0; 4 | background-image: 5 | linear-gradient(335deg, #b00 23px, transparent 23px), 6 | linear-gradient(155deg, #d00 23px, transparent 23px), 7 | linear-gradient(335deg, #b00 23px, transparent 23px), 8 | linear-gradient(155deg, #d00 23px, transparent 23px); 9 | background-size: 58px 58px; 10 | background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; 11 | } -------------------------------------------------------------------------------- /parts/patterns/_035.scss: -------------------------------------------------------------------------------- 1 | /* 035 */ 2 | .elastic_035 { 3 | background-color: #f6f6f6; 4 | background-image: linear-gradient(#eee .1em, transparent .1em); 5 | background-size: 100% 1.2em; 6 | } -------------------------------------------------------------------------------- /parts/patterns/_036.scss: -------------------------------------------------------------------------------- 1 | /* 036 */ 2 | .elastic_036 { 3 | background: 4 | radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, 5 | radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px); 6 | background-color: #8a3; 7 | background-size: 20px 20px; 8 | } -------------------------------------------------------------------------------- /parts/patterns/_037.scss: -------------------------------------------------------------------------------- 1 | /* 037 */ 2 | .elastic_037 { 3 | background: 4 | linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), 5 | linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px; 6 | background-color:#708090; 7 | background-size: 64px 128px 8 | } -------------------------------------------------------------------------------- /parts/patterns/_038.scss: -------------------------------------------------------------------------------- 1 | /* 038 */ 2 | .elastic_038 { 3 | background-color: #f6f6f6; 4 | background-image: 5 | linear-gradient(45deg, rgba(102, 238, 238, 0.5) 25%, transparent 25%, transparent 50%, rgba(102, 238, 238, 0.5) 50%, rgba(102, 238, 238, 0.5) 75%, transparent 75%, transparent), 6 | linear-gradient(-45deg, rgba(102, 238, 238, 0.5) 25%, transparent 25%, transparent 50%, rgba(102, 238, 238, 0.5) 50%, rgba(102, 238, 238, 0.5) 75%, transparent 75%, transparent); 7 | background-size: 30px 30px; 8 | } -------------------------------------------------------------------------------- /parts/patterns/_039.scss: -------------------------------------------------------------------------------- 1 | /* 039 */ 2 | .elastic_039 { 3 | background-color: #f6f6f6; 4 | background-image: 5 | linear-gradient(45deg, #000 25%, #000 25%, transparent 25%, transparent 100%), 6 | linear-gradient(-135deg, #000 25%, #000 25%, transparent 25%, transparent 100%), 7 | linear-gradient(-135deg, #f6f6f6 25%, #f6f6f6 25%, transparent 25%, transparent 100%), 8 | linear-gradient(45deg, #f6f6f6 25%, #f6f6f6 25%, transparent 25%, transparent 100%), 9 | linear-gradient(45deg, #000 0%, #000 6%, transparent 6%, transparent 11%, #000 11%, #000 17%, transparent 17%, transparent 22%, #000 22%, #000 28%, transparent 28%, transparent 33%, #000 33%, #000 39%, transparent 39%, transparent 44%, #000 44%, #000 50%, transparent 50%, transparent 55%, #000 55%, #000 61%, transparent 61%, transparent 66%, #000 66%, #000 72%, transparent 72%, transparent 77%, #000 77%, #000 83%, transparent 83%, transparent 88%, #000 88%, #000 94%, transparent 94%, transparent 100%); 10 | background-position: 0 0, 10px 10px, 0 0, 10px 10px, 0 0; 11 | background-size: 20px 20px; 12 | } -------------------------------------------------------------------------------- /parts/patterns/_040.scss: -------------------------------------------------------------------------------- 1 | /* 040 */ 2 | .elastic_040 { 3 | background-color:#3cc; 4 | background-image: 5 | radial-gradient(rgba(255,255,255,.1) 40%, transparent 40%), 6 | radial-gradient(rgba(255,255,255,.1) 20%, transparent 20%); 7 | background-position: 0 0, 40px 40px; 8 | background-size:80px 80px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_041.scss: -------------------------------------------------------------------------------- 1 | /* 041 */ 2 | .elastic_041 { 3 | background-color: rgba(42, 40, 40, 0.24); 4 | background-image: 5 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 6%, rgba(255, 255, 255, .1) 7.5%), 6 | repeating-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, .03) 4.5%), 7 | repeating-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1.2%, rgba(255, 255, 255, .15) 2.2%); 8 | background-size: 35px 5px; 9 | } -------------------------------------------------------------------------------- /parts/patterns/_042.scss: -------------------------------------------------------------------------------- 1 | /* 042 */ 2 | .elastic_042 { 3 | background: 4 | linear-gradient(left, rgba(204, 204, 204, 0) 48%, rgb(255, 255, 255) 48%, rgb(255, 255, 255) 50%, rgba(204, 204, 204, 0) 50%, rgba(204, 204, 204, 0) 100%), 5 | linear-gradient(top, #3498db 48%, rgb(255, 255, 255) 48%, rgb(255, 255, 255) 50%, #3498db 50%, #3498db 100%); 6 | background-size: 30px 30px; 7 | } -------------------------------------------------------------------------------- /parts/patterns/_043.scss: -------------------------------------------------------------------------------- 1 | /* 043 */ 2 | .elastic_043 { 3 | background: 4 | repeating-linear-gradient(45deg, rgba(171, 0, 0, 0.6) 10px, transparent 10px, transparent 20px, rgba(0, 186, 255, 0.6) 20px, rgba(0, 186, 255, 0.6) 30px, transparent 30px, transparent 40px, rgba(10, 53, 10, 0.6) 40px, rgba(10, 53, 10, 0.6) 50px, transparent 50px, transparent 60px, rgba(191, 128, 12, 0.6) 60px, rgba(191, 128, 12, 0.6) 70px, transparent 70px, transparent 80px, rgba(165, 165, 28, 0.6) 80px, rgba(165, 165, 28, 0.6) 90px, transparent 90px); 5 | } -------------------------------------------------------------------------------- /parts/patterns/_044.scss: -------------------------------------------------------------------------------- 1 | /* 044 */ 2 | .elastic_044 { 3 | background: 4 | linear-gradient(135deg, #BBF 25%, transparent 25%) -50px 0, 5 | linear-gradient(225deg, #BBF 25%, transparent 25%) -50px 0, 6 | linear-gradient(315deg, #BBF 25%, transparent 25%), 7 | linear-gradient(45deg, #BBF 25%, transparent 25%); 8 | background-size: 25px 25px; 9 | } 10 | -------------------------------------------------------------------------------- /parts/patterns/_045.scss: -------------------------------------------------------------------------------- 1 | /* 045 */ 2 | .elastic_045 { 3 | background: repeating-radial-gradient(circle at 50% 50%, #386ad8 4%, #386ad8 7%, transparent 12%); 4 | background-size: 48px 50px; 5 | } 6 | -------------------------------------------------------------------------------- /parts/patterns/_046.scss: -------------------------------------------------------------------------------- 1 | /* 046 */ 2 | .elastic_046 { 3 | background: 4 | linear-gradient(left, rgba(204, 204, 204, 0) 44%, rgb(255, 255, 255) 44%, rgb(255, 255, 255) 47%, rgba(204, 204, 204, 0) 47%, rgba(204, 204, 204, 0) 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 53%, rgba(204, 204, 204, 0) 53%, rgba(204, 204, 204, 0) 100%), 5 | linear-gradient(top, #ccc 44%, #fff 44%, #fff 47%, #ccc 47%, #ccc 50%, #fff 50%, #fff 53%, #ccc 53%, #ccc 100%); 6 | background-size: 50px 50px; 7 | } 8 | --------------------------------------------------------------------------------