CSS
フィルタプロパティ

構文

• フィルタ：なし（デフォルト値）
• filter：initial（デフォルトはnone）;
• フィルタ：継承（デフォルトは親の値）;
• フィルタ：blur（px）
• フィルター：明るさ（数値|％）
• フィルター：コントラスト（数値|％）
• フィルタ：ドロップシャドウ（水平シャドー-px垂直シャドウ-pxシャドウ - ブラー-pxシャドウ - スプレッドカラー）
• フィルタ：グレースケール（数値|％）
• フィルタ：hue-rotate（deg）
• フィルタ：反転（数値|％）
• フィルタ：不透明度（数値|％）
• フィルタ：飽和（数値|％）
• フィルター：セピア（数値|％）

パラメーター

備考

ドロップシャドウ（可能であればボックスシャドウを使用）

HTML

<p>My shadow always follows me.</p>

CSS

p {
    -webkit-filter: drop-shadow(10px 10px 1px green);
    filter: drop-shadow(10px 10px 1px green);
}

結果

複数のフィルタ値

複数のフィルターを使用するには、各値をスペースで区切ります。

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
    filter: brightness(200%) grayscale(100%) sepia(100%) invert(100%);
}

結果

色相回転

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: hue-rotate(120deg);
    filter: hue-rotate(120deg);
}

結果

反転色

HTML

<div></div>

CSS

div {
    width: 100px;
    height: 100px;
    background-color: white;
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

結果

白から黒に変わります。

ぼかし

HTML

<img src='donald-duck.png' alt='Donald Duck' title='Donald Duck' />

CSS

img {
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

結果

あなたの眼鏡をこすります。