CSSで画像の明るさやぼかしを変更できるCSSフィルター「filter」

今回ご説明する、CSSのfilterプロパティはCSSで画像をの明るさやぼかしを変更できるプロパティです。

Javascriptを使って画像をぼかす方法がありますが、CSSだけでも可能です。

ぼかし「blur」

コード

.blur{
    filter: blur(4px);
    -ms-filter: blur(3px); /*IE*/
}

結果

See the Pen
css blur sample
by kura (@kuranopen)
on CodePen.

明るさ「brightness」

コントラスト「contrast」

グレースケール「grayscale」

色相変更「hue-rotate」

階調の反転「invert」

彩度「saturate」

セピア「sepia」

スポンサーリンク

スポンサーリンク

  • このエントリーをはてなブックマークに追加

【続き】 CSSテクニックの便利な使い方

新しい記事はありません