none | フィルターなし | |
blur() | ぼかす 数値+単位で指定 | blur(2px)の例 |
brightness() | 明るさを指定 100%を基準に50%なら半分200%なら倍 | brightness(50%)の例 |
contrast() | コントラストを指定 100%を基準に50%なら半分200%なら倍 | contrast(200%)の例 |
drop-shadow() | ドロップシャドウを適用 drop-shadow(「水平方向の長さ」 「垂直方向の長さ」 「ぼかしの長さ」 「色」) で適用させます | drop-shadow(10px 10px 5px red)の例 |
grayscale() | グレースケールに変換 %で指定。100%で完全なグレースケールになります | grayscale(100%)の例 |
hue-rotate() | 色相を変更 数値+degで角度を指定 | hue-rotate(180deg)の例 |
invert() | 色を反転 %で指定 | invert(30%)の例 |
opacity() | 不透明度を指定 %で指定。0%で完全に透明 | opacity(20%)の例 |
saturate() | 彩度を指定 100%を基準に100より低くすると彩度が下がり 100より大きいと彩度があがる | saturate(200%)の例 |
sepia() | セピア調に変換 %で指定 100%で完全なセピア | sepia(100%)の例 |
/*↓p要素のカーソルを指定*/
p {cursor: 「カーソルの種類」; }