CSSフィルターにはどんな魔法の用途があるか

フィルター: <フィルター関数> [<フィルター関数>]* | なし
フィルター: url(file.svg#filter-element-id)

/* SVG フィルターの使用 */
フィルター: url("filters.svg#filter-id");
/* フィルター機能を使用する */
フィルター: ぼかし(5px);
フィルター: 明るさ(0.4);
フィルター:コントラスト(200%);
フィルター: ドロップシャドウ(16px 16px 20px 青);
フィルター: グレースケール(50%)
フィルター: 色相回転(90度);
フィルター: 反転(75%)
フィルター: 不透明度(25%)
フィルター: 飽和(30%)
フィルター：セピア（60％）
/* 複数のフィルター */
フィルター: コントラスト(175%) 明るさ(3%)
/* フィルターを使用しない */
フィルター: なし;
/* グローバル変数 */
フィルター: 継承;
フィルター: 初期;
フィルター: 未設定; 

フィルター: ドロップシャドウ(x オフセット、y オフセット、ぼかしサイズ、カラー値);

フィルター: ドロップシャドウ(1px 1px 15px rgba(0, 0, 0, .5));

<img class="box-shadow" src="futurama.jpg" />
<img class="drop-shadow" src="futurama.jpg" />

.box-shadow {
  ボックスの影: 1px 1px 15px rgba(0, 0, 0, .5);
}
.ドロップシャドウ {
  フィルター: ドロップシャドウ(1px 1px 15px rgba(0, 0, 0, .5));
}

<本文>
  <h1 class="title">フューチュラマ</h1>
  <img class="img" width="500" src="./images/futurama.jpg" />
</本文>

.グレー{
  フィルター: グレースケール(100%)
}

.グレー{
  -webkit-フィルター: グレースケール(1);
  -webkit-フィルター: グレースケール(100%);
  -moz-filter: グレースケール(100%);
  -ms-filter: グレースケール(100%);
  -o-filter: グレースケール(100%);
  フィルター: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  フィルター: progid:DXImageTransform.Microsoft.BasicImage(グレースケール=1);
  フィルター: グレースケール(100%)
}

（関数setGray() {
  var endTime = Date.parse("2077 年 4 月 6 日 00:00:01");
  var タイムスタンプ = Date.parse(new Date());
  タイムスタンプ <= 終了時刻の場合
    document.querySelector('html').classList.add('gray');
  }
})();

<div class="コンテナ">
  <a class="button">🍋</a>
  <a class="button">🍎</a>
  <a class="button">🍐</a>
  <a class="button dark">🥑</a>
  🍄
  🌽
  <a class="button disabled">🍒</a>
  <a class="button disabled">🍅</a>
  <a class="button disabled">🥔</a>
</div>

。容器 {
  マージン: 40px;
}
。ボタン {
  パディング: 0.5em 0.5em;
  背景: #E0E0E0;
  境界線の半径: 3px;
}
.button.dark {
  背景: #333;
}
.button:hover:not(.disabled) {
  カーソル: ポインタ;
  境界線の半径: 3px;
  フィルター: 明るさ(110%) 彩度(140%)
}
.ボタンが無効{
  フィルター: グレースケール(100%)
}

<div class="glass glass-by-filter"></div>
<div class="glass glass-by-backdrop-filter"></div>

。ガラス {
  高さ: 300px;
  幅: 300ピクセル;
  境界線: 1px 溝 #EFEFEF;
  境界線の半径: 12px;
  背景: rgba(242, 242, 242, 0.5);
  ボックスシャドウ: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
    0 0.9px 1.7px rgba(0, 0, 0, 0.179)、0 1.8px 3.5px rgba(0, 0, 0, 0.224)、
    0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
}

.ガラスフィルター {
  zインデックス: 1;
  ボックスのサイズ: 境界線ボックス;
  位置: 相対的;
}
.glass-by-filter::before {
  コンテンツ： "";
  位置: 絶対;
  上: 0; 右: 0; 下: 0; 左: 0;
  Zインデックス: -1;
  背景: 継承;
  フィルター: ぼかし(10px);
}

.glass-by-backdrop-filter {
  背景フィルター: ぼかし(10px);
}

<フォーム id="imageEditor">
  <p>
    <label for="gs">グレースケール</label>
    <input id="gs" name="gs" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="blur">ぼかし</label>
    <input id="blur" name="blur" type="range" min="0" max="10" value="0">
  </p>
  <p>
    <label for="br">露出</label>
    <input id="br" name="br" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="ct">コントラスト</label>
    <input id="ct" name="ct" type="range" min="0" max="200" value="100">
  </p>
  <p>
    <label for="huer">色相回転</label>
    <input id="huer" name="huer" type="range" min="0" max="360" value="0">
  </p>
  <p>
    <label for="opacity">不透明度</label>
    <input id="不透明度" name="不透明度" type="範囲" min="0" max="100" value="100">
  </p>
  <p>
    <label for="invert">反転</label>
    <input id="invert" name="invert" type="range" min="0" max="100" value="0">
  </p>
  <p>
    <label for="saturate">飽和させる</label>
    <input id="saturate" name="saturate" type="range" min="0" max="500" value="100">
  </p>
  <p>
    <label for="sepia">セピア</label>
    <input id="セピア" name="セピア" type="範囲" min="0" max="100" value="0">
  </p>
  <input type="reset" form="imageEditor" id="reset" value="リセット" />
</フォーム>
<div id="imageContainer" class="center">
  <img src="futurama.jpg">
</div>

関数editImage() {
  var gs = $("#gs").val(); // グレースケール
  var blur = $("#blur").val(); // ぼかし
  var br = $("#br").val(); // 明るさ
  var ct = $("#ct").val(); // コントラスト
  var huer = $("#huer").val(); // 色相回転
  var opacity = $("#opacity").val(); // 不透明度
  var invert = $("#invert").val(); // 反転
  var saturate = $("#saturate").val(); // 飽和
  var sepia = $("#sepia").val(); // セピア
  $("#imageContainer 画像").css(
    「フィルター」、'グレースケール(' + gs+
    '%) ぼかし(' + ぼかし +
    'px) 明るさ(' + br +
    '%) コントラスト(' + ct +
    '%) 色相回転(' + huer +
    '度) 不透明度(' + 不透明度 +
    '%) 反転(' + 反転 +
    '%) 飽和(' + 飽和 +
    '%) セピア(' + セピア + '%)'
  );
  $("#imageContainer 画像").css(
    "-webkit-filter", 'グレースケール(' + gs+
    '%) ぼかし(' + ぼかし +
    'px) 明るさ(' + br +
    '%) コントラスト(' + ct +
    '%) 色相回転(' + huer +
    '度) 不透明度(' + 不透明度 +
    '%) 反転(' + 反転 +
    '%) 飽和(' + 飽和 +
    '%) セピア(' + セピア + '%)'
  );
}
// 入力値が変更されたときにフィルターを適用します $("input[type=range]").change(editImage).mousemove(editImage);