Mastering of CSS Filter
まるでPhotoshop?!CSSフィルタを使った美しい写真加工エフェクト
ウェブデザインにおいてイメージ写真は、より分かりやすくメッセージ性を伝える、とても重要なデザイン要素のひとつです。CSSフィルタ機能を利用することで、イメージ写真の新しい魅せ方を提案できるだけでなく、サイトパフォーマンスの改善にもつながります。今回は、CSSフィルタの基本的な使い方や応用テクニックから、手軽に活用できるCSSツールも一緒に見ていきましょう。
CSSフィルタの基本
CSSフィルタは特に目新しいものというわけではなく、最近特によく見かけるようになったスタリング方法です。通常、Photoshopなどのデザインアプリで作成するぼかしエフェクトやモノクロ写真なども、CSSに記述するだけで完成させることができます。まずは、基本となるCSSへの記述方法を見ていきましょう。
ステップ１ 加工する写真ファイルを用意する
original
オリジナル写真
イメージ写真に美しい加工を加える前に、CSSフィルタの基本的な使い方を学びましょう。今回は、同じ写真を利用することで、エフェクトの違いを確認してみましょう。こちらが元となるオリジナル画像です。
Photo by Joshua Earle
ステップ２ グレースケールを適用する
GrayScale
グレースケール適用
CSSフィルタを利用すれば、写真をモノクロ加工することもできます。Photoshopなどでの加工作業が必要ありません。
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
}
ステップ３ 色調の反転を適用する
Blur
ぼかしエフェクト適用
Photoshopなどでおなじみの色調の反転も、CSSへの記述のみでスタイリング可能です。
.invert {
-webkit-filter: invert(.8);
filter: invert(.8);
}
ステップ４ ぼかしエフェクトを適用する
Blur
ぼかしエフェクト適用
色だけでなく、写真にぼかしを加えることも可能です。
.blur {
-webkit-filter: blur(5px);
filter: blur(5px);
}
ステップ５ バックドロップ・エフェクト
Apple社が2013年にリリースした、iOS 7で採用されたぼかしエフェクトで、背景をぼかすことでコンテンツに注目が集まるように工夫されています。こちらのエフェクトも JavaScript を利用せずに、CSSのみで実現することができます。
ブラウザ Chrome以外で確認してみましょう。デモページを確認する。
.backdrop {
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
}
ステップ６ 実践テクニック①
写真にマウスホバーすることで、モノクロ写真をカラーにアニメーション変化します。サムネイルやアイキャッチ画像のホバーエフェクトにもオススメです。
.grayscale {
-webkit-filter: grayscale(1);
filter: grayscale(1);
transition: 2s;
animation-timing-function:ease-in-out;
}
.grayscale:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
ステップ７ 実践テクニック②
クリックすることでCSSフィルタを適用できるので、ユニークな写真エフェクトを追加することができます。今回は @keyframeを利用することで、滑らかなアニメーションを実現しています。
.animate-blur {
-webkit-animation: blur-animated 2s linear;
}
@-webkit-keyframes blur-animated {
0% {
-webkit-filter: blur(0);
}
100% {
-webkit-filter: blur(5px);
}
}
original
オリジナル写真
nashville
1977
toaster
earlybird
walden
lofi
moon
inkwell
gingham
reyes
xpro-2
Colofilter.css
こちらもCSSファイルを読み込むだけで使える、お手軽なエフェクトツール。鮮やかな色使いが特長で、Spotifyなどで使われていたエフェクトを再現したCSS。現在、淡いグラデーションやネオンカラーなど、合計30エフェクトが公開されています。すべてを確認したいときは、こちらよりどうぞ。
オリジナル写真
blend blue
Pink Yellow
Green Dark
デザイナーとエンジニアの境界線は、もはやなくなってきているようです。CSSフィルタに関する各種ツールなど、アップデート行っていく予定です。