Jul. 27th,2021
プロパティについて
＃
概要
| 初期値 | “filter: none;” |
| 適用対象 | すべての要素(SVGでは“<defs>”要素がないコンテナ要素、すべてのグラフィック要素、“<use>”要素) |
| 継承 | No |
| パーセント値 | パーセント値は指定できません |
| 計算値 | 指定した値 |
| アニメーション | “フィルター効果の補間”を参照 |
“filter”プロパティは要素に適用されるグラフィック・フィルターを指定するプロパティです。
“filter”プロパティでフィルター効果を適用するとCSSだけで画像や要素が描画されるの色合いを変更したり、ぼかし効果やドロップ・シャドウ効果などを適用することができます。
値が“none”でない場合、新たな重ね合わせコンテキストが生成されます。要素のすべての子孫要素にもまとめてフィルター効果が適用されます。
値が“none”でなく、現在のブラウジング・コンテキストにある文書のルート要素でない場合には新たな包含ブロックが生成され、配置位置が指定される子孫要素(“position: absolute;”や“position: fixed;”)の配置位置の基準となります。
フィルター効果は要素のコンテンツ、背景、ボーダー、テキスト装飾、輪郭、スクロールバーなどの要素の描画されるすべての部分に効果を及ぼします。
フィルター効果は適用対象の要素のボックスの形状には影響しませんが、フィルター効果が要素の外側へ効果を及ぼすことはあります。
サンプルコード
img { filter: sepia(100%);}
＃
値
| 値 | 説明 |
|---|---|
| “<filter-value-list>”値 | |
| <url> | SVGの“<filter>”要素で表されるフィルターを参照する (“<svg>”要素や外部のSVGファイルで定義したフィルターを参照することができます。参照先がフィルターではない場合はフィルター・リスト全体が無視されます。) |
| <filter-function> | “blur()”関数や“drop-shadow()”関数などでフィルター効果を指定する |
| 他の値 | |
| none | フィルター効果を適用しない |
| 共通キーワード | |
“<filter-function>”値と“<url>”値はホワイトスペースで区切ることで複数のフィルター効果からなるフィルター・リスト(“<filter-value-list>”値)として指定することができます。複数指定されたフィルター効果は記述された順に適用されます。
“none”キーワードは単独で使用します。
＃
使用例
＃
SVGフィルターを適用する
.filter-svg {
filter: url(sample-filter1.svg#sample-svg-filter);
}
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="sample-svg-filter">
<feTurbulence type="turbulence" baseFrequency="0.1" numOctaves="2" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<figure>
<img class="filter-svg" src="sample.jpg">
<figcaption>
SVGフィルターを適用した写真
</figcaption>
</figure>
＃
＃
＃
