css3のgradient関数を使いこなすためのヒント

実はcss3のgradient関数群は非常に使える機能なんです．単に要素の背景にグラデーションをかけるだけではもったい，更に使いこなすためのヒントを紹介します．
実際にパターン敷き詰めに応用してみたものはこちら．

---

css3では次の4つの関数が定義されています．

• linear-gradient
  線形グラデーション．
• radial-gradient
  円形グラデーション．
• repeating-linear-gradient
  繰り返し線形グラデーション．
• repeating-radial-gradient
  繰り返し円形グラデーション．

詳しい使い方は他のまとめサイトを見て頂くこととして，これらの関数はcolor-stop値を適切に指定することで，背景に塗りつぶしやストライプ模様，直線，矩形や円を描くことができます．例を示します．

円形の境界がギザギザしているのが気になる場合は100%の部分を調整する（要素の大きさにも依るが，98〜99%程度に減らす等）ことで目立ちにくくなります．

<div style="background-image: -moz-linear-gradient(blue, blue); 
background-image: -ms-linear-gradient(blue, blue); 
background-image: -o-linear-gradient(blue, blue); 
background-image: -webkit-linear-gradient(blue, blue); 
background-image: linear-gradient(blue, blue); 
border: 1px solid black; display: inline-block; height: 100px; width: 100px;">
</div>

<div style="background-image: -moz-radial-gradient(contain ,red 100% ,white); 
background-image: -ms-radial-gradient(contain ,red 100% ,white); 
background-image: -o-radial-gradient(contain ,red 100% ,white); 
background-image: -webkit-radial-gradient(contain ,red 100% ,white); 
background-image: radial-gradient(contain ,red 100% ,white); 
border: 1px solid black; display: inline-block; height: 100px; width: 100px;">
</div>

<div style="background-image: -moz-linear-gradient(45deg,green 50% ,transparent 50%); 
background-image: -ms-linear-gradient(45deg,green 50% ,transparent 50%); 
background-image: -o-linear-gradient(45deg,green 50% ,transparent 50%); 
background-image: -webkit-linear-gradient(45deg,green 50% ,transparent 50%); 
background-image: linear-gradient(45deg,green 50% ,transparent 50%); 
border: 1px solid black; display: inline-block; height: 100px; width: 100px;">
</div>

<div style="background-image: -moz-linear-gradient(left,orange 50% ,transparent 50%); 
background-image: -ms-linear-gradient(left,orange 50% ,transparent 50%); 
background-image: -o-linear-gradient(left,orange 50% ,transparent 50%); 
background-image: -webkit-linear-gradient(left,orange 50% ,transparent 50%); 
background-image: linear-gradient(left,orange 50% ,transparent 50%); 
border: 1px solid black; display: inline-block; height: 100px; width: 100px;">
</div>

<div style="background-image: -moz-linear-gradient(left,transparent 50%, black 50%,black 51% ,transparent 51%); 
background-image: -ms-linear-gradient(left,transparent 50%, black 50%,black 51% ,transparent 51%); 
background-image: -o-linear-gradient(left,transparent 50%, black 50%,black 51% ,transparent 51%); 
background-image: -webkit-linear-gradient(left,transparent 50%, black 50%,black 51% ,transparent 51%); 
background-image: linear-gradient(left,transparent 50%, black 50%,black 51% ,transparent 51%); 
border: 1px solid black; display: inline-block; height: 100px; width: 100px;">
</div>

注意すべき点としてはいずれの関数も内部的には画像として取り扱われるということです．このことは非常に重要であり，background-size，background-position，background-repeat属性が有効となるという事を表します．即ちgradient関数で生成した画像を任意の場所に配置出来るということです．下の例では生成した円画像の大きさを外枠の50%に設定し敷き詰めています．

<div style="background-image: -moz-radial-gradient(contain ,red 100% ,white);
background-image: -webkit-radial-gradient(contain ,red 98% ,white);
background-image: -o-radial-gradient(contain ,red 98% ,white);
background-image: -ms-radial-gradient(contain ,red 98% ,white);
background-image: radial-gradient(contain ,red 98% ,white); 
background-size: 50% 50%; 
border: 1px solid black; display: inline-block; height: 100px; width: 100px;">
</div>

ここでbackground-image属性はカンマ区切りで複数の画像を指定することができる事を思い出して下さい．gradient関数で生成した画像も通常のpng/jpg画像と同様に扱われます．従ってgradient関数を用いると，矩形や円等を組み合わせた図形を自由に生成出来る事になります．

<div style="
background-image: -moz-radial-gradient(contain ,red 100% ,transparent), 
-moz-linear-gradient(top,transparent 50%, rgba(255,255,100,0.7) 50%), 
-moz-linear-gradient(left,transparent 50%, yellow 50%); 

background-image: -ms-radial-gradient(contain ,red 100% ,transparent), 
-ms-linear-gradient(top,transparent 50%, rgba(255,255,100,0.7) 50%), 
-ms-linear-gradient(left,transparent 50%, yellow 50%);
 
background-image: -o-radial-gradient(contain ,red 100% ,transparent), 
-o-linear-gradient(top,transparent 50%, rgba(255,255,100,0.7) 50%), 
-o-linear-gradient(left,transparent 50%, yellow 50%); 

background-image: -webkit-radial-gradient(contain ,red 100% ,transparent), 
-webkit-linear-gradient(top,transparent 50%, rgba(255,255,100,0.7) 50%), 
-webkit-linear-gradient(left,transparent 50%, yellow 50%); 

background-image: radial-gradient(contain ,red 100% ,transparent), 
linear-gradient(top,transparent 50%, rgba(255,255,100,0.7) 50%), 
linear-gradient(left,transparent 50%, yellow 50%); 

background-position: 0 50px,0 0,0 0; 
background-repeat: repeat-x,repeat,repeat; 
background-size: 20% 20%,25% 25%,50% 50%; 
border: solid 1px black; height: 200px; width: 200px;
">
</div> 

画像の重なり順と，各種プロパティ値の設定に注意して下さい．gradient関数の仕様ではもっと高度なことも出来ることになっていますが，background-size，background-repeat，background-positionと組み合わせることにより，基本的な使い方だけでも様々なパターンの表現が可能となります．

ただお気づきかもしれませんが，現状gradient関数はベンダープレフィクス付きであり，単純なコードを記述しようとしても結構な記述量となってしまいます．従って将来的なメンテナンスを考えると複雑な図形を生成する用途には適さず，あくまで補助的な利用に留めておくことが良い選択だと言えるでしょう．あくまで複雑な背景を設定したいのであれば，これまでどおり別途画像ファイルを用意したほうが処理速度的にもメンテナンス的にも有利だと考えられます．

---

花札っぽい図柄を作ってみた．すすきの部分を作るとなるととんでもないコード量になるので省略．