CSS - filter
概要
| 属性名 | filter |
|---|---|
| 値 | none | <filter-value-list> |
| 値の詳細 |
<filter-value-list> = [ <filter-function> | url(<url>) ]+ <filter-function> = blur(<length>?) | brightness(<number-percentage>?) | contrast(<number-percentage>?) | drop-shadow(<color>? && <length>{2,3}) | grayscale(<number-percentage>?) | hue-rotate([<angle> | <zero>]?) | invert(<number-percentage>?) | opacity(<number-percentage>?) | saturate(<number-percentage>?) | sepia(<number-percentage>?) |
| 初期値 | none |
| 適用可能要素 | すべての要素 |
| 継承 | 継承しない |
サポート (説明)
| CSS | IE | Edge | Firefox | Chrome | Opera | Safari | |
|---|---|---|---|---|---|---|---|
| 基本 | CSS3 | (未) | 13 | 35 | 53 | 40 | 9.1 |
説明
画像などの要素に対して、ぼかし、影つけ、透明化などのフィルタを適用します。Internet Explorer ではサポートされていません。下記の例では元の画像(左)に、ぼかしのフィルタを適用しています。
<img src="neko.jpg"> <img src="neko.jpg" style="filter:blur(2px)">
一度に複数のフィルタを適用することも可能です。下記の例では、ぼかしと透明化のフィルタを適用しています。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:blur(2px) opacity(40%)">
画像だけではなく、テキストなどの要素に対しても適用できます。
<span style="font-size:24pt;">FILTER</span> <span style="font-size:24pt; filter:drop-shadow(3px 3px 1px #999)">FILTER</span>
詳細
◆ filter: blur( [ length ] )
要素をぼかします。length にはぼかしの強さを 2px などの長さで指定します。省略時のデフォルト値は 0px (ぼかし無し) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:blur(2px)">
◆ filter: brightness(rate)
要素の明暗を調整します。rate には 1.7 や 170% などの強度を指定します。省略時のデフォルト値は 1 (変更無し) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:brightness(1.7)">
◆ filter: contrast(rate)
要素のコントラストを指定します。rate には 1.7 や 170% などの強度を指定します。省略時のデフォルト値は 1 (変更無し) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:contrast(2.0)">
◆ filter: drop-shadow(x y blur color)
要素に影をつけます。x と y には影を右方向、下方向にどのくらいずらして表示するかを指定します。blur には影をぼかす度合いを指定します。省略時は 0 (ぼかし無し)とみなされます。color には影の色を指定します。省略時は現在の color 値が適用されます。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:drop-shadow(6px 6px 2px #999)">
◆ filter: grayscale(rate)
要素をグレーにします。rate には 0%～100% または 0～1.0 までの度合いを指定します。省略時のデフォルト値は 1 (完全にグレー化) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:grayscale(1.0)">
◆ filter: hue-rotate(angle)
要素の色相を変換します。angle には 0deg ～ 360deg の色相変化量を指定します。省略時のデフォルト値は 0deg (変化無し) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:hue-rotate(180deg)">
◆ filter: invert(rate)
要素の階調を反転させます。rate には 0%～100% または 0～1.0 までの反転度合いを指定します。省略時のデフォルト値は 1 (完全反転) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:invert(100%)">
◆ filter: opacity(rate)
要素を透明にします。rate には 0%～100% または 0～1.0 までの不透明度を指定します。省略時のデフォルト値は 1 (完全不透明) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:opacity(30%)">
◆ filter: saturate(rate)
要素の彩度を調整します。rate には 1.7 や 170% の様な割合を指定します。省略時のデフォルト値は 1 (変更しない) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:saturate(200%)">
◆ filter: sepia(rate)
要素をセピア調にします。rate には 0%～100% または 0～1.0 までの度合いを指定します。省略時のデフォルト値は 1 (完全セピア化) です。
<img src="neko.jpg" alt="neko"> <img src="neko.jpg" alt="neko" style="filter:sepia(100%)">
◆ filter: url(url#filter-name)
要素に SVGフィルタを適用します。下記の例では、画像に対して、SVG 中に定義された myFilter という名前のフィルタを適用しています。上記の組み込み関数のみを用いるよりも、より詳細なフィルタを作成することができます。
<img src="neko.jpg" alt="neko">
<img src="neko.jpg" alt="neko" style="filter:url(#myFilter)">
<svg width="0px" height="0px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="myFilter">
<feGaussianBlur stdDeviation="2"/>
</filter>
</defs>
</svg>
リンク
- https://drafts.fxtf.org/filter-effects/#FilterProperty
- https://developer.mozilla.org/ja/docs/Web/CSS/filter
- https://caniuse.com/#feat=css-filters