Permalink
Browse files

Merge branch 'master' of github.com:lojjic/PIE

  • Loading branch information...
2 parents 454487d + ebdc675 commit 89769ea9d4a7a5bd028ee55fb3ea282bba8b0b8b Jason Johnston committed Dec 25, 2011
Showing with 6 additions and 7 deletions.
  1. +6 −7 demos/gradient-patterns.html
View
13 demos/gradient-patterns.html
@@ -98,7 +98,6 @@
<!-- noformat on -->
-
<p>The background patterns in this demo are created using nothing but CSS3 linear-gradients that are tiled.
The patterns below are borrowed (with slight modifications) from Lea Verou's <a href="http://leaverou.me/css3patterns/">CSS3 Patterns Gallery</a>
and from her original <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">post
@@ -115,7 +114,7 @@
<h2>Horizontal Stripes</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3>
-<pre><code>background-size: 50px;
+<pre><code>background-size: 50px 50px;
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);
@@ -130,7 +129,7 @@
<h2>Vertical Stripes</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3>
-<pre><code>background-size: 50px;
+<pre><code>background-size: 50px 50px;
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);
@@ -145,7 +144,7 @@
<h2>Picnic</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3>
-<pre><code>background-size: 50px;
+<pre><code>background-size: 50px 50px;
background-color: white;
background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
-webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
@@ -166,7 +165,7 @@
<h2>Angled</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3>
-<pre><code>background-size: 50px;
+<pre><code>background-size: 50px 50px;
background-color: #ac0;
background-image: -webkit-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%,
@@ -193,7 +192,7 @@
<h2>Angled 135</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3>
-<pre><code>background-size: 50px;
+<pre><code>background-size: 50px 50px;
background-color: #c16;
background-image: -webkit-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%,
@@ -600,7 +599,7 @@
<p>Created by <a href="http://forthedeveloper.com/">Randy Merrill</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3>
<pre><code>background-color: #026873;
-background-size: 13px, 29px, 37px, 53px;
+background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
-webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%),
-webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%),

0 comments on commit 89769ea

Please sign in to comment.