CSS Filter Effectsの使い方
こんにちは、橋本です。
今日は最新版のChromeとWebkit(Nightly Build)で実装された「CSS Filter Effects」の使い方について書いていきたいと思います。
途中のサンプルは、最新のChromeもしくはWebkitを使って見てみてください。
また、サンプルではおなじみの麦わら帽をかぶった女性の画像を使っています。
この画像の女性はレナという方だそうで、この画像は元々はプレイボーイ誌に載っていたヌード写真の一部だそうです。
「CSS Filter Effects」とは、簡単に言うと「CSSで画像に対して画像処理フィルタを適用しちゃおう！」というものです。
Photoshopの画像処理フィルタのようなものだと思っていただけるといいかと思います。
具体的には、以下のようなフィルタが実装されています。
・色相・明度・彩度
・グレースケール・セピア
・透明度
・階調の反転
・コントラスト
・ぼかし
・ドロップシャドウ
フィルターを適用するためには、filter属性(ベンダプレフィクスが必要)に対して、適用したい画像処理用の関数を指定します。
文字で書いていても仕方ないので、サンプルを作成して、実際の使い方と結果を見ていきたいと思います。
色相・明度・彩度
画像の色相、明度、彩度を変更するためのフィルタです。
色相を変更する際には、hue-rotate関数を使います。引数には色相環を回転させたい角度を指定します。
明度を変更する際には、brightness関数を使います。引数には現在の明度を0%として、どのくらい明度を上げ下げするのかを指定します。
値は-100%が黒、100%が白で、値が大きくなればなるほど明るくなります。
彩度を変更する際には、saturate関数を使います。引数には現在の彩度を100%として、どのくらい彩度を上げ下げするのかを指定します。
値が大きくなればなるほど彩度が高くなります。
/* 色相 */
.hue {
-webkit-filter: hue-rotate(180deg);
}
/* 明度 */
.brightness {
-webkit-filter: brightness(-50%);
}
/* 彩度 */
.saturate {
-webkit-filter: saturate(100%);
}
実行結果
グレースケール・セピア
画像をグレースケール、もしくはセピア調に加工するためのフィルタです。
グレースケールを適用するには、grayscale関数を使います。
また、セピアを適用するには、sepia関数を使います。
どちらも引数として、フィルタを適用する割合を%指定で引数に渡すことができます。100%が完全にフィルタが適用された状態で、デフォルトは100%です。
/* グレースケール */
.grayscale {
-webkit-filter: grayscale();
}
/* セピア */
.sepia {
-webkit-filter: sepia();
}
実行結果
透明度
画像の透明度を変更するためのフィルタです。
透明度を変更する際には、opacity関数を使います。引数は透明度の割合で%で指定します。
/* 透明度 */
.opacity {
-webkit-filter: opacity(50%);
}
実行結果
階調の反転
画像の階調の反転を行うためのフィルタです。いわゆるネガ・ポジ反転です。
フィルタを適用するには、invert関数を使います。
.invert {
-webkit-filter: invert();
}
実行結果
コントラスト
画像のコントラストを変更するためのフィルタです。
コントラストを変更するには、contrast関数を使います。引数には現在のコントラストを100%として、どのくらいコントラストを上げ下げするか指定します。
/* コントラスト */
.contrast {
-webkit-filter: contrast(150%);
}
実行結果
ぼかし
画像をぼかすためのフィルターです。
画像をぼかすためには、blur関数を使用します。引数にはぼかし度合いをピクセルで指定します。
/* ぼかし */
.blur {
-webkit-filter: blur(5px);
}
実行結果
ドロップシャドウ
画像にドロップシャドウを適用します。
ドロップシャドウを適用するにはdrop-shadow関数を使います。引数は、x方向の大きさ、y方向の大きさ、影の広がり、色の順で指定します。
/* ドロップシャドウ */
.dropshadow {
-webkit-filter: drop-shadow(10px 10px 5px #f00);
}
実行結果
また、上記のフィルタに対して、CSS3transitionプロパティを使って、アニメーション効果を適用することも可能です。
img {
-webkit-transition: 1s -webkit-filter ease-in-out;
}
img.animate_hue:hover {
-webkit-filter: hue-rotate(180deg);
}
上記のサンプルでは、画像にマウスが載ると、色相環が徐々に180度回転するようになっています。
これは実際に見ると結構感動するので、是非最新のChromeかWebkitをインストールして見てみていただければと思います。
まだまだ対応するブラウザが少ないため、すぐに使える機能ではないのです が、非常に面白い機能なので、是非試してみてください。
