CSSのBackground-blend-modeを使ったいろいろな背景パターン

PR

最近はCODEPNEでBackground-blend-modeのCSSのプロパティを使った、背景のグラデーションの投稿が賑わっていて、はやりのようです。

いままでのグラデーションだけで作っていた背景よりも、Background-blend-modeを使うことでいろいろな表現が可能になります

 

 

ところでbackground-blend-modeってなんなのか?

オーバーレイとか、差分とか焼きこみとか 画像編集ソフトではお馴染みの機能がありますよね。それがCSSで出来まっせ!というものです

画像編集ソフトをあまり使っていない人にはすこし、チンプンカンプンかも。

 

こちらのbackground-blend-modeを使った効果のデモを見れば少しわかりやすくなるかも

[codepen_embed height=”615″ theme_id=”5706″ slug_hash=”Dbqce” default_tab=”result”]See the Pen <a href=’http://codepen.io/brbcoding/pen/Dbqce/’>Background Blend Modes</a> by Cody Henshaw (<a href=’http://codepen.io/brbcoding’>@brbcoding</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

 

Background blend mode を使ったいろいろな背景パターンの作例

http://bennettfeely.com/gradients/

WS003085

他にもいろいろなパターンがあります。

メガネのマークを押すと、background blend mode の効果のON OFF が出来ます。

ぜひON OFFを触ってみて、どんな効果があるのか試してみてください

 

またこのページでは、CSSで作った背景と、PNG,JPG,WEBPで作った画像の容量の比較が下の方にあります。

どれもCSSだけで作ったものが圧倒的に容量が少ないです、それにCSSの場合は画質は劣化しません

 

ただ、このBackground blend moder や通常のグラデーションだけで作られた複雑な背景は、ファイルの容量的には優れていますが、ブラウザーへの負荷は結構なもので、画面サイズが大きくなればなるほど、描写のエリアが大きくなるので 負荷がどんどん増していきますので非力なPC等の場合は画面が重たくなることが有ります

 

 

Background Blend Mode を詳しく知りたい場合はこちら

http://css-tricks.com/basics-css-blend-modes/

英語になりますが、こちらの記事ではBackground Blend Mode を使っていろいろな例を使いながら詳しく解説されています、

 

こういったデモなどを使って解説がされていきます

[codepen_embed height=”453″ theme_id=”5706″ slug_hash=”qBJyj” default_tab=”result”]See the Pen <a href=’http://codepen.io/bennettfeely/pen/qBJyj/’>CMY/CMYK Color printing with background-blend-mode</a> by Bennett Feely (<a href=’http://codepen.io/bennettfeely’>@bennettfeely</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

 

 

これからも、Background Blend Mode を使ったいろいろな背景パターンが登場していきそうです。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー