css3で作る背景パターンサンプル

背景パターンをCSSで作る際、こちらのサイト
【CSS3 Patterns Gallery】
http://lea.verou.me/css3patterns/
を参考にして毎回毎回作っていたのですが、基本パターンを一気に作っておいた方がなにかと便利じゃね？と思い、ずらっと基本背景パターンを14パターン用意してみました。

サンプルhtmlはこちらっす。
http://www.ri-que.com/sample/css-pattern/sample.html

cssのサンプルはこちらっす。

.sample1 {
	background-color: #33CCCC;
	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.2) 50%);
	background-size: 20px 20px;
}
.sample2 {
	background-color: #33CCCC;
	background-image: linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
	background-size: 20px 20px;
}
.sample3 {
	background-color: #33CCCC;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px);
}
.sample4 {
	background-color: #33CCCC;
	background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px);
}
.sample5 {
	background-color: #33CCCC;
	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.2) 50%), linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
	background-size: 20px 20px;
}
.sample6 {
	background-color: #33CCCC;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px), repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.2) 10px, rgba(255,255,255,.2) 20px);
}
.sample7 {
	background-color: #33CCCC;
	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.2) 50%), linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
	background-size: 20px 100px;
}
.sample8 {
	background-color: #33CCCC;
	background-image: linear-gradient(transparent 50%, rgba(255,255,255,.2) 50%), linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
	background-size: 100px 20px;
}
.sample9 {
	background-color: #33CCCC;
	background-image: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px);
}
.sample10 {
	background-color: #33CCCC;
	background-image: repeating-linear-gradient(-45deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px), repeating-linear-gradient(45deg, transparent, transparent 19px, rgba(255,255,255,.3) 1px, rgba(255,255,255,.3) 20px);
}
.sample11 {
	background-color: #33CCCC;
	background-image: linear-gradient(90deg, rgba(255,255,255,.05) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.1) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.15) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
	background-size: 10px, 60px, 20px 60px;
}
.sample12 {
	background-color: #33CCCC;
	background-image: linear-gradient(90deg, rgba(255,255,255,.05) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.1) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.15) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.2) 50%, transparent 50%);
	background-size: 20px, 30px, 40px, 50px;
}
.sample13 {
	background-color:#33CCCC;
	background-image: radial-gradient(rgba(255,255,255,.1) 20%, transparent 20%), radial-gradient(rgba(255,255,255,.1) 20%, transparent 20%);
	background-size:100px 100px;
	background-position: 0 0, 50px 50px;
}
.sample14 {
	background-color:#33CCCC;
	background-image: radial-gradient(rgba(255,255,255,.1) 40%, transparent 40%), radial-gradient(rgba(255,255,255,.1) 20%, transparent 20%);
	background-size:80px 80px;
	background-position: 0 0, 40px 40px;
}

css3は標準の書き方のみ記述し、各ブラウザ対応のベンダープレフィックスはこちらのjavascriptライブラリを利用して対応しています。
【prefixfree.js】
ダウンロードはこちら
http://leaverou.github.io/prefixfree/
prefixfree.jsなかなか便利ですね。

サンプルhtmlのcssは色指定とアルファ変えるだけでも色々応用きくと思うのでちょっとしたデモサイト作る時とか便利だと思いますよー。

どうぞご活用くだされ〜。