CSSで出来るブレンドモード

今日は、CSSで出来るブレンドモードのチュートリアルです。
まずは、下記のデモからご覧下さい。
まずは、下記のデモからご覧下さい。
normal
multiply
screen
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
linear-gradient&screen
background-blend-mode
background-blend-modeプロパティは、背景色と背景画像をブレンドするためのものです。
いつも写真の加工は、Photoshopなどで加工しますが、
このプロパティを使用すればCSS だけで手軽に再現できます。
効果を切り替えたいと思った時にすぐにモードを変えられるのもGOOD!!
サンプル
#blend { display: inline-block; margin: 2em; width: 400px; height: 400px; background-size: 400px 400px; background-repeat: no-repeat; background-color:#ブレンドしたい背景色; background-image: url(ブレンドしたい画像.png); } .normal { -webkit-background-blend-mode: normal; background-blend-mode: normal; }
normal
ブレンドの種類は下記の通りです
normal (ブレンドなし)
multiply(乗算)
screen(スクリーン)
overlay(オーバーレイ)
darken(暗くする)
lighten(明るくする)
color-dodge(ごまかす)
color-burn(覆い焼き)
hard-light(ハードライト)
soft-light(ソフトライト)
difference(差異)
exclusion(除外)
hue(色合い)
saturation(彩度)
color(色相)
luminosity(輝度)
とても簡単にできるのでWEBデザインの際にはぜひ試して見てください!
関連ニュース
・HTML・CSSの基礎
・jquery商品スライダーの設置方法
・CSSで透明度設定
・jqueryとは
・ハーフトーン(PHOTOSHOP)
・レトロな写真加工(PHOTOSHOP)