From ae413164a3b3406548949f1de60a48f21beb383b Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Tue, 24 Aug 2021 13:14:50 +0900 Subject: Web/CSS/filter を更新 (#2084) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/08/13 時点の英語版に同期 --- files/ja/web/css/filter/index.html | 1138 ----------------------------------- files/ja/web/css/filter/index.md | 1159 ++++++++++++++++++++++++++++++++++++ 2 files changed, 1159 insertions(+), 1138 deletions(-) delete mode 100644 files/ja/web/css/filter/index.html create mode 100644 files/ja/web/css/filter/index.md (limited to 'files') diff --git a/files/ja/web/css/filter/index.html b/files/ja/web/css/filter/index.html deleted file mode 100644 index 35e7ac52bf..0000000000 --- a/files/ja/web/css/filter/index.html +++ /dev/null @@ -1,1138 +0,0 @@ ---- -title: filter -slug: Web/CSS/filter -tags: - - CSS - - CSS プロパティ - - Reference - - SVG - - SVG フィルター - - filter - - フィルター効果 -translation_of: Web/CSS/filter ---- -
{{CSSRef}}
- -

filter は CSS のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。

- -

CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。 SVG フィルター要素への URL で SVG フィルターを参照することもできます。

- -
{{EmbedInteractiveExample("pages/css/filter.html")}}
- - - -

構文

- -
/* SVG フィルターへの URL */
-filter: url("filters.svg#filter-id");
-
-/* <filter-function> 値 */
-filter: blur(5px);
-filter: brightness(0.4);
-filter: contrast(200%);
-filter: drop-shadow(16px 16px 20px blue);
-filter: grayscale(50%);
-filter: hue-rotate(90deg);
-filter: invert(75%);
-filter: opacity(25%);
-filter: saturate(30%);
-filter: sepia(60%);
-
-/* 複数のフィルター */
-filter: contrast(175%) brightness(3%);
-
-/* フィルターを使用しない */
-filter: none;
-
-/* グローバル値 */
-filter: inherit;
-filter: initial;
-filter: unset;
-
- -

次のように関数と共に使用してください。

- -
filter: <filter-function> [<filter-function>]* | none
-
- -

SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。

- -
filter: url(file.svg#filter-element-id)
-
- -

補間

- -

最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("<url>")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが none である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。

- -

形式文法

- -{{csssyntax}} - -

例

- -

定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。

- -
.mydiv {
-  filter: grayscale(50%);
-}
-
-/* Gray all images by 50% and blur by 10px */
-img {
-  filter: grayscale(0.5) blur(10px);
-}
- -

URL 関数を使用して SVG リソースを使用した例は以下の通りです。

- -
.target {
-  filter: url(#c1);
-}
-
-.mydiv {
-  filter: url(commonfilters.xml#large-blur);
-}
-
- -

関数

- -

filter プロパティは none または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は none を返します。特に示す場合を除いて、パーセント記号付きの値 (34% など) を取る関数は、10進数の値 (0.34 など) も受け付けます。

- -

単一の filter プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の filter プロパティに別々に適用した場合とは異なる結果になります。

- -

SVG フィルター

- -

url()

- -

外部 XML ファイルに埋め込むことができる SVG フィルターを指す URI を取ります。

- -
filter: url(resources.svg#c1)
-
- -

フィルター関数

- -

blur()

- -

{{cssxref("filter-function/blur", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 radius の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は 0 です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。

- -
filter: blur(5px)
-
- - - -
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
-    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
-  </filter>
-</svg>
- -
{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}
- -

brightness()

- -

{{cssxref("filter-function/brightness", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 0% の値を設定すると、完全な黒の画像が作成されます。 100% の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 100% を超える値が許されており、より明るい結果が得られます。補間時の空白値は 1 です。

- -
filter: brightness(2)
- -
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="brightness">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="[amount]"/>
-      <feFuncG type="linear" slope="[amount]"/>
-      <feFuncB type="linear" slope="[amount]"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
- - - -

{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}

- -

contrast()

- -

{{cssxref("filter-function/contrast", "contrast()")}} 関数は、入力画像のコントラストを調整します。 0% の値を指定すると完全にグレーの画像が作成されます。 100% の値を指定すると、入力画像は変更されません。 100% を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は 1 です。

- -
filter: contrast(200%)
-
- -
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="contrast">
-    <feComponentTransfer>
-      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
-    </feComponentTransfer>
-  </filter>
-</svg>
-
- - - -
{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}
- -

drop-shadow()

- -

{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は <shadow> 型 (CSS3 Backgrounds で定義) の引数を受け取りますが、 inset キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、より良い性能を得るためにハードウェアアクセラレーションを提供しているブラウザーがあることです。 <shadow> 引数の値は次の通りです。

- -
-
<offset-x> <offset-y> (必須)
-
二つの {{cssxref("<length>")}} 値で、影をずらす大きさを設定します。 <offset-x> は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 <offset-y> は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("<length>")}} を参照してください。
- 両方の値が 0 である場合は、影は要素の背後に配置されます (そして、 <blur-radius> や <spread-radius> を設定することで、ぼかしの効果を生成することができます)。
-
<blur-radius> (オプション)
-
これは三番目の {{cssxref("<length>")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 0 (影の縁がはっきりしている) になります。
-
<color> (オプション)
-
指定可能なキーワードや記述方法は {{cssxref("<color>")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("<color>")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。
-
- -
filter: drop-shadow(16px 16px 10px black)
- -
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
- <filter id="drop-shadow">
-    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
-    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
-    <feFlood flood-color="[color]"/>
-    <feComposite in2="offsetblur" operator="in"/>
-    <feMerge>
-      <feMergeNode/>
-      <feMergeNode in="SourceGraphic"/>
-    </feMerge>
-  </filter>
-</svg>
-
- - - -
{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}
- -

grayscale()

- -

{{cssxref("filter-function/grayscale", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 amount の値は変換の程度を定義します。 100% の値は完全にグレースケールになります。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の空白値は 0 です。

- -
filter: grayscale(100%)
- - - -
{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}
- -

hue-rotate()

- -

{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 angle の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 0deg の値を指定すると入力は変更されません。補完時の空白値は 0 です。最大値はありませんが、 360deg を超える値の以上の値の場合は回り込みになります。

- -
filter: hue-rotate(90deg)
- - - -
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
-  <filter id="svgHueRotate" >
-    <feColorMatrix type="hueRotate" values="[angle]" />
-  <filter />
-</svg>
- -

{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}

- -

invert()

- -

{{cssxref("filter-function/invert", "invert()")}} 関数は、入力画像のサンプルを反転します。 amount の値は、変換の度合を定義します。 100% の値を指定すると、完全に反転されます。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の空白値は 0 です。

- -
filter: invert(100%)
- - - -

{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}

- -

opacity()

- -

{{cssxref("filter-function/opacity", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 amount の値は、変換の度合を定義します。 0% の値を指定すると、完全に透明になります。 100% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は 1 です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。

- -
filter: opacity(50%)
- - - -

{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}

- -

saturate()

- -

{{cssxref("filter-function/saturate", "saturate()")}} 関数は、入力画像の彩度を変化させます。 amount の値は、変換の度合を定義します。 0% の値を指定すると、無彩色になります。 100% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。 100% を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は 1 です。

- -
filter: saturate(200%)
- - - -

{{EmbedLiveSample('saturate_example','100%','332px','')}}

- -

sepia()

- -

{{cssxref("filter-function/sepia", "sepia()")}} 関数は、入力画像をセピア調にします。 amount の値は、変換の度合を定義します。 100% の値を指定すると、完全にセピア調になります。 0% では入力画像が変化しないままになります。 0% と 100% の間は効果の線形乗数になります。補完時の空白値は 0 です。

- -
filter: sepia(100%)
- - - -

{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}

- -

関数の組み合わせ

- -

いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。

- -
filter: contrast(175%) brightness(103%)
- - - -

{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}{{Spec2('Filters 1.0')}}初回定義
- -
{{cssinfo}}
- -

ブラウザーの互換性

- -

{{Compat("css.properties.filter")}}

- -

関連情報

- - diff --git a/files/ja/web/css/filter/index.md b/files/ja/web/css/filter/index.md new file mode 100644 index 0000000000..c71814bc21 --- /dev/null +++ b/files/ja/web/css/filter/index.md @@ -0,0 +1,1159 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - CSS プロパティ + - Reference + - SVG + - SVG フィルター + - recipe:css-property +browser-compat: css.properties.filter +translation_of: Web/CSS/filter +--- +{{CSSRef}} + +**`filter`** は [CSS](/ja/docs/Web/CSS) のプロパティで、ぼかしや色変化などのグラフィック効果を要素に適用します。フィルターは画像、背景、境界の描画を調整するためによく使われます。 + +CSS 標準に含まれているものは、定義済みの効果を実現するためのいくつかの関数です。[SVG の filter 要素](/ja/docs/Web/SVG/Element/filter)への URL で SVG フィルターを参照することもできます。 + +{{EmbedInteractiveExample("pages/css/filter.html")}} + +## 構文 + +```css +/* SVG フィルターへの URL */ +filter: url("filters.svg#filter-id"); + +/* <filter-function> 値 */ +filter: blur(5px); +filter: brightness(0.4); +filter: contrast(200%); +filter: drop-shadow(16px 16px 20px blue); +filter: grayscale(50%); +filter: hue-rotate(90deg); +filter: invert(75%); +filter: opacity(25%); +filter: saturate(30%); +filter: sepia(60%); + +/* 複数のフィルター */ +filter: contrast(175%) brightness(3%); + +/* フィルターを使用しない */ +filter: none; + +/* グローバル値 */ +filter: inherit; +filter: initial; +filter: revert; +filter: unset; +``` + +次のように関数と共に使用してください。 + +```css +filter: []* | none +``` + +SVG の {{SVGElement("filter")}} 要素への参照の場合は、次のようにしてください。 + +```css +filter: url(file.svg#filter-element-id) +``` + +### 補間 + +最初のフィルターと最後のフィルターの両方が同じ長さの関数リストであり、 {{cssxref("url()","url()")}} を持たない場合、それぞれのフィルター関数はその固有の規則に従って補間されます。長さが異なる場合は、長い方のリストから欠落している等価なフィルター関数が、空白値を使って短い方のリストの最後に追加され、すべてのフィルター関数がその固有の規則に従って補間されます。一方のフィルターが `none` である場合は、フィルター関数の既定値を用いて、もう一方のフィルター関数のリストに置き換えられ、すべてのフィルター関数がその固有の規則に従って補間されます。それ以外の場合は、離散補間が使用されます。 + +## 関数 + +`filter` プロパティは `none` または以下にある関数を一つ以上使って指定します。いずれかの関数の引数が妥当でない場合、関数は `none` を返します。特に示す場合を除いて、パーセント記号付きの値 (`34%` など) を取る関数は、10進数の値 (`0.34` など) も受け付けます。 + +単一の `filter` プロパティに2つ以上の関数を指定した場合、同じフィルター関数を2つ以上の `filter` プロパティに別々に適用した場合とは異なる結果になります。 + +### SVG フィルター + +#### url() + +外部 XML ファイルに埋め込むことができる [SVG フィルター](/ja/docs/Web/SVG/Element/filter)を指す URI を取ります。 + +```css +filter: url(resources.svg#c1) +``` + +### フィルター関数 + +#### blur() + +{{cssxref("filter-function/blur()", "blur()")}} 関数は、入力画像にガウスぼかしを適用します。 `radius` の値は、ガウス関数の標準偏差の値、つまり画面上のいくつのピクセルが互いに溶け込むかを定義します。補間のための空白値は `0` です。 この引数は CSS の長さとして指定されますが、パーセント値は受け付けません。 + +```css +filter: blur(5px) +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+
+ + + + + + +
+
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", Lucida, Arial, Helvetica, sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -webkit-filter:blur(5px); + -ms-filter:blur(5px); + filter:blur(5px); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0; + margin: 0 0 1.286em; + height: 100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +```svg + + + + + +``` + +{{EmbedLiveSample('blur','100%','236px','','', 'no-codepen')}} + +#### brightness() + +{{cssxref("filter-function/brightness()", "brightness()")}} 関数は、入力画像に線形乗数を適用して明るさを明るくしたり暗くしたりします。 `0%` の値を設定すると、完全な黒の画像が作成されます。 `100%` の値を指定すると、入力は変更されません。その他の値は効果の線形乗数です。 `100%` を超える値が許されており、より明るい結果が得られます。補間時の空白値は `1` です。 + +```css +filter: brightness(2) +``` + +```svg + + + + + + + + + +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + + + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:brightness(2); + -webkit-filter:brightness(2); + -ms-filter:brightness(2); + filter:brightness(2); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + height:100%; + width: 85%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('brightness','100%','231px','','', 'no-codepen')}} + +#### contrast() + +{{cssxref("filter-function/contrast()", "contrast()")}} 関数は、入力画像のコントラストを調整します。 `0%` の値を指定すると完全にグレーの画像が作成されます。 `100%` の値を指定すると、入力画像は変更されません。 `100%` を超える値を指定すると、よりコントラストの高い結果が得られます。補完時の空白値は `1` です。 + +```css +filter: contrast(200%) +``` + +```svg + + + + + + + + + +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + + + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:contrast(200%); + -webkit-filter:contrast(200%); + -ms-filter:contrast(200%); + filter:contrast(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('contrast','100%','203px','','', 'no-codepen')}} + +#### drop-shadow() + +{{cssxref("filter-function/drop-shadow()", "drop-shadow()")}} 関数は、入力画像に効果を適用します。ドロップシャドウとは、入力画像のアルファマスクを特定の色で、ずらしてぼやかして描画したものを画像の下に合成したものです。この関数は `` 型 ([CSS3 Backgrounds](https://www.w3.org/TR/css-backgrounds-3/#typedef-shadow) で定義) の引数を受け取りますが、 `inset` キーワードは使用できません。この関数は、より確立された {{cssxref("box-shadow")}} プロパティに似ています。違いはフィルターであること、一部のブラウザーでは性能を改善するためにハードウェアアクセラレーションを提供していることです。 `` 引数の値は次の通りです。 + +- `` `` (必須) + - : 二つの {{cssxref("<length>")}} 値で、影をずらす大きさを設定します。 `` は水平の距離を指定します。負の数の場合、影を要素の左側に配置します。 `` は垂直の距離を指定します。負の数の場合、影を要素の上に配置します。利用可能な単位は {{cssxref("<length>")}} を参照してください。 + 両方の値が `0` である場合は、影は要素の背後に配置されます (そして、 `<blur-radius>` や `<spread-radius>` を設定することで、ぼかしの効果を生成することができます)。 +- `<blur-radius>` (オプション) + - : これは三番目の {{cssxref("<length>")}} 値です。この値が大きくなるほど、ぼかしが大きくなり、影がより大きく薄くなります。負の数を指定することはできません。指定されなかった場合は、 `0` (影の縁がはっきりしている) になります。 +- `<color>` (オプション) + - : 指定可能なキーワードや記述方法は {{cssxref("<color>")}} 値を参照してください。指定されなかった場合は、使用される色はブラウザーに依存します。 - 普通は {{cssxref("<color>")}} プロパティの値ですが、 Safari では現在のところ、この場合には透明な影を描くことに注意してください。 + + +```css +filter: drop-shadow(16px 16px 10px black) +``` + +```svg + + + + + + + + + + + + +``` + +```html hidden + + + + + + + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+
+ + + + + + + + + + + +
+
test_form_4 distorted border - Original imagetest_form_4 distorted border - Live example +
+ + + + + + + + + + + + + + +
+ 		test_form_4 distorted border drop shadow - Static example
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: drop-shadow(16px 16px 10px black); + -webkit-filter: drop-shadow(16px 16px 10px black); + -ms-filter: drop-shadow(16px 16px 10px black); + filter: drop-shadow(16px 16px 10px black); +} +#img12 { + width:100%; + height:auto; + -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); + filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8)); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +#irregular-shape { + width: 64%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3, #img13 { + width:100%; + height:auto; +} +``` + +{{EmbedLiveSample('drop-shadow','100%','400px','','', 'no-codepen')}} + +#### grayscale() + +{{cssxref("filter-function/grayscale()", "grayscale()")}} 関数は入力画像をグレースケールに変換します。 `amount` の値は変換の程度を定義します。 `100%` の値は完全にグレースケールになります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: grayscale(100%) +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:grayscale(100%); + -webkit-filter:grayscale(100%); + -ms-filter:grayscale(100%); + filter:grayscale(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('grayscale','100%','209px','','', 'no-codepen')}} + +#### hue-rotate() + +{{cssxref("filter-function/hue-rotate()", "hue-rotate()")}} 関数は、入力画像の色相を回転させます。 `angle` の値は、色相環を何度回転させて入力サンプルを調整するかを定義します。 `0deg` の値を指定すると入力は変更されません。補完時の空白値は `0` です。最大値はありませんが、 `360deg` を超える値の以上の値の場合は回り込みになります。 + +```css +filter: hue-rotate(90deg) +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter:hue-rotate(90deg); + -webkit-filter:hue-rotate(90deg); + -ms-filter:hue-rotate(90deg); + filter:hue-rotate(90deg); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +```html + + + + + +``` + +{{EmbedLiveSample('hue-rotate','100%','221px','','', 'no-codepen')}} + +#### invert() + +{{cssxref("filter-function/invert()", "invert()")}} 関数は、入力画像のサンプルを反転します。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全に反転されます。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: invert(100%) +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + + + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: invert(100%); + -webkit-filter: invert(100%); + -ms-filter: invert(100%); + filter: invert(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('invert','100%','407px','','', 'no-codepen')}} + +#### opacity() + +{{cssxref("filter-function/opacity()", "opacity()")}} 関数は、入力画像のサンプルに透過度を適用します。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、完全に透明になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。これは、入力画像のサンプルに量を乗算することに相当します。補完時の空白値は `1` です。この関数は、より確立された {{cssxref("opacity")}} プロパティに似ていますが、フィルターの場合、一部のブラウザーでは性能を向上させるためにハードウェアアクセラレーションを提供する点が異なります。 + +```css +filter: opacity(50%) +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: opacity(50%); + -webkit-filter: opacity(50%); + -ms-filter: opacity(50%); + filter: opacity(50%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('opacity','100%','210px','','', 'no-codepen')}} + +#### saturate() + +{{cssxref("filter-function/saturate()", "saturate()")}} 関数は、入力画像の彩度を変化させます。 `amount` の値は、変換の度合を定義します。 `0%` の値を指定すると、無彩色になります。 `100%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。 `100%` を超える値を指定することもでき、彩度を増した結果になります。補完時の空白値は `1` です。 + +```css +filter: saturate(200%) +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: saturate(200%); + -webkit-filter: saturate(200%); + -ms-filter: saturate(200%); + filter: saturate(200%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('saturate','100%','332px','','', 'no-codepen')}} + +#### sepia() + +{{cssxref("filter-function/sepia()", "sepia()")}} 関数は、入力画像をセピア調にします。 `amount` の値は、変換の度合を定義します。 `100%` の値を指定すると、完全にセピア調になります。 `0%` では入力画像が変化しないままになります。 `0%` と `100%` の間は効果の線形乗数になります。補完時の空白値は `0` です。 + +```css +filter: sepia(100%) +``` + +```html hidden + + + + + + + + + + + + + + + + + +
Original imageLive exampleSVG EquivalentStatic example
+ + + + +
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: sepia(100%); + -webkit-filter: sepia(100%); + -ms-filter: sepia(100%); + filter: sepia(100%); } +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('sepia','100%','229px','','', 'no-codepen')}} + +

関数の組み合わせ

+ +いくつかの関数を組み合わせてレンダリングを操作することができます。次の例では、画像のコントラストと明るさを強調しています。 + +```css +filter: contrast(175%) brightness(103%) +``` + +```html hidden + + + + + + + + + + + + + + + +
Original imageLive exampleStatic example
+``` + +```css hidden +html { + height:100%; +} +body { + font: 14px/1.286 "Lucida Grande","Lucida Sans Unicode","DejaVu Sans",Lucida,Arial,Helvetica,sans-serif; + color: rgb(51, 51, 51); + height:100%; + overflow:hidden; +} +#img2 { + width:100%; + height:auto; + -moz-filter: contrast(175%) brightness(103%); + -webkit-filter: contrast(175%) brightness(103%); + -ms-filter: contrast(175%) brightness(103%); + filter: contrast(175%) brightness(103%); +} +table.standard-table { + border: 1px solid rgb(187, 187, 187); + border-collapse: collapse; + border-spacing: 0px; + margin: 0px 0px 1.286em; + width: 85%; + height: 100%; +} +table.standard-table th { + border: 1px solid rgb(187, 187, 187); + padding: 0px 5px; + background: none repeat scroll 0% 0% rgb(238, 238, 238); + text-align: left; + font-weight: bold; +} +table.standard-table td { + padding: 5px; + border: 1px solid rgb(204, 204, 204); + text-align: left; + vertical-align: top; + width:25%; + height:auto; +} +#img3 { + height:100%; +} +``` + +{{EmbedLiveSample('Combining_functions','100%','209px','','', 'no-codepen')}} + +## 公式定義 + +{{cssinfo}} + +## 形式文法 + +{{csssyntax}} + +## 例 + +### フィルター関数の適用 + +定義済み関数を使用した例が以下にあります。個別の例についてはそれぞれの関数を参照してください。 + +```css +.mydiv { + filter: grayscale(50%); +} + +/* Gray all images by 50% and blur by 10px */ +img { + filter: grayscale(0.5) blur(10px); +} +``` + +### SVG フィルターの適用 + +URL 関数を使用して SVG リソースを使用した例は以下の通りです。 + +```css +.target { + filter: url(#c1); +} + +.mydiv { + filter: url(commonfilters.xml#large-blur); +} +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [HTML コンテンツへの SVG 効果の適用](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) +- {{cssxref("mask")}} プロパティ +- [SVG](/ja/docs/Web/SVG) -- cgit v1.2.3-54-g00ecf