0

background-blend-modeプロパティによるCSSグラデーションの可能性が今後広がるかも…

background-blend-modeプロパティによるCSSグラデーションの可能性が今後広がるかも...

背景パターンを作成する際、今まではIllustratorやPhotoshopを用いて背景となるパターン画像を作成し、backgroundとしてリピートさせていましたが、CSS3の新たなプロパティである「background-blend-mode」の「乗算・スクリーン・オーバーレイ」などを利用して「色・イメージ・グラデーション」などをブレンドさせることで画像をリピートさせるよりも表示速度を速くすることが可能になります。GoogleChrome、Firefox、Operaなどでは正常に描画されますが、IEやSafariは現在未対応なので、背景画像としてリピートさせる記述をしてカバーしておきましょう。

 

Bennett Feelyさんが、CSSで表現された背景をいくつか紹介してくれていますので気に入ったものがあれば利用してみてください。

blend-css

 

◆ 使い方は簡単です。

例えばこちらの背景を利用したい場合、CSSボタンをクリックします。

blend-css2

すると、画面上にCSSコードが書き出されます。

blend-css3

そのCSSコードを、そのまま自身のCSSにコピー&ペーストすればOKです。

 

 デモサンプル

 

このように、今後まだまだ発展していくであろうCSSにしっかりと付いていきたいものです。

 




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > background-blend-modeプロパティによるCSSグラデーションの可能性が今後広がるかも…