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