封筒のスタイリング
それでは、CSSでエアメール封筒風のスタイリングをしていきましょう。
repeating-radial-gradient()関数を使って斜線を作る
エアメール風の封筒を縁取る赤、青、白の斜線は、CSS3のrepeating-linear-gradient()関数を使って実装しています。
ここでの構文は次のようになっています。第1引数に斜線の角度を指定し、その後は斜線を作る色とその色の始点と終点を続けて指定していきます。それぞれの色の始点と終点は、グラデーションの開始位置からの距離を指定します。色は何色でも指定でき、色の指定が終わった所で、再び最初に指定した色から繰り返されます。
repeating-linear-gradient(斜線の角度, 色1, 色1 終点, 色2 始点,色2 終点, 色3 始点, 色3 終点, 色4 始点,色4終点);
実際のコードは次のとおりです。-45度方向（-45deg）に軸を伸ばし、赤（#cc0000）で始まり30pxで終わり、30pxから透明（transparent）になり50pxで終わり、50pxから青（#0000cc）になり80pxで終わり、80pxから透明になり100pxで終わるグラデーションの繰り返しという指定になります。
#sample {
margin:50px auto;
width:600px;
padding:10px;
background-image:repeating-linear-gradient(-45deg, #cc0000, #cc0000 30px, transparent 30px, transparent 50px,#0000cc 50px, #0000cc 80px,transparent 80px, transparent 100px),url(bg.png);
}
複数の背景を指定
CSS3では要素に複数の背景を適用できます。複数の背景は、各レイヤーをカンマで区切って指定します。最初に指定した背景が最前面、最後に指定した背景が最も奥のレイヤーになるように、重ねて描画されます。
サンプルでは、斜線の指定の後、カンマで区切って、url(bg.png)を指定しています。
#sample {
～中略～
background-image:repeating-linear-gradient(-45deg, #cc0000, #cc0000 30px, transparent 30px, transparent 50px,#0000cc 50px, #0000cc 80px,transparent 80px, transparent 100px),url(bg.png);
}
続いて、CSS3のborder-radiusプロパティで8pxの角丸を指定、box-shadowで水平方向に0、垂直方向に1px、6pxのぼかしでグレー（#333）のドロップシャドウを指定します。
#sample {
～中略～
border-radius:8px;
box-shadow:0 1px 6px #333;
}
ここまでで、次のようになります。
背景を仕上げる
#sampleのdivボックスには、斜線背景を指定しました。この上に、さらに背景画像（bg.png）を重ねます。#sampleの中のform要素に背景画像を指定します。
form {
background:url(bg.png);
padding: 30px;
}
#sampleのdivボックスには、10pxのpaddingを指定しているため、10px幅の斜線が表示されます。斜線の幅を大きくしたい場合には、#sampleのpadding幅を大きくします。
ここまでで、次のようになります。
