CSS3のみで色々な背景パターンを描画する

CSS3 で複雑なパターンを描画できるようになりました。
基本の組み合わせてとてもいろいろなパターンが実現できて面白いのでやってみましょう。

background-image に，gradient() を指定するとグラデーションを実現できます．
現状では，webkit, moz で指定方法が異なります． webkit のほうが面倒ですね．webkit の書式は変更するとか何とか．．．

.rainbow {
  background-image: -moz-linear-gradient(left, red, orange, yellow, green, blue, navy, purple);
  background: -webkit-gradient(linear, left top, right top, from(red), color-stop(.14, orange), color-stop(.28, yellow), color-stop(.42, green), color-stop(.56, blue), color-stop(.68, navy), to(purple));
}

rgba() を用いると透明度を設定することができます．

rgba(<red>, <green>, <blue>, <alphavalue>);
ただし，red, green, blue は 0-255 の値，alphavalue は 0-1 の値．

これを利用して，background-color で設定した色を background-image に重ねることができます．

たとえば，これらに

これを重ねると，

.gradation {
  background-image: -moz-linear-gradient(top, rgba( 0, 0, 0, .5), rgba(255,255,255, .5));
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 0, 0, 0, .5)), to(rgba(255,255,255, .5)));
}

こうなります．

最初から赤や緑のなどのグラデーションを用意しておけば良いように思えますが，半透明のグラデーションなりのスタイルを用意しておくだけで，使い回しが効くので便利です．

CSS3 では，background-image には，複数の画像を指定できるようになりました．

background-image: url(a.png), url(b.png), url(c.png)

ここには，もちろん gradient() も指定できます．

たとえば，次の3種類のグラデーションを，

.red {
  background-image: -moz-linear-gradient(top left, rgba(255, 0, 0, .5), rgba(255,255,255,.1));
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, .5)), to(rgba(255,255,255,.1)));
}
.green {
  background-image: -moz-linear-gradient(top right, rgba( 0,255, 0, .5), rgba(255,255,255,.1));
  background-image: -webkit-gradient(linear, right top, left top, from(rgba( 0,255, 0, .5)), to(rgba(255,255,255,.1)));
}
.blue {
  background-image: -moz-linear-gradient(top, rgba( 0, 0,255, .5), rgba(255,255,255,.1));
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba( 0, 0,255, .5)), to(rgba(255,255,255,.1)));
}

すべて混ぜると，次のようになります．

すべてのグラデーションが混ざっているのが分かるでしょうか．

.mixes {
  background-image: -moz-linear-gradient(top left, rgba(255, 0, 0, .5), rgba(255,255,255,.1)),
                    -moz-linear-gradient(top right, rgba( 0,255, 0, .5), rgba(255,255,255,.1)),
                    -moz-linear-gradient(top, rgba( 0, 0,255, .5), rgba(255,255,255,.1));
  background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 0, 0, .5)), to(rgba(255,255,255,.1))),
                    -webkit-gradient(linear, right top, left top, from(rgba( 0,255, 0, .5)), to(rgba(255,255,255,.1))),
                    -webkit-gradient(linear, left top, left bottom, from(rgba( 0, 0,255, .5)), to(rgba(255,255,255,.1)));
}

また，gradient の指定を工夫すると，このようなパターンを作ることができます．

.stripe {
  background-image: -moz-linear-gradient(left, transparent, transparent 50%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.5) 100%);
  background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(.5, transparent), color-stop(.5, rgba(0,0,0,.5)), to(rgba(0,0,0,.5)));
}

これに加えて，background-size を指定すると，次のような効果が得られます．

-moz-background-size: 2px 2px;
-webkit-background-size: 2px 2px;
background-size: 2px 2px;

-moz-background-size: 5px 5px;
-webkit-background-size: 5px 5px;
background-size: 5px 5px;

-moz-background-size: 20px 20px;
-webkit-background-size: 20px 20px;
background-size: 20px 20px;

これまでの要領でごにょごにょすれば，よく見かける次のような効果を作り出すことができます．
あとは，角度をつけたり，組み合わせたりするだけなので，基本的なところができてしまえば比較的簡単にできます．