川口・さいたまのホームページ製作 川口・さいたまのホームページ制作会社関東ダイイチへ問い合わせる 埼玉県川口市のホームページ制作会社関東ダイイチへ電話する さいたま・川口のホームページ制作会社関東ダイイチへメールする



Illustratorのチュートリアル|さいたま・川口の低価格なホームページ制作会社
TOPダイイチウェブニュース>ブレンドモード

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






今日は、CSSで出来るブレンドモードのチュートリアルです。
まずは、下記のデモからご覧下さい。

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity
linear-gradient&screen
linear-gradient&overlay











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)







ホームページ制作の料金|川口WEB会社HP制作の製作実績|川口のホームページ制作会社HP制作会社の関東ダイイチ|会社案内ウェブ制作のさいたま|関東ダイイチ|問い合わせ
Copyright © 2014 web no daiichi All Rights Reserved.  
>TOP >ホームページの必要性 >料金
>ご注文から公開まで >お問い合わせ >制作実績
>会社案内 >ダイイチニュース  >リンク
ホームページ制作|埼玉県川口市西川口2-10-1
川口・さいたまのWEB制作