Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】

CSS3になって角丸はグラデーション、ドロップシャドウなどデザインツールを駆使して行っていたデザインがいとも簡単にできるようになりましたね。
実はCSS3ではphotoshopやFireworksにあるような、描画モード的な表示もできるようになっています。

描画モードとは？

2つ以上の画像やカラーを重ね合わせて設定に応じて、様々な描画表現ができる機能。
良く使われるのは乗算、オーバーレイ、スクリーンなど。

みんな気になる対応ブラウザ

• IE：全滅
• Firefox:OK
• Chrome:OK
• safari:OK
• Opera:OK
• iOS Safari ：OK(8.1)
• Android Browser：(｀；ω；´)
• Chrome for Android:OK

詳しい対応ブラウザについて

ブレンドモードの使い方

ブレンドモードは一つのセレクタに複数含まれた背景の色・画像を合成します。
なので設定としては

１：背景を複数設定
２：ブレンドモードを指定
以上になります。

記述としては下記のような感じです。

        background:#FFF,url(images/hoge.jpg) no-repeat;/*背景を複数設定！*/
        background-blend-mode: multiply;
        

上記で”multiply”となっているところが属性です。
そこを変更すれば様々なブレンドが可能になります。

描画モード一覧

1.乗算

        background-blend-mode: multiply;
        

2.スクリーン

        background-blend-mode: screen;
        

3.オーバーレイ

        background-blend-mode: overlay;
        

4.暗く

        background-blend-mode: darken;
        

5.明るく

        background-blend-mode: lighten;
        

6.ごまかし

        background-blend-mode: color-dodge;
        

7.覆い焼きリニア

        background-blend-mode: color-burn;
        

8.ハードライト

        background-blend-mode: hard-light;
        

9.ソフトライト

        background-blend-mode: soft-light;
        

10.差異

        background-blend-mode: difference;
        

11.除外

        background-blend-mode: exclusion;
        

12.色合い

        background-blend-mode: hue;
        

13.彩度

        background-blend-mode: saturation;
        

14.色相

        background-blend-mode: color;
        

15.輝度

        background-blend-mode: luminosity;
        

デモサンプルはこちら。

※一部hoverで変わるようにしています。(IE以外のPCブラウザで見てください)

実務で使えるかどうか

使えます。
ただし限定的ですが。

使えるブラウザが限られているのと背景をブレンドするので、使用しやすい場所は限られていますが…使えます。
例えばサムネイルやアイキャッチ画像のようにあらかじめ大きさが決められたもののhoverやアニメーションとか。
これなら、見た目の変化も生かしつつ、IEなどの影響も少なく済みます。
プログレッシブエンハンスメントってやつですね。

さすがにIEだけ何も変わらないのはマズいと思うので、IEには背景色を上から透過して乗せる処理をしておくのが無難かなと思います。

コードで書くとこんな感じですね。

.hover-blend {
  background: url('../images/01.jpg') no-repeat;
  width: 300px;
  height: 200px;
  transition: 0.5s;
}
.hover-blend:hover {
  filter: alpha(opacity=50);
}
.hover-blend a {
  width: 300px;
  height: 200px;
  display: block;
}
.hover-blend a:hover {
  opacity: 0.5;
  background: #0066cc url('../images/01.jpg') no-repeat;
  background-blend-mode: exclusion;
  transition: 0.5s;
}
@media all and (-ms-high-contrast: none) {
  .hover-blend a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50);
    /*IE8*/
    background: #0066cc;
  }
}

でもこれ毎度書くとしんどいのでLESSでMIXIにしておきます。

.MX-hover-blend(@menu,@color,@opacity,@img,@w,@h){
    background: url(@img) no-repeat;

    width: @w;
    height: @h;
    transition:0.5s;
    &:hover{//IE8 9
        @opacityIE:@opacity *100;
        filter: alpha(opacity=@opacityIE);
    }
    a{
        width: @w;
        height: @h;
        display: block;
    }
    a:hover{
        opacity: @opacity;
        background:@color url(@img) no-repeat;
        background-blend-mode: @menu;
        transition:0.5s;
    }
    @media all and (-ms-high-contrast:none){
        a:hover{//IE11 IE10
                opacity: @opacity;
                @opacityIE:@opacity *100;
                filter: alpha(opacity=@opacityIE);/*IE8*/
                background:@color;
        }
    }
}
        

LESSでMIXINをつくっておけば、これ一行でこの長いコードが完結します。
もちろん、ブレンドの仕方、色、画像の大きさなど個々に調整可能です。

        .MX-hover-blend(multiply,#0066CC,0.5,'../images/hoge.jpg',300px,200px);

ブレンドモードは数値でかかり具合を調整できる設定がないので、同じ画像を重ねて上にかぶさる画像を透過させることでブレンドのかかり具合を調整できるようにしています。
LESS便利ですね！

まとめ

IEで使えないあたり、使える場所は限られますがCSSでここまで出来るって驚きませんか？
hoverのように、その表示の仕方にこだわらないようなところだと、低コストで他のサイトと違ったインパクトを与えれると思います。

LESSを使えば対応ブラウザに合わせて書くような処理も省けますので、さらに簡単に使えます。
LESS便利ですね！是非みなさんもこの便利なLESSを使って行きましょう。

LESSが気になるかたはこちらもご覧ください。

Sassの人気に嫉妬!でもLESSにだっていいとこあるんだよ