(cache) CSS Filtersはアニメーションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出

CSS Filtersはアニメーションで使うのがお勧め！手軽に実装するいい感じのマウスオーバー演出

2017年4月20日公開

CSS Filtersとはボカシや色調整などグラフィカルな効果が得られるCSSの機能です。この記事では「マウスオーバーなどの表現を作るのにCSS Filtersが便利」ということを紹介します。

CSS Filtersの使い方は簡単。CSSのfilterプロパティーに適用したい種類の指定を行うだけです。例えば、次のような指定をすると、HTML要素にエフェクトがかかった状態で表示されます。

CSS Filtersは実はアニメーションにも利用可能。多彩な表現が簡単に実現できるのにあまり使われているのを見かけない…と残念に思ったので、この記事で利用方法を紹介します！ 今回紹介するサンプルは、マウスオーバーでエフェクトを適用するシンプルなもの。まずは次のビデオをご覧ください。

明るさを使った表現

明るさ調整のbrightness()メソッドを利用してみましょう。マウスオーバー時に写真を明るく表示させるには、通常時と:hover時に異なるフィルターの値を設定し、CSS Transitionでアニメーションを付与するだけ。簡単ですね。

.effect-brightness {
  transition: filter 0.3s ease;
  filter: brightness(1.0); /* デフォルト値なのでこの一行は省略してもOK */
}

.effect-brightness:hover {
  filter: brightness(1.75); /* 明るくする */
}

明るさを使った表現 (点滅)

CSS Transitionを工夫するだけで、様々なバリエーションを作れます。マウスオーバーしたときに一瞬ピカッと光る表現を入れることで、キビキビ動作する雰囲気の印象を与えることができます。

光る演出はcubic-bezier()メソッドでオーバー気味に加減速を設定するので、通常時とホバー時で異なるtransitionプロパティーを指定するのが演出のコツです。

/* 通常時 */
.effect-flash {
  filter: brightness(1.0);
  /* イージングをおとなしくかける */
  transition: filter 0.5s; 
}

/* ホバー時 */
.effect-flash:hover {
  /* 明るくする */
  filter: brightness(1.5);
  /* イージングを強烈にかける */
  transition: filter 0.4s cubic-bezier(0, 2.5, 0.2, 2.5); 
}

これに似た効果を実装した事例としては、ウェブサイト「ClockMaker Labs」や「Beautifl – Flash Gallery」があります。

彩度を使った表現

通常状態をモノクロにしておき、マウスオーバーしたときにモノクロを解除するテクニック。モノクロにすることで全体的に上品なデザインの表現に使えます。化粧品や服飾などブランド広告のウェブサイトとかに役立ちそうな表現です。

/* 通常時 */
.effect-mono {
  filter: grayscale(100); /* モノクロにする */
  transition: filter 0.2s;
}

/* ホバー時 */
.effect-mono:hover {
  filter: grayscale(0); /* モノクロを解除する */
}

明るさを使った表現（ボタンに最適）

brightness()を使った表現は、ポリモーフィズムなデザインのボタンに最適。光沢感のあるデザインは明度の変化は相性がよく、一枚のボタン画像だけでいい感じに仕上がります。デザイナーが通常状態のボタン画像しか用意してくれなかったとしても、簡単に設定できるので重宝します。

.btn {
  /* 通常時の明るさ(デフォルト値) */
  filter: brightness(1.0);
  transition: filter 0.3s;
}

.btn:hover {
  /* マウスオーバー時に明るくする */
  filter: brightness(1.15);
}

.btn:active {
  /* マウスダウン時に暗くする */
  filter: brightness(0.85);
}

この方法は、8年前の筆者の記事「Flashで一枚の画像を超シンプルにボタンにする方法」で紹介していた方法と同じ原理。「手を抜いて作ってる割にはそれっぽい」かつ「使いまわしがきく」ようなボタンです。

ボカシを使った表現

マウスオーバーしたときに追加の情報を表示するテクニック。サンプルとして、マウスオーバーしたときにSNSのシェアカウントを表示するというサンプルを用意しました。オウンドメディアなどのサイトで「記事がどれだけバズったか」を表現するのにひと味効かせたテクニックになります。

少しコードが複雑になるので、ここではポイントとなる箇所に焦点を絞って紹介します。詳しくはソースコードをご覧ください。

.effect-blur-thumb {
  transition: all 0.3s ease;
  width: 100%;
}

.effect-blur:hover .effect-blur-thumb {
  /* ホバー時にボカシと明るさを調整する */
  filter: blur(8px) brightness(1.5);
  /* 境界線の見栄えを改善するために拡大も入れておく */
  transform: scale(1.1);
}

CSS Filtersの動作環境〜 IE以外は動く

最後にCSS Filtersの動作環境について紹介します。モバイルを含む最近のモダンブラウザー（MS Edge、Chrome、Firefox、Safari）は標準対応しています。唯一使えないのは、やはりInternet Explorerです（参照：「Can I use…」）。

2015年頃のSafariやAndroid 4.4の標準ブラウザまではベンダープレフィックスが必要になるので、-webkit-だけ付与したほうがいいかもしれません（-moz-や-ms-は必要ありません）。

.effect-something {
  -webkit-filter: brightness(1.5);
          filter: brightness(1.5);
  /* 「-webkit-filter 0.5s」も書くのが面倒なので「all」で */
  transition: all 0.5s; 
}

MS Edgeは標準的なCSS Filtersには対応しているものの、CSS Filtersのurl()メソッド（svgに定義したフィルターを参照する機能）のみが使えません。url()メソッドはフィルター効果をカスタマイズする上級者向けの機能なので、あまり意識しなくてもいいでしょう。

まとめ

お手軽にエフェクトを適用できるので、ウェブサイトのUIにアクセントを入れるのに最適です。

記事「CSS3のブレンドモードmix-blend-modeを使いこなそう」でも紹介したように、最近のブラウザではCSSの機能が増え、グラフィカルな表現が手軽にできるようになってきました。2025年までサポートが続くと言われるInternet Explorer 11がCSS Filtersに未対応のためプロジェクトによっては使いづらい一面があると思いますが、選択肢の一つとして演出の引き出しに入れてみてはいかがでしょうか。