not good but great

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

CSS Blende Modeを試してみた

PhotoshopにあるようなブレンドモードをCSSで実装できると知って、試してみることにしました。
CSS Blend Modes could be the next big thing in Web Design — Medium
background-blend-mode in action - CodePen

Blend Modeを使うための準備

Canary buildをインストール

Google Chromeの開発版であるCanary buildを使用します。

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」は知らなかったです。
背景画像の拡大・縮小 → background-size ! ::: 0から目指すWebマスター

広告を非表示にする