注意：今回書くfilterプロパティはChrome,Safari,Android,IOS7以降でないとは動作しません。
filter1プロパティを利用すると、要素に対して様々なフィルタをかけれます。フィルタの種類は、下記のフィルタ関数、またはSVGで定義しておいた設定を利用して指定する。
フィルタ関数を利用する場合は「opacity(40%)」というようにフィルタを適用する度合いを引数に指定します。
| フィルタ関数名 | 説明 |
|---|---|
| grayscale() | 要素をグレースケールにします。 グレースケールにする度合を「0%～100%」の値で指定します。 初期値は「0%」です。「100%」で完全にグレーです。 |
| sepia() | 要素をセピア調にします。 セピア調にする度合を「0%～100%」の値で指定します。 初期値は「0%」です。「100%」で完全にセピア調です。 |
| saturate() | 要素を彩度を変更します。 現在の彩度を「100%」(初期値)として、彩度を変更する度合いを「0%」以上の値で指定します。0%を指定すると無彩色となり、値が大きくなるほど彩度が高くなります。 |
| hue-rotate() | 要素の色相を変更する。色相環を回転させる角度を「0deg～360deg」の値で指定します。初期値は「0deg」です。 |
| invert() | 階調を反転します。反転させる度合いを「0%～100%」の値で指定します。 初期値は「0%」です。「100%」を指定すると、完全に反転します。 |
| opacity() | 透明度を「0%～100%」の値で指定します。初期値はは「100%」です。「0%」を指定すると完全に透明になります。 |
| brightness() | 明度を変更する。現在の明度を「100%」(初期値)として、メイドを変更する度合いを「0%」以上の値で指定する。｢0%｣を指定すると完全に黒になり、値が大きくなるほど明るくなります。 |
| contrast() | コントラストを変更する。現在のコントラストを「100%」(初期値)として、コントラストを変更する度合いを「0%」以上の値で指定する。｢0%｣を指定すると、完全にグレーになる。 |
| blur() | ぼかしをつける。ぼかす幅を、数値に単位(%は不可)をつけて指定する。 初期値は「0」です。 |
| drop-shadow() | ドロップシャドウを付ける。影の長さと色を半角スペースで区切って指定する。指定方法はbox-shadowと同じです。box-shadowプロパティの影を広げる距離を指定する４つの目の値はdrop-shadow()関数では利用不可です。 |
| フィルタ関数名 | 説明 |
|---|---|
| url() | SVGで定義した設定のIDwo、「#ID」か「URL#ID」で指定する。 |
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>フィルタプロパティを利用する</title> <style> .grayscale{ -webkit-filter:grayscale(100%); filter:grayscale(100%); } .sepia{ -webkit-filter:sepia(100%); filter:sepia(100%); } .saturate{ -webkit-filter:saturate(250%); filter:saturate(250%); } .hue-rotate{ -webkit-filter:hue-rotate(45deg); filter:hue-rotate(45deg); } .opacity{ -webkit-filter:opacity(50%); filter:opacity(50%); } .brightness{ -webkit-filter:brightness(40%); filter:brightness(40%); } .contrast{ -webkit-filter:contrast(150%); filter:contrast(150%); } .blur{ -webkit-filter:blur(2px); filter:blur(2px); } .drop-shadow{ -webkit-filter:drop-shadow(16px 16px 8px red); filter:drop-shadow(16px 16px 8px red); } .grayscale{ -webkit-filter:grayscale(100%); filter:grayscale(100%); } .url{ /* 以下はFirefoxのみ動作します。 */ filter:url(filter.url); } </style> </head> <body> <table border="2"> <tr> <td>grayscale()</td> <td><img src="1.jpg" class="grayscale"></td> <td>sepia()</td> <td><img src="1.jpg" class="sepia"></td> </tr> <tr> <td>saturate()</td> <td><img src="1.jpg" class="saturate"></td> <td>hue-rotate()</td> <td><img src="1.jpg" class="hue-rotate"></td> </tr> <tr> <td>invert()</td> <td><img src="1.jpg" class="invert"></td> <td>opacity()</td> <td><img src="1.jpg" class="opacity"></td> </tr> <tr> <td>brightness()</td> <td><img src="1.jpg" class="brightness"></td> <td>contrast()</td> <td><img src="1.jpg" class="contrast"></td> </tr> <tr> <td>blur()</td> <td><img src="1.jpg" class="blur"></td> <td>drop-shadow()</td> <td><img src="1.jpg" class="drop-shadow"></td> </tr> </table> </body> </html> |