コニファ・ロゴ

ツール集:CSS3 filterプロパティによる画像の調整や効果(スライダーで値変更)

CSS3 filterプロパティによる画像の調整や効果の値をスライダーで変えることができます。 使い方は、各filterのスライダを動かし、リアルタイムで画像に反映する変化を確認しながらそれぞれの値を決めます。同じ調整や効果を再利用する場合は、スライダー動作ごとに書き出される下側の「Grab the code」のcssコードをコピーしておきます。

なお、filter名の日本語表記は次のようになります。Grayscale(グレイスケール)、Sepia(セピア調)、Saturate(彩度)、Hue-rotate(色相回転)、Invert(諧調反転)、Brightness(明度)、Contrast(コントラスト)、Blur(ぼかし)、Opacity(透明度)。

CSS Filter Effects

{{ filter.value }}{{ filter.unit }}

Grab the code

			
.selector {
	{{ copyStyles }}
}
			
		

 

 

 

 

戻るボタン