Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Update gradient patterns demo page to final syntax

  • Loading branch information...
commit 28c8a49cddb42d34c63052781b88f28f27355ea2 1 parent 28fa814
@lojjic authored
Showing with 107 additions and 227 deletions.
  1. +107 −227 demos/gradient-patterns.html
View
334 demos/gradient-patterns.html
@@ -118,11 +118,9 @@
background-color: #0ae;
background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-background-image: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -133,11 +131,9 @@
background-color: #f90;
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-background-image: -mslinear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-background-image: -olinear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
-background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
--pie-background: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px 50px #f90;
-behavior: url(/PIE.htc);</code></pre>
+background-image: linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
+-pie-background: linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px 50px #f90;
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -150,15 +146,11 @@
-webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
-background-image: -ms-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
- -ms-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
-background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
- -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
- linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
+ linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
-pie-background: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px,
- linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px white;
-behavior: url(/PIE.htc);</code></pre>
+ linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px white;
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -173,19 +165,13 @@
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
-background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
- transparent 75%, transparent);
-background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
- transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
-pie-background: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent) 0 0 / 50px 50px #ac0;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -200,19 +186,13 @@
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
-background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
- transparent 75%, transparent);
-background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
- transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
- transparent 75%, transparent);
-background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
--pie-background: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
+-pie-background: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent) 0 0 / 50px 50px, #c16;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<!-- End patterns from http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ -->
@@ -234,16 +214,12 @@
-webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
-moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
-background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
- -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
-background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
- -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
-pie-background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 30px 30px / 60px,
#eee;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -256,16 +232,12 @@
-webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
-moz-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
-background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
- -ms-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
-background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
- -o-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
- linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
+ linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
-pie-background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
- linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
+ linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px,
#eee;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -284,34 +256,22 @@
-moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
-moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
-moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
-background: -ms-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
- -ms-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
- -ms-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
- -ms-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
- -ms-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
- -ms-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
-background: -o-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
- -o-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
- -o-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
- -o-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
- -o-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
- -o-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
-background: linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
- linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
- linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
- linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
- linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
+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);
background-size: 20px 20px;
background-color: #131313;
--pie-background: linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px / 20px,
- linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px / 20px,
- linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px / 20px,
- linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px / 20px,
- linear-gradient(0deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px,
+-pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px / 20px,
+ linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px / 20px,
+ linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px / 20px,
+ linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px / 20px,
+ linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px,
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424)
0 0 / 20px #131313;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -338,40 +298,24 @@
-moz-linear-gradient(295deg, #C90032 10px, transparent 10px),
-moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
-moz-linear-gradient(295deg, #C90032 10px, transparent 10px);
-background-image: -ms-linear-gradient(115deg, #C90032 23px, transparent 23px),
- -ms-linear-gradient(295deg, #C90032 23px, transparent 23px),
- -ms-linear-gradient(115deg, #C90032 23px, transparent 23px),
- -ms-linear-gradient(295deg, #C90032 23px, transparent 23px),
- -ms-linear-gradient(115deg, #C90032 10px, transparent 10px),
- -ms-linear-gradient(295deg, #C90032 10px, transparent 10px),
- -ms-linear-gradient(115deg, #C90032 10px, transparent 10px),
- -ms-linear-gradient(295deg, #C90032 10px, transparent 10px);
-background-image: -o-linear-gradient(115deg, #C90032 23px, transparent 23px),
- -o-linear-gradient(295deg, #C90032 23px, transparent 23px),
- -o-linear-gradient(115deg, #C90032 23px, transparent 23px),
- -o-linear-gradient(295deg, #C90032 23px, transparent 23px),
- -o-linear-gradient(115deg, #C90032 10px, transparent 10px),
- -o-linear-gradient(295deg, #C90032 10px, transparent 10px),
- -o-linear-gradient(115deg, #C90032 10px, transparent 10px),
- -o-linear-gradient(295deg, #C90032 10px, transparent 10px);
-background-image: linear-gradient(115deg, #C90032 23px, transparent 23px),
- linear-gradient(295deg, #C90032 23px, transparent 23px),
- linear-gradient(115deg, #C90032 23px, transparent 23px),
- linear-gradient(295deg, #C90032 23px, transparent 23px),
- linear-gradient(115deg, #C90032 10px, transparent 10px),
- linear-gradient(295deg, #C90032 10px, transparent 10px),
- linear-gradient(115deg, #C90032 10px, transparent 10px),
- linear-gradient(295deg, #C90032 10px, transparent 10px);
--pie-background: linear-gradient(115deg, #C90032 23px, transparent 23px) 0 2px / 58px,
- linear-gradient(295deg, #C90032 23px, transparent 23px) 4px 35px / 58px,
- linear-gradient(115deg, #C90032 23px, transparent 23px) 29px 31px / 58px,
- linear-gradient(295deg, #C90032 23px, transparent 23px) 33px 6px / 58px,
- linear-gradient(115deg, #C90032 10px, transparent 10px) 0 36px / 58px,
- linear-gradient(295deg, #C90032 10px, transparent 10px) 4px 2px / 58px,
- linear-gradient(115deg, #C90032 10px, transparent 10px) 29px 6px / 58px,
- linear-gradient(295deg, #C90032 10px, transparent 10px) 33px 30px / 58px,
+background-image: linear-gradient(335deg, #C90032 23px, transparent 23px),
+ linear-gradient(155deg, #C90032 23px, transparent 23px),
+ linear-gradient(335deg, #C90032 23px, transparent 23px),
+ linear-gradient(155deg, #C90032 23px, transparent 23px),
+ linear-gradient(335deg, #C90032 10px, transparent 10px),
+ linear-gradient(155deg, #C90032 10px, transparent 10px),
+ linear-gradient(335deg, #C90032 10px, transparent 10px),
+ linear-gradient(155deg, #C90032 10px, transparent 10px);
+-pie-background: linear-gradient(335deg, #C90032 23px, transparent 23px) 0 2px / 58px,
+ linear-gradient(155deg, #C90032 23px, transparent 23px) 4px 35px / 58px,
+ linear-gradient(335deg, #C90032 23px, transparent 23px) 29px 31px / 58px,
+ linear-gradient(155deg, #C90032 23px, transparent 23px) 33px 6px / 58px,
+ linear-gradient(335deg, #C90032 10px, transparent 10px) 0 36px / 58px,
+ linear-gradient(155deg, #C90032 10px, transparent 10px) 4px 2px / 58px,
+ linear-gradient(335deg, #C90032 10px, transparent 10px) 29px 6px / 58px,
+ linear-gradient(155deg, #C90032 10px, transparent 10px) 33px 30px / 58px,
#FF7D9D;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -402,58 +346,34 @@
-moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
-moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
-moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
-background: -ms-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
- -ms-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
- -ms-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
- -ms-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
- -ms-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
- -ms-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
- -ms-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
- -ms-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
- -ms-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
- -ms-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
- -ms-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
- -ms-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
-background: -o-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
- -o-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
- -o-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
- -o-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
- -o-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
- -o-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
- -o-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
- -o-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
- -o-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
- -o-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
- -o-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
- -o-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
-background: linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
- linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
- linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
- linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
- linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
- linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
- linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
- linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
- linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
- linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
- linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
- linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
+background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px,
+ linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px,
+ linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
+ linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
+ linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
+ linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
+ linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px,
+ linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px,
+ linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
+ linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
+ linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
+ linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;
--pie-background: linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px / 100px,
- linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px / 100px,
- linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px / 100px,
- linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px / 100px,
- linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px / 100px,
- linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px / 100px,
- linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px / 100px,
- linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px / 100px,
- linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px / 100px,
- linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px / 100px,
- linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px / 100px,
- linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px / 100px,
+-pie-background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px / 100px,
+ linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px / 100px,
+ linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px / 100px,
+ linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px / 100px,
+ linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px / 100px,
+ linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px / 100px,
+ linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px / 100px,
+ linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px / 100px,
+ linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px / 100px,
+ linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px / 100px,
+ linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px / 100px,
+ linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px / 100px
#232927;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -471,24 +391,16 @@
-moz-linear-gradient(295deg, #d00 23px, transparent 23px),
-moz-linear-gradient(115deg, #b00 23px, transparent 23px),
-moz-linear-gradient(295deg, #d00 23px, transparent 23px);
-background-image: -ms-linear-gradient(115deg, #b00 23px, transparent 23px),
- -ms-linear-gradient(295deg, #d00 23px, transparent 23px),
- -ms-linear-gradient(115deg, #b00 23px, transparent 23px),
- -ms-linear-gradient(295deg, #d00 23px, transparent 23px);
-background-image: -o-linear-gradient(115deg, #b00 23px, transparent 23px),
- -o-linear-gradient(295deg, #d00 23px, transparent 23px),
- -o-linear-gradient(115deg, #b00 23px, transparent 23px),
- -o-linear-gradient(295deg, #d00 23px, transparent 23px);
-background-image: linear-gradient(115deg, #b00 23px, transparent 23px),
- linear-gradient(295deg, #d00 23px, transparent 23px),
- linear-gradient(115deg, #b00 23px, transparent 23px),
- linear-gradient(295deg, #d00 23px, transparent 23px);
--pie-background: linear-gradient(115deg, #b00 23px, transparent 23px) 0 2px / 58px,
- linear-gradient(295deg, #d00 23px, transparent 23px) 4px 35px / 58px,
- linear-gradient(115deg, #b00 23px, transparent 23px) 29px 31px / 58px,
- linear-gradient(295deg, #d00 23px, transparent 23px) 34px 6px / 58px,
+background-image: linear-gradient(335deg, #b00 23px, transparent 23px) 0 2px,
+ linear-gradient(155deg, #d00 23px, transparent 23px) 4px 35px,
+ linear-gradient(335deg, #b00 23px, transparent 23px) 29px 31px,
+ linear-gradient(155deg, #d00 23px, transparent 23px) 34px 6px;
+-pie-background: linear-gradient(335deg, #b00 23px, transparent 23px) 0 2px / 58px,
+ linear-gradient(155deg, #d00 23px, transparent 23px) 4px 35px / 58px,
+ linear-gradient(335deg, #b00 23px, transparent 23px) 29px 31px / 58px,
+ linear-gradient(155deg, #d00 23px, transparent 23px) 34px 6px / 58px,
silver;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -510,32 +422,20 @@
-moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
-moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
-moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
-background-image: -ms-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -ms-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -ms-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -ms-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -ms-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
- -ms-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
-background-image: -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -o-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -o-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
- -o-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
-background-image: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
- linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
- linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
--pie-background: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px,
- linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px,
- linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px,
- linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px,
- linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 0 0 / 80px 140px,
- linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 40px 70px / 80px 140px,
+background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0,
+ linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0,
+ linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px,
+ linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px,
+ linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 0 0,
+ linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 40px 70px / 80px 140px;
+-pie-background: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px,
+ linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px,
+ linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px,
+ linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px,
+ linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 0 0 / 80px 140px,
+ linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 40px 70px / 80px 140px,
#556;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -548,15 +448,11 @@
-webkit-linear-gradient(#eee .05em, transparent .05em);
background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-moz-linear-gradient(#eee .05em, transparent .05em);
-background-image: -ms-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
- -ms-linear-gradient(#eee .05em, transparent .05em);
-background-image: -o-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
- -o-linear-gradient(#eee .05em, transparent .05em);
-background-image: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
+background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .05em, transparent .05em);
--pie-background: linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em,
+-pie-background: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em,
linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -574,24 +470,16 @@
-moz-linear-gradient(0, white 2px, transparent 2px),
-moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
-background-image: -ms-linear-gradient(white 2px, transparent 2px),
- -ms-linear-gradient(0, white 2px, transparent 2px),
- -ms-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
- -ms-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
-background-image: -o-linear-gradient(white 2px, transparent 2px),
- -o-linear-gradient(0, white 2px, transparent 2px),
- -o-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
- -o-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-image: linear-gradient(white 2px, transparent 2px),
- linear-gradient(0, white 2px, transparent 2px),
+ linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
- linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
+ linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
-pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px,
- linear-gradient(0, white 2px, transparent 2px) -2px -2px / 100px,
+ linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px,
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
- linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
+ linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
#269;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<li>
@@ -608,24 +496,16 @@
-moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
-moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
-moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
-background-image: -ms-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
- -ms-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
- -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
- -ms-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
-background-image: -o-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
- -o-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
- -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
- -o-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
-background-image: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
- linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
- linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),
- linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
--pie-background: linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%) 0 0 / 13px,
- linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%) 0 0 / 29px,
- linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%) 0 0 / 37px,
- linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%) 0 0 / 53px,
+background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
+ linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
+ linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
+ linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
+-pie-background: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%) 0 0 / 13px,
+ linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%) 0 0 / 29px,
+ linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%) 0 0 / 37px,
+ linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%) 0 0 / 53px,
#026873;
-behavior: url(/PIE.htc);</code></pre>
+behavior: url(/pie/PIE.htc);</code></pre>
</li>
<!-- End patterns from http://leaverou.me/css3patterns/ -->
Please sign in to comment.
Something went wrong with that request. Please try again.