【CSSで画像色合い調整やぼかしetc】 filterプロパティを使って、ぼかし・セピア・色調反転などをやってみる

      2463文字

今回は、最近も管理人がサイト制作で使用している、画像や要素のフィルター処理に便利なCSSのプロパティ『filter』を取り上げます。通常は画像加工ソフトなどで行うことも多い処理で、サーバーアップしたりキャッシュクリアしたりと大変ですが、昨今ではCSSでサクッと処理できる模様です。さっそく、プロパティの概要や、やってみた例を見ていきましょう。

通常は、画像加工ソフトなどで行い、再アップロードなどの手間がかかる


このプロパティを知る前の作業です。ぼかしや色調変更みたいなのを、画像編集ソフトで行っています。ソフトたちあげのほか、変更した画像は、再アップロードなどの手間がかかります。また、画像キャッシュがかかっていたりすると、キャッシュクリアして確認するのも手間です。

もちろん画像編集ソフトのほうが細かい編集はできますけど、ちょっとしたものならCSSで処理してしまうのもよいでしょう(こちらもキャッシュしないようにしておけばすぐ確認できる)。

CSS:filterプロパティとは?

画像、背景、境界の描画を調整するもので、ぼかしや色変化などのグラフィック効果を要素に適用するプロパティです。多くのファンクション(関数)がありますが、どれも画像編集ソフトを使っていれば、なじみのあるものばかりです。

どのようなファンクションがあるのか?

管理人の独断と偏見で、いくつか使用頻度が高そうなファンクションを取り上げました。MDNのページによると、このほかにもファンクションがあるので、気になった場合は確認してみてください。

blur() ガウスぼかしを適用。パラメーターはピクセル指定。
brightness() 明るくしたり暗くしたりする。100%で変化なし、100%以上の値で明るく。
contrast() コントラスト。100%以上の値でコントラストが強くなる。
drop-shadow() 影をつける。パラメータはoffset-x,offset-y,blur-radius(ぼかしが大きく),色
grayscale() グレースケール。0%変化なしから、100%グレースケールへ。
invert() 色調反転。こちらも0%変化なしから、100%完全反転へ。
sepia() 画像をセピア色に。こちらも0%変化なしから、100%完全セピア色へ。

filterの構文・書き方は?

基本的には要素に対して『filter:ファンクション(値)』の形で記載します。例えば・・・


『.site-headerクラスがついた要素にdrop-shadow』のときはこんな感じ。『0 3px 2px #ceceff』の意味は『横方向オフセットが0,縦方向オフセットが3px,ぼかしの大きさ2px,色が#ceceff』という意味になります。

また、『img指定で画像にかける』というのもできます。

この場合『.mvクラス内の画像に、セピア効果35%』という形になります。

css:filterを実際に使ってみる

では、いくつかのcss:filter効果を実際に試してみます。画像は管理人が以前撮影した、海の画像を使いましょうか。

こちらが元の状態です。
フィルター効果でどのように変わるか、確認していきましょう。

ブラー効果でぼかし(blur)

上の画像が入っているボックスに『filter:blur(20px)』を指定。20pxだと、かなりガッツリかかります。広がった分画像サイズの領域をオーバーしているので、気になる場合は『ボックスのwidth,heightを決めて、overflow: hidden;』『blurはボックス内の画像だけにかける(ボックス全体にかけない)』などで対応が可能です。

drop-shadowで影をつけてみる

上の画像のボックスに『filter:drop-shadow(4px 4px 10px #555)』を指定。ちょっとした影の処理なら、結構使えそうな印象です。

sepiaでセピア調の色合いに

『filter:sepia(100%)』で、こんな感じの色合いになります。50%くらいでほどほどにかけても、サイトの雰囲気が出そうです。

invertを使った色調反転

『filter:invert(100%)』です。場合によっては使えるかもしれないファンクションですね。

grayscaleもCSSのみでok

『filter:grayscale(100%)』指定です。こういうのもCSSでできるとは、良い時代になったのでしょうか、どうでしょうか(笑)

あとがき・まとめ

  • 画像フィルター処理は編集ソフトで行うが、CSSでも可能
  • セピアやグレースケール,ぼかし・影などが可能で、ほかにもファンクションがある
  • drop-shadowやblurでの領域オーバーは、画像のみ&overflow: hiddenを併用

まとめると、こんなところでしょうか。構文やファンクションをいくつか押さえておくと、かんたんなフィルター処理はソフトでやらなくても大丈夫になりそうです。また、画像だけでなく『要素にもかけられる』ということも押さえておきましょう。

WordPressサイト制作&リニューアル・機能開発サービス | アトリエSS


【カテゴリ】 - CSS
【タグ】 -

  関連記事

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える
bulma.cssで、サクッとお洒落モダンデザインにリニューアルしてみる【フレームワークwebサイト制作】
【WordPressテーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど
【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)
有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)
スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)
【スマホ対応・CSS】viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件の対応
サイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現
【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装
【CSS】letter-spacing(字間スペース)・line-height(行の高さ)を設定して、読みやすいデザインにする
自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)
【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介