Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add gradient patterns site demo

  • Loading branch information...
commit 5424e71f40ee63f3e5a015d1f6da81fd5570d5ed 1 parent 401e817
Jason Johnston authored
Showing with 646 additions and 0 deletions.
  1. +646 −0 demos/gradient-patterns.html
View
646 demos/gradient-patterns.html
@@ -0,0 +1,646 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+ <title>CSS3 PIE Demo: Buttons</title>
+
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
+ <!--[if lt IE 9]>
+ <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+
+
+
+ <style type="text/css">
+
+ /* Page styles */
+
+ body {
+ font-size: 12px;
+ font-family: sans-serif;
+ }
+
+
+
+
+ .nonIE {
+ color: #C00;
+ }
+
+ #patternGallery {
+ margin: 0;
+ padding: 0;
+ }
+
+ #patternGallery li {
+ display: block;
+ list-style: none;
+ clear: both;
+ margin: 0;
+ padding: 20px 0;
+ border-top: 1px solid #ccc;
+ }
+
+ #patternGallery .demo {
+ -webkit-border-radius: 25%;
+ -moz-border-radius: 25%;
+ border-radius: 25%;
+ -moz-box-shadow: 0 1px 8px #666;
+ -webkit-box-shadow: 0 1px 8px #666;
+ box-shadow: 0 1px 8px #666;
+ float: right;
+ width: 200px;
+ height: 200px;
+ list-style: none;
+ margin: 10px 10px 10px 30px;
+ position: relative;
+ behavior: url(../build/PIE.htc);
+ }
+
+ #patternGallery h2 {
+ margin: 0;
+ }
+
+ #patternGallery h3 {
+ color: #666;
+ margin: 0;
+ font-size: 1em;
+ }
+
+ #patternGallery p {
+ margin: 0 0 1.5em;
+ }
+
+ #patternGallery pre {
+ margin: 0 240px 0 0;
+ max-height: 250px;
+ overflow: auto;
+ background: #eee;
+ border: 1px solid #ccc;
+ padding: .5em 1em;
+ }
+
+ </style>
+
+ <style type="text/css" id="dynamicStyle">
+
+ </style>
+
+</head>
+<body>
+
+
+ <h1>PIE Demo: CSS3 Gradient Patterns</h1>
+
+
+ <!-- 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
+ 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
+ sizing/positioning of linear-gradient as a tiled background.</p>
+
+
+ <ul id="patternGallery">
+ <!-- Begin patterns from http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ -->
+
+ <li>
+ <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;
+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>
+ </li>
+
+ <li>
+ <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;
+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>
+ </li>
+
+ <li>
+ <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;
+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));
+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));
+-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>
+ </li>
+
+ <li>
+ <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;
+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%,
+ transparent 75%, transparent);
+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>
+ </li>
+
+ <li>
+ <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;
+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%,
+ transparent 75%, transparent);
+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, #c16;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <!-- End patterns from http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/ -->
+
+
+
+
+
+ <!-- Begin patterns from http://leaverou.me/css3patterns/ -->
+
+ <li>
+ <h2>Checkerboard</h2>
+ <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
+ <h3>CSS Code:</h3>
+<pre><code>background-color: #eee;
+background-size: 60px 60px;
+background-position: 0 0, 30px 30px;
+background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
+ -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>
+ </li>
+
+ <li>
+ <h2>Diagonal checkerboard</h2>
+ <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
+ <h3>CSS Code:</h3>
+<pre><code>background-color: #eee;
+background-size: 60px 60px;
+background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
+ -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) 0 0 / 60px,
+ #eee;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <li>
+ <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>
+ <h3>CSS Code:</h3>
+<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(63deg, #222 5px, transparent 5px) 0px 10px,
+ -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px,
+ -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px),
+ -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
+background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px,
+ -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px,
+ -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px,
+ -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),
+ 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,
+ 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>
+ </li>
+
+ <li>
+ <h2>Steps</h2>
+ <p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
+ <h3>CSS Code:</h3>
+<pre><code>background-color: #FF7D9D;
+background-size: 58px 58px;
+background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
+ 0px 36px, 4px 2px, 29px 6px, 33px 30px;
+background-image: -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
+ -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
+ -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px),
+ -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px),
+ -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
+ -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px),
+ -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px),
+ -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px);
+background-image: -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
+ -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
+ -moz-linear-gradient(115deg, #C90032 23px, transparent 23px),
+ -moz-linear-gradient(295deg, #C90032 23px, transparent 23px),
+ -moz-linear-gradient(115deg, #C90032 10px, transparent 10px),
+ -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,
+ #FF7D9D;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <li>
+ <h2>Stars</h2>
+ <p>Created by <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
+ <h3>CSS Code:</h3>
+<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( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
+ -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
+ -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
+ -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
+ -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
+ -webkit-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
+ -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
+ -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
+ -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
+ -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
+background: -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px,
+ -moz-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px,
+ -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
+ -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
+ -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
+ -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
+ -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px,
+ -moz-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px,
+ -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
+ -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-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,
+ #232927;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <li>
+ <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>
+ <h3>CSS Code:</h3>
+<pre><code>background-color: silver;
+background-size: 58px 58px;
+background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
+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);
+background-image: -moz-linear-gradient(115deg, #b00 23px, transparent 23px),
+ -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,
+ silver;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <li>
+ <h2>Japanese cube</h2>
+ <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
+ <h3>CSS Code:</h3>
+<pre><code>background-color:#556;
+background-size: 80px 140px;
+background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
+background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+ -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+ -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+ -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+ -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
+ -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
+background-image: -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+ -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+ -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
+ -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,
+ #556;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <li>
+ <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>
+ <h3>CSS Code:</h3>
+<pre><code>background-color: #fff;
+background-size: 100% 1.2em;
+background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
+ -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),
+ linear-gradient(#eee .05em, transparent .05em);
+-pie-background: linear-gradient(0deg, 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>
+ </li>
+
+ <li>
+ <h2>Blueprint grid</h2>
+ <p>Created by <a href="http://leaverou.me/">Lea Verou</a> <a href="http://leaverou.me/css3patterns/">(source)</a></p>
+ <h3>CSS Code:</h3>
+<pre><code>background-color: #269;
+background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
+background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+background-image: -webkit-linear-gradient(white 2px, transparent 2px),
+ -webkit-linear-gradient(0, white 2px, transparent 2px),
+ -webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
+ -webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
+background-image: -moz-linear-gradient(white 2px, transparent 2px),
+ -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(rgba(255,255,255,.3) 1px, transparent 1px),
+ linear-gradient(0, 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(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,
+ #269;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <li>
+ <h2>Cicada stripes</h2>
+ <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-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%),
+ -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%);
+background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%),
+ -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,
+ #026873;
+behavior: url(/PIE.htc);</code></pre>
+ </li>
+
+ <!-- End patterns from http://leaverou.me/css3patterns/ -->
+ </ul>
+
+ <!-- noformat off -->
+
+ <script>
+ $(function() {
+ $('#patternGallery>li').each(function() {
+ $('<div class="demo" style="' + $('code', this).text() + '"/>').prependTo(this);
+ });
+ });
+ </script>
+
+</body>
+</html>
+
Please sign in to comment.
Something went wrong with that request. Please try again.