背景パターンを作成する際、今まではIllustratorやPhotoshopを用いて背景となるパターン画像を作成し、backgroundとしてリピートさせていましたが、CSS3の新たなプロパティである「background-blend-mode」の「乗算・スクリーン・オーバーレイ」などを利用して「色・イメージ・グラデーション」などをブレンドさせることで画像をリピートさせるよりも表示速度を速くすることが可能になります。GoogleChrome、Firefox、Operaなどでは正常に描画されますが、IEやSafariは現在未対応なので、背景画像としてリピートさせる記述をしてカバーしておきましょう。
Bennett Feelyさんが、CSSで表現された背景をいくつか紹介してくれていますので気に入ったものがあれば利用してみてください。
◆ 使い方は簡単です。
例えばこちらの背景を利用したい場合、CSSボタンをクリックします。
すると、画面上にCSSコードが書き出されます。
そのCSSコードを、そのまま自身のCSSにコピー＆ペーストすればＯＫです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
html { height: 100%; background: url(../images/bg.png) repeat; background: repeating-linear-gradient( 45deg, transparent, transparent 1em, moccasin 0, moccasin 2em, transparent 0, transparent 3em, powderblue 0, powderblue 4em, transparent 0, transparent 5em, lavender 0, lavender 6em, transparent 0, transparent 7em, beige 0, beige 8em ), repeating-linear-gradient( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, transparent 0, transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, peachpuff 0, peachpuff 6em ), whitesmoke; background-blend-mode: multiply; } |
このように、今後まだまだ発展していくであろうCSSにしっかりと付いていきたいものです。