not good but great

プログラミング、アート、映画・本の感想について書きます。

CSS Blende Modeを試してみた

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を使用します。

Chrome Canary のデベロッパー向け機能 - Google Chrome

試験運用機能を有効にする

URLに「chrome://flags/」を入力すると、試験運用機能の設定ページを見ることが出来ます。

f:id:naoyashiga:20140107182235p:plain
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