PhotoshopにあるようなブレンドモードをCSSで実装できると知って、試してみることにしました。
CSS Blend Modes could be the next big thing in Web Design | by Bennett Feely | Medium
http://codepen.io/bennettfeely/pen/uLKrG
Blend Modeを使うための準備
Canary buildをインストール
Google Chromeの開発版であるCanary buildを使用します。
試験運用機能を有効にする
URLに「chrome://flags/」を入力すると、試験運用機能の設定ページを見ることが出来ます。
Google Chrome の Canary build「enable-experimental-web-platform-features」を有効にすると"Blend mode"が適用されます。
Blend Modeの使い方
使い方は下のページを参考にしました。
・参考
background-blend-mode プロパティで背景をブレンドしてみよう | WWW WATCH
background-blend-mode: overlay;
ものすごくざっくり説明すると、divの背景に画像を設定して、上のプロパティを設定すれば、背景色とブレンドされます。
SCSSの使い方
今回は書くのが面倒だったのでSCSSを使用しました。
prefixの省略
@mixin css3($property, $value) { @each $prefix in -webkit-, -moz-, -ms-, -o-, '' { #{$prefix}#{$property}: $value; } }
cssのprefixを書くのが面倒なので、重複する処理を関数でまとめました。
@each $blend_mode in multiply,screen,overlay,color-dodge{ .#{$blend_mode}{ @include css3(background-blend-mode,$blend-mode); } .#{$blend_mode}:after{ content:"#{$blend-mode}"; } }
何のブレンドモードを使用したかわかりやすくするために、div要素に使用したブレンドモード名を表示することにしました。cssのafterを使って、変数名を表示させています。「$blend_mode」は文字列でないために、contentにどうやって書けば良いのか迷いましたが、上のような書き方で大丈夫でした。
背景画像を要素に合わせた大きさにする
background-size: contain;
「background-size」は知らなかったです。
http://www.allinthemind.biz/markup/css/background-size.html