CSS3 のフィルタプロパティの使用に関する詳細な説明

<div データフィルター="画像通常">
 <h2>通常</h2>
 <img src="1.jpg">
</div>

<div データフィルター="画像グレースケール">
 <h2>グレースケール</h2>
 <img src="1.jpg">
</div>


//値は0から1までの小数で、grayscale(0)は元の画像を意味し、grayscale(1)は完全にグレーになることを意味します。
[データフィルター=画像グレースケール] 画像 {
  フィルター: グレースケール(50%)
  -webkit-filter: grayscale(50%); /* Chrome、Safari、Opera */
}

// (値は 0 から 1 までの小数です)
<div データフィルター="画像飽和">
 <h2>飽和させる</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像飽和] 画像 {
  フィルター: 飽和(360%)
  -webkit-filter:saturate(360%); /* Chrome、Safari、Opera */
}

<div データフィルター="画像セピア">
 <h2>セピア</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像セピア] 画像 {
  フィルター: セピア(100%)
  -webkit-filter: セピア(100%); /* Chrome、Safari、Opera */
}

<div データフィルター="画像反転">
 <h2>反転</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像反転] 画像 {
  フィルター: 反転(100%);
  -webkit-filter: invert(100%); /* Chrome、Safari、Opera */
}

<div データフィルター="画像の不透明度">
 <h2>不透明度</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像の不透明度] 画像 {
  フィルター: 不透明度(50%)
  -webkit-filter: 不透明度(50%); /* Chrome、Safari、Opera */
}

<div データフィルター="画像の明るさ">
 <h2>明るさ</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像の明るさ] 画像 {
  フィルター：明るさ（120％）
  -webkit-filter: 明るさ(120%); /* Chrome、Safari、Opera */
}

<div データフィルター="画像コントラスト">
 <h2>コントラスト</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像コントラスト] 画像 {
  フィルター:コントラスト(160%);
  -webkit-filter:contrast(160%); /* Chrome、Safari、Opera */
}

<div データフィルター="画像の色相回転">
 <h2>色相回転</h2>
 <img src="1.jpg">
</div>

[データフィルター=画像の色相回転] 画像 {
  フィルター: 色相回転(160度);
  -webkit-filter: hue-rotate(160deg); /* Chrome、Safari、Opera */
}

<div データフィルター="画像のぼかし">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>


[データフィルター=画像ぼかし] 画像 {
  フィルター: ぼかし(2px);
  -webkit-filter: blur(2px); /* Chrome、Safari、Opera */
}

<div データフィルター="ドロップシャドウ">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>

[データフィルター=ドロップシャドウ] 画像 {
  フィルター: ドロップシャドウ(16px 16px 20px 青);
  -webkit-filter: drop-shadow(16px 16px 20px blue); /* Chrome、Safari、Opera */
}

<div データフィルター="ボックスシャドウ">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>

/* 影の効果を追加 */
[データフィルター=ボックスシャドウ] 画像 {
  ボックスの影:16px 16px 20px 青;
  -webkit-filter:box-shadow:16px 16px 20px blue; /* Chrome、Safari、Opera */
}

<div データフィルター="複数のフィルター">
 <h2>ぼかし</h2>
 <img src="1.jpg">
</div>

/*ボタンと画像の明るさとコントラストを調整します*/
[データフィルター=複数フィルター] 画像 {
   フィルター: コントラスト(175%) 明るさ(3%)
   -webkit-filter: コントラスト(175%) 明るさ(3%); /* Chrome、Safari、Opera */
}

/*ぼかしとコントラストを混ぜて融合効果を生み出す*/
.フィルターミックス{
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
    幅: 300ピクセル;
    高さ: 200px;
    フィルター:コントラスト(20);
    背景: #fff;
}
.filter-mix::before {
    コンテンツ： "";
    位置: 絶対;
    幅: 120ピクセル;
    高さ: 120px;
    境界線の半径: 50%;
    背景: #333;
    上: 40px;
    左: 40px;
    zインデックス: 2;
    フィルター: ぼかし(6px);
    ボックスのサイズ: 境界線ボックス;
    アニメーション: filterBallMove 4s easy-out infinite;
}

.filter-mix::after {
    コンテンツ： "";
    位置: 絶対;
    幅: 80ピクセル;
    高さ: 80px;
    境界線の半径: 50%;
    背景: #3F51B5;
    上: 60px;
    右: 40px;
    zインデックス: 2;
    フィルター: ぼかし(6px);
    アニメーション: filterBallMove2 4s easy-out infinite;
}

@keyframes フィルターボール移動 {
    50% {
        左: 140px;
    }
}

@keyframes フィルターボール移動2 {
    50% {
        右: 140px;
    }
}

フィルター: ぼかし(20px) コントラスト(30);

アニメーション: 2 秒無限移動、0.2 秒線形移動。

$フィルター: (
 grayscale: '(50%)', // グレースケール saturate: '(360%)', // 彩度 sepia: '(100%)', // セピア invert: '(100%)', // 不透明度: '(50%)', // 明度: '(120%)', // コントラスト: '(160%)', // 色相回転:​​ '(160deg)', // ぼかし: '(2px)', // ドロップシャドウ: 'drop-shadow(16px 16px 20px blue)', // 影);

@each $type、$filters 内の $value {
 [データフィルター="画像-#{$type}"] {
  画像 {
       フィルター: #{$type}#{$value};
  }
 }
}