写真をCSSのみで補正する方法


CSS3のfilterを活用すれば可能です。

.hoge {
	-webkit-filter: xxx();
	filter: xxx();
}

CSSで写真をモノクロ調にしたい場合

grayscale(グレースケール)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}

CSSで写真をセピア調にしたい場合

sepia(セピア)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: sepia(100%);
	filter: sepia(100%);
}

CSSで写真の彩度を変更したい場合

saturate(彩度)を指定します。

//0 - 100(初期値)[%]
.hoge {
	-webkit-filter: saturate(0%);
	filter: saturate(0%);
}

CSSで写真の色相を変更したい場合

saturate(彩度)を指定します。

//0(初期値) - 360[deg] 
//360degは0degと同じになる
.hoge {
	-webkit-filter: hue-rotate(360deg);
	filter: hue-rotate(360deg);
}

CSSで写真の階調を反転したい場合

invert(階調反転)を指定します。

//0(初期値) - 100[%] 
.hoge {
	-webkit-filter: invert(100%);
	filter: invert(100%);
}

CSSで写真を透過させたい場合

opacity(透過度)を指定します。

//0 - 100(初期値)[%] 
//opacity: xx%;とほぼ一緒
.hoge {
	-webkit-filter: opacity(0%);
	filter: opacity(0%);
}

CSSで写真の明るさを変更したい場合

brightness(明るさ)を指定します。

//0 - 100(初期値)[%] 
//brightness(0%) で真っ黒になる
.hoge {
	-webkit-filter: brightness(0%);
	filter: brightness(0%);
}

CSSで写真のコントラストを変更したい場合

contrast(コントラスト)を指定します。

//0 - 100(初期値)[%] 
.hoge {
	-webkit-filter: contrast(0%);
	filter: contrast(0%);
}

CSSで写真をぼかしたい場合

blur(ぼかし)を指定します。

//0(初期値)- 任意の値[px] 
.hoge {
	-webkit-filter: blur(5px);
	filter: blur(5px);
}

複数の効果を組み合わせることも可能ですが、行列計算で処理が行われていますので、効果の順番によっては結果が異なってくることには注意が必要です。

SNSでもご購読できます。

スポンサーリンク

コメントを残す

*