From a01ad6146589ec1924b807a235a443b29c624125 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 2 Jan 2022 19:13:24 +0900 Subject: Web/CSS/backdrop-filter を変換準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/backdrop-filter/index.html | 145 ---------------------------- files/ja/web/css/backdrop-filter/index.md | 145 ++++++++++++++++++++++++++++ 2 files changed, 145 insertions(+), 145 deletions(-) delete mode 100644 files/ja/web/css/backdrop-filter/index.html create mode 100644 files/ja/web/css/backdrop-filter/index.md (limited to 'files') diff --git a/files/ja/web/css/backdrop-filter/index.html b/files/ja/web/css/backdrop-filter/index.html deleted file mode 100644 index 4cbe5f5bc1..0000000000 --- a/files/ja/web/css/backdrop-filter/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: backdrop-filter -slug: Web/CSS/backdrop-filter -tags: - - CSS - - CSS プロパティ - - Graphics - - Layout - - Reference - - SVG - - SVG フィルター - - Web - - ウェブ - - グラフィック - - レイアウト -translation_of: Web/CSS/backdrop-filter ---- -
{{CSSRef}}
- -

backdrop-filter は CSS のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。

- -
/* キーワード値 */
-backdrop-filter: none;
-
-/* SVG フィルターへの URL */
-backdrop-filter: url(commonfilters.svg#filter);
-
-/* <filter-function> 値 */
-backdrop-filter: blur(2px);
-backdrop-filter: brightness(60%);
-backdrop-filter: contrast(40%);
-backdrop-filter: drop-shadow(4px 4px 10px blue);
-backdrop-filter: grayscale(30%);
-backdrop-filter: hue-rotate(120deg);
-backdrop-filter: invert(70%);
-backdrop-filter: opacity(20%);
-backdrop-filter: sepia(90%);
-backdrop-filter: saturate(80%);
-
-/* 複数のフィルター */
-backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
-
-/* グローバル値 */
-backdrop-filter: inherit;
-backdrop-filter: initial;
-backdrop-filter: unset;
-
- -

{{cssinfo}}

- -

構文

- -

値

- -
-
none
-
背後にフィルターを適用しません。
-
<filter-function-list>
-
背景に適用する {{cssxref("<filter-function>")}} または SVG フィルターの空白区切りのリストです。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

CSS

- -
.box {
-  background-color: rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  font-family: sans-serif;
-  text-align: center;
-  line-height: 1;
- -webkit-backdrop-filter: blur(10px);
-  backdrop-filter: blur(10px);
-  max-width: 50%;
-  max-height: 50%;
-  padding: 20px 40px;
-}
-
-html,
-body {
-  height: 100%;
-  width: 100%;
-}
-
-body {
-  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: cover;
-}
-
-.container {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  height: 100%;
-  width: 100%;
-}
- -

HTML

- -
<div class="container">
-  <div class="box">
-    <p>backdrop-filter: blur(10px)</p>
-  </div>
-</div>
-
- -

結果

- -

{{EmbedLiveSample("Example", 600, 400)}}

- -

仕様書

- - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}初回定義
- -

ブラウザーの互換性

- -

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

- -

関連情報

- - diff --git a/files/ja/web/css/backdrop-filter/index.md b/files/ja/web/css/backdrop-filter/index.md new file mode 100644 index 0000000000..4cbe5f5bc1 --- /dev/null +++ b/files/ja/web/css/backdrop-filter/index.md @@ -0,0 +1,145 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS プロパティ + - Graphics + - Layout + - Reference + - SVG + - SVG フィルター + - Web + - ウェブ + - グラフィック + - レイアウト +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}
+ +

backdrop-filter は CSS のプロパティで、要素の背後の領域に、ぼかしや色変化のようなグラフィック効果を適用することができます。要素の背後のすべてに適用されるため、効果を見るためには少なくとも一部が透明な要素またはその背景を作成する必要があります。

+ +
/* キーワード値 */
+backdrop-filter: none;
+
+/* SVG フィルターへの URL */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* <filter-function> 値 */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* 複数のフィルター */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* グローバル値 */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

{{cssinfo}}

+ +

構文

+ +

値

+ +
+
none
+
背後にフィルターを適用しません。
+
<filter-function-list>
+
背景に適用する {{cssxref("<filter-function>")}} または SVG フィルターの空白区切りのリストです。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+ -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+
+ +

結果

+ +

{{EmbedLiveSample("Example", 600, 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}初回定義
+ +

ブラウザーの互換性

+ +

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

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf