Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
332 lines (294 sloc) 20.9 KB
<!DOCTYPE HTML>
<html>
<head>
<title>Stripes &amp; other patterns with CSS3 &mdash; no images</title>
<style>
body {
font-family: Georgia, serif;
}
.footer {
text-align: center;
clear: both;
padding-top: .5em;
border-top: 1px solid #ccc;
font-variant: small-caps;
}
</style>
</head>
<body>
<div id="simplePatterns">
<h1>Stripes &amp; other patterns with CSS3 &mdash; no images</h1>
<style type="text/css">
.stripes {
height: 250px;
width: 375px;
float: left;
margin: 10px;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px; /* Controls the size of the stripes */
-moz-box-shadow: 1px 1px 8px gray;
-webkit-box-shadow: 1px 1px 8px gray;
box-shadow: 1px 1px 8px gray;
behavior: url(../build/PIE.htc);
}
.angled {
background-color: #ac0;
background-image: -webkit-gradient(linear, 0 100%, 100% 0,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
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;
}
.angled-135 {
background-color: #c16;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),
to(transparent));
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(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(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;
}
.horizontal {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
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 50px #0ae;
}
.vertical {
background-color: #f90;
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
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: -ms-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
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;
}
.checkered {
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image: -webkit-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-webkit-linear-gradient(45deg, transparent 75%, #555 75%),
-webkit-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-moz-linear-gradient(45deg, transparent 75%, #555 75%),
-moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -ms-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-ms-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-ms-linear-gradient(45deg, transparent 75%, #555 75%),
-ms-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
-o-linear-gradient(45deg, transparent 75%, #555 75%),
-o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),
linear-gradient(135deg, #555 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #555 75%),
linear-gradient(135deg, transparent 75%, #555 75%);
-pie-background: linear-gradient(45deg, #555 25%, transparent 25%, transparent) 0 0 / 50px 50px,
linear-gradient(135deg, #555 25%, transparent 25%, transparent) 0 0 / 50px 50px,
linear-gradient(45deg, transparent 75%, #555 75%) 0 0 / 50px 50px,
linear-gradient(135deg, transparent 75%, #555 75%) 0 0 / 50px 50px;
}
.picnic {
background-color:white;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
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(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(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px white;
}
</style>
<div class="horizontal stripes"></div>
<div class="vertical stripes"></div>
<div class="picnic stripes"></div>
<div class="angled stripes"></div>
<div class="angled-135 stripes"></div>
<div class="checkered stripes"></div>
<p class="footer">By <a href="http://leaverou.me">Lea Verou</a>
&bull; From post <a href="http://leaverou.me/2010/12/checkered-stripes-other-background-patterns-with-css3-gradients/">Checkerboard, striped &amp; other background patterns with CSS3 gradients</a>
</p>
</div>
<div id="patternGallery">
<h1>CSS3 Pattern Gallery</h1>
<style type="text/css">
#patternGallery li {
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
border-radius: 150px;
float: left;
width: 300px;
height: 300px;
list-style: none;
margin: 40px;
position: relative;
behavior: url(../build/PIE.htc);
}
</style>
<ul>
<li data-bg="
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
" title="Carbon" data-author="Atle Mo (design), S�bastien Grosjean (code)" data-author-url="http://www.zencocoon.com/"></li>
<li data-bg="
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
" title="Steps" data-author="Nicolas Gallagher" data-author-url="http://nicolasgallagher.com/"></li>
<li data-bg="
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
" title="Stars" data-author="Nicolas Gallagher" data-author-url="http://nicolasgallagher.com/"></li>
<li data-bg="
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
" title="Bricks" data-author="Tab Atkins Jr" data-author-url="http://www.xanthir.com/blog/"></li>
<li data-bg="
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
" title="Japanese cube"></li>
<li data-bg="
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
" title="Checkerboard"></li>
<li data-bg="
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
" title="Diagonal checkerboard"></li>
<li data-bg="
linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em,
linear-gradient(#eee .1em, transparent .1em) 0 0 / 100% 1.2em,
#FFF
" title="Lined paper" data-author="Sarah Backhouse" data-author-url="http://www.jadu.net"></li>
<li data-bg="
linear-gradient(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(90deg, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px,
#269
" title="Blueprint grid"></li>
<li data-bg="
linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%) 0 0 / 50px,
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%) 0 0 / 50px,
white
" title="Tablecloth"></li>
<li data-bg="
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
" title="Cicada stripes" data-author="Randy Merrill" data-author-url="http://forthedeveloper.com/"></li>
<li data-bg="
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%) gray 0 0 / 50px
" title="Vertical stripes"></li>
<li data-bg="
linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%) gray 0 0 / 50px
" title="Horizontal stripes"></li>
</ul>
<p class="footer">From Lea Verou's <a href="http://leaverou.me/css3patterns/">CSS3 Pattern Gallery</a></p>
<script>
(function() {
var lis = document.querySelectorAll('#patternGallery li'),
i = 0, len = lis.length,
li, bg, css;
for(; i < len; i++) {
li = lis[i];
bg = li.getAttribute('data-bg').replace(/\s+/g, ' ');
css = 'background: ' + bg +
'; background: ' + bg.replace(/linear-gradient/g, '-webkit-linear-gradient') +
'; background: ' + bg.replace(/linear-gradient/g, '-moz-linear-gradient') +
'; background: ' + bg.replace(/linear-gradient/g, '-ms-linear-gradient') +
'; background: ' + bg.replace(/linear-gradient/g, '-o-linear-gradient') +
'; -pie-background: ' + bg;
li.style.cssText = css;
}
})();
</script>
</div>
</body>
</html>
You can’t perform that action at this time.