Cntlog > スキルアップ・ノウハウ > コーディング > Photoshopとかにある描画モードはCSS3で出来るよ【サンプル有り】

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

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

ブレンドモードの使い方

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

1:背景を複数設定
2:ブレンドモードを指定
以上になります。

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

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にだっていいとこあるんだよ

関連記事

コーディングが苦手な初心者Webデザイナーに上達するCSSの勉強法... Webデザイナーになろうとして、まず最初につまずくのがコーディングです。 CSSは慣れてくると簡単なのですが初めて触るとなると、何から手を付けてよいかわからない、何が正解がわからないなどの理由で挫折する人を多く見かけます。 本記事ではCSSが全然わからない方がCSSのコーディングに慣れるため...
【サンプル有】日本語WebFont 一歩前進! Google Fonts 日本語早期アクセスのページ... Googleが提供しているWeb FontでとうとうGoogle Fontsの日本語早期アクセスのページが公開されましたね。 これまで日本語WebFontといえばNotoFontが有名でしたが今回の8つのフォントが追加されました。 簡単にですが公開されたフォントを紹介します。 ...
コーディング規約(HTML・CSS)を作ってみた(公開済)... WEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。 作って見た規約はこちら。 WEB制作ガイドライン コーディング規約を作った理由 オレオレフレームワークやWordPres...
今更だけど押さえておきたいHTML5のマークアップやAPIの基本的なところ... HTML5の言葉が流行りだして結構な時間が経ちましたが、何が使えて、何がまだ使いにくい状況なのかをずっと放置していましたのでマークアップ、API周りについて少しまとめてみました。 HTML5で追加された基本的なタグ 新しいタグの追加によって文章構造がより明確化できるようになり...
WordPressじゃなくても、コピペでいけるソーシャルボタンの設置方法... 各種ソーシャルボタンってWordPressなら簡単に設置できるけど、自分で普通に設置しようと思うと初めてだとどうやって設置していいかわからないですよね。 そんな人向けに、よく見るデザインを簡単にSNSボタンの設置方法をご紹介します。 はじめに 各種ソーシャルボタンをまとめて簡単に設置できて...
10分で作れるレスポンシブ(サンプル有)... レプポンシブデザインが当たり前とされてきた昨今、意外にもまだレスポンシブで作った事のないWEBデザイナはたくさんいます。 オーバーテクノロジーのように難しく考える方が多い印象がありますが、ただ実装するなら10分もあれば使えます。 まずはレスポンシブを知る。 レスポンシブは端末によってレイア...