概要

CSSプロパティ｢filter｣は、要素に対して、「ぼかし」や「色合い」などのグラフィック変化を与えることができます。例えば、カラー画像をモノクロにしたり、コントラストの強弱を調整したりすることです。ただし、使用環境や、指定する値によっては表示速度の低下などに繋がる場合もありますので、注意する必要があります。

<img src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="250" height="187" alt="">
<style>
img {
  filter: blur(3px);
}
</style>

取りうる値

このプロパティは、用意されているフィルター関数を使って指定します。また複数指定する場合は半角スペースを開けて続けて指定します。

{ filter: filter関数(値); }

こちらがその関数と効果をまとめた一覧表です。実際の表示等は後述していきます。

関数名	指定可能な値	説明
blur	0px(初期値)～10px	ぼかし効果をつけます
grayscale	0%(初期値)～100%	モノクロ効果をつけます
sepia	0%(初期値)～100%	セピア効果をつけます
saturate	0%～100%(初期値)	彩度を変更できます
hue-rotate	0deg(初期値)～360deg	色相を回転することができます
invert	0%(初期値)～100%	階調を反転させます
opacity	0%～100%(初期値)	透過度を変更できます
brightness	0%～100%(初期値)	明るさを変更できます
contrast	0%～100%(初期値)	コントラストを変更できます
drop-shadow	CSS3のdrop-shadowと同様	影効果をつけます
url()		指定したurl

各フィルター関数の指定と効果

ではそれぞれの関数を使った表示を確認していきましょう。

blur(値)

blurは、ぼかし効果を与えることができます。値を大きくすればするほどぼかし効果が大きくなります。｢px｣以外の単位でも効果をつけることが可能ですが、パーセントの指定はできません。

<img class="blur-1" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="blur-5" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="blur-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.blur-1 { filter: blur(1px); }
.blur-5 { filter: blur(5px); }
.blur-10 { filter: blur(10px); }
</style>

grayscale(値)

grayscaleは、モノクロ効果をつけます。値を大きくすればするほど、グレーに変化していき、最大で100%です。指定はパーセントのみで、マイナスの値は指定できません。

<img class="grayscale-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="grayscale-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="grayscale-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.grayscale-10 { filter: grayscale(10%); }
.grayscale-50 { filter: grayscale(50%); }
.grayscale-100 { filter: grayscale(100%); }
</style>

sepia(値)

sepiaは、古ぼけた画像のようなセピア色の変化をつけます。値を大きくすればするほど、セピア色に変化していき、最大で100%です。指定はパーセントのみで、マイナスの値は指定できません。

<img class="sepia-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="sepia-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="sepia-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.sepia-10 { filter: sepia(10%); }
.sepia-50 { filter: sepia(50%); }
.sepia-100 { filter: sepia(100%); }
</style>

saturate（値）

saturateは、色の彩度を調整します。0%を指定すると、彩度が全くなく、100%で元画像となりさらに上の値を指定するとより鮮やかになります。

<img class="saturate-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="saturate-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="saturate-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="saturate-200" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.saturate-10 { filter: saturate(10%); }
.saturate-50 { filter: saturate(50%); }
.saturate-100 { filter: saturate(100%); }
.saturate-200 { filter: saturate(200%); }
</style>

hue-rotate(値)

hue-rotateは、画像のすべての色に色相の回転を適用します。色相環についてはこちらで触れませんが、この角度を値（deg）で指定します。回転角度なので360deg以上も指定できますが、一回転以降の値は一回転目の角度と効果は同じになるので、 45degは405degと同じという意味になります。

<img class="hue-rotate-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="hue-rotate-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="hue-rotate-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="hue-rotate-200" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.hue-rotate-10 { filter: hue-rotate(10deg); }
.hue-rotate-50 { filter: hue-rotate(50deg); }
.hue-rotate-100 { filter: hue-rotate(100deg); }
.hue-rotate-200 { filter: hue-rotate(200deg); }
</style>

invert(値)

invertは、画像のすべての色の階調を反転します。反転するとネガのような変わった変化もつけることができます。0%で元画像のままで、100%で完全に反転します。

<img class="invert-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="invert-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="invert-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="invert-200" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.invert-10 { filter: invert(10%); }
.invert-50 { filter: invert(50%); }
.invert-100 { filter: invert(100%); }
.invert-200 { filter: invert(200%); }
</style>

opacity(値)

opacityは、画像の透明度をつけます。こちらは CSSプロパティ [css]opacity[/cssp] も同じ効果をつけることができます。違いとしては、こちらの指定の方がブラウザーによってハードウェアアクセラレーションを使用するので、良いパフォーマンスが期待できることです。

<img class="opacity-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="opacity-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="opacity-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.opacity-10 { filter: opacity(10%); }
.opacity-50 { filter: opacity(50%); }
.opacity-100 { filter: opacity(100%); }
</style>

brightness(値)

brightnessは、明るさを調整します。100%が元画像になり、0%にすると真っ暗になります。100%以上の値を指定すると、さらに明るくなります。

<img class="brightness-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="brightness-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="brightness-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="brightness-200" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.brightness-10 { filter: brightness(10%); }
.brightness-50 { filter: brightness(50%); }
.brightness-100 { filter: brightness(100%); }
.brightness-200 { filter: brightness(200%); }
</style>

contrast(値)

contrastは、画像のコントラストを調整します。コントラストフィルターを使って明るい部分とくらい部分の差を調整します。値を0%に指定すると、グレー一色になり、100%で元画像となります。それより大きい数値を指定すると、よりコントラストの強い表示になります。

<img class="contrast-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="contrast-50" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="contrast-100" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="contrast-200" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.contrast-10 { filter: contrast(10%); }
.contrast-50 { filter: contrast(50%); }
.contrast-100 { filter: contrast(100%); }
.contrast-200 { filter: contrast(200%); }
</style>

drop-shadow(値)

drop-shadowは、ドロップシャドウ（影）効果を与えます。こちらもCSSプロパティ box-shadow などと同じ効果をもたらし、指定方法も同様です。

<img class="drop-shadow-1" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="drop-shadow-5" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<img class="drop-shadow-10" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="100" height="75" alt="">
<style>
.drop-shadow-10 { filter: drop-shadow(1px 1px 5px #000); }
.drop-shadow-50 { filter: drop-shadow(5px 5px 5px #000); }
.drop-shadow-100 { filter: drop-shadow(10px 10px 5px #000); }
</style>

url(id)

urlは、独自に作成したSVGフィルターを適用することができます。指定はそのデータのidを指定します。

使用例

また複数指定することができ、アニメーションなどと組み合わせることで面白い表現を作ることができます。

<img class="anime filter" src="https://www-creators.com/wp-content/uploads/2017/12/css_sample.jpg" width="200" height="149" alt="">
<style>
  .anime {
    animation: sample 2s ease -2s infinite;
  }
  @keyframes sample {
    0% {
      filter: brightness(100%);
    }
    90% {
      filter: brightness(100%) sepia(100%);
    }
    100% {
      filter: brightness(200%) sepia(100%);
    }
  }
</style>

 

仕様書

• Filter Effects Module Level 1

関連CSSプロパティ

• filter