Skip to content
This repository has been archived by the owner on Apr 20, 2023. It is now read-only.

Commit

Permalink
Fix Lea Verou's domain name
Browse files Browse the repository at this point in the history
  • Loading branch information
@lojjic
lojjic committed Jul 3, 2014
1 parent 919368f commit f89a707
Showing 1 changed file with 21 additions and 21 deletions.
42 changes: 21 additions & 21 deletions demos/gradient-patterns.html
View file
Expand Up @@ -99,20 +99,20 @@ <h1>PIE Demo: CSS3 Gradient Patterns</h1>
<!-- noformat on --> <!-- noformat on -->


<p>The background patterns in this demo are created using nothing but CSS3 linear-gradients that are tiled. <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> The patterns below are borrowed (with slight modifications) from Lea Verou's <a href="http://lea.verou.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 and from her original <a href="http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">post
on the topic of building patterns</a> with gradients.</p> on the topic of building patterns</a> with gradients.</p>


<p>These demos work properly in IE 9 thanks to PIE. They do not work in IE 6-8 due to lack of support for <p>These demos work properly in IE 9 thanks to PIE. They do not work in IE 6-8 due to lack of support for
sizing/positioning of linear-gradient as a tiled background.</p> sizing/positioning of linear-gradient as a tiled background.</p>




<ul id="patternGallery"> <ul id="patternGallery">
<!-- Begin patterns from http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ --> <!-- Begin patterns from http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ -->


<li> <li>
<h2>Horizontal Stripes</h2> <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> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-size: 50px 50px; <pre><code>background-size: 50px 50px;
background-color: #0ae; background-color: #0ae;
Expand All @@ -125,7 +125,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Vertical Stripes</h2> <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> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-size: 50px 50px; <pre><code>background-size: 50px 50px;
background-color: #f90; background-color: #f90;
Expand All @@ -138,7 +138,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Picnic</h2> <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> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-size: 50px 50px; <pre><code>background-size: 50px 50px;
background-color: white; background-color: white;
Expand All @@ -155,7 +155,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Angled</h2> <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> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-size: 50px 50px; <pre><code>background-size: 50px 50px;
background-color: #ac0; background-color: #ac0;
Expand All @@ -176,7 +176,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Angled 135</h2> <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> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-size: 50px 50px; <pre><code>background-size: 50px 50px;
background-color: #c16; background-color: #c16;
Expand All @@ -195,17 +195,17 @@ <h3>CSS Code:</h3>
behavior: url(/pie/PIE.htc);</code></pre> behavior: url(/pie/PIE.htc);</code></pre>
</li> </li>


<!-- End patterns from http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ --> <!-- End patterns from http://lea.verou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ -->










<!-- Begin patterns from http://leaverou.me/css3patterns/ --> <!-- Begin patterns from http://lea.verou.me/css3patterns/ -->


<li> <li>
<h2>Checkerboard</h2> <h2>Checkerboard</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color: #eee; <pre><code>background-color: #eee;
background-size: 60px 60px; background-size: 60px 60px;
Expand All @@ -224,7 +224,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Diagonal checkerboard</h2> <h2>Diagonal checkerboard</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color: #eee; <pre><code>background-color: #eee;
background-size: 60px 60px; background-size: 60px 60px;
Expand All @@ -242,7 +242,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Carbon</h2> <h2>Carbon</h2>
<p>Created by <a href="http://www.zencocoon.com/">Atle Mo (design), Sébastien Grosjean (code)</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://www.zencocoon.com/">Atle Mo (design), Sébastien Grosjean (code)</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, <pre><code>background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
-webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
Expand Down Expand Up @@ -276,7 +276,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Steps</h2> <h2>Steps</h2>
<p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color: #FF7D9D; <pre><code>background-color: #FF7D9D;
background-size: 58px 58px; background-size: 58px 58px;
Expand Down Expand Up @@ -320,7 +320,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Stars</h2> <h2>Stars</h2>
<p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background: -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, <pre><code>background: -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
-webkit-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px, -webkit-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
Expand Down Expand Up @@ -378,7 +378,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Bricks</h2> <h2>Bricks</h2>
<p>Created by <a href="http://www.xanthir.com/blog/">Tab Atkins Jr</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://www.xanthir.com/blog/">Tab Atkins Jr</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color: silver; <pre><code>background-color: silver;
background-size: 58px 58px; background-size: 58px 58px;
Expand All @@ -405,7 +405,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Japanese cube</h2> <h2>Japanese cube</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color:#556; <pre><code>background-color:#556;
background-size: 80px 140px; background-size: 80px 140px;
Expand Down Expand Up @@ -440,7 +440,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Lined paper</h2> <h2>Lined paper</h2>
<p>Created by <a href="http://www.jadu.net">Sarah Backhouse</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://www.jadu.net">Sarah Backhouse</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color: #fff; <pre><code>background-color: #fff;
background-size: 100% 1.2em; background-size: 100% 1.2em;
Expand All @@ -457,7 +457,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Blueprint grid</h2> <h2>Blueprint grid</h2>
<p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://lea.verou.me/">Lea Verou</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color: #269; <pre><code>background-color: #269;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
Expand All @@ -484,7 +484,7 @@ <h3>CSS Code:</h3>


<li> <li>
<h2>Cicada stripes</h2> <h2>Cicada stripes</h2>
<p>Created by <a href="http://forthedeveloper.com/">Randy Merrill</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p> <p>Created by <a href="http://forthedeveloper.com/">Randy Merrill</a> <a href="http://lea.verou.me/css3patterns/">(source)</a></p>
<h3>CSS Code:</h3> <h3>CSS Code:</h3>
<pre><code>background-color: #026873; <pre><code>background-color: #026873;
background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px; background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
Expand All @@ -508,7 +508,7 @@ <h3>CSS Code:</h3>
behavior: url(/pie/PIE.htc);</code></pre> behavior: url(/pie/PIE.htc);</code></pre>
</li> </li>


<!-- End patterns from http://leaverou.me/css3patterns/ --> <!-- End patterns from http://lea.verou.me/css3patterns/ -->
</ul> </ul>


<!-- noformat off --> <!-- noformat off -->
Expand Down

0 comments on commit f89a707

Please sign in to comment.