グラフィック効果を要素に適用するためのプロパティ
フィルターの各関数でのグラフィック効果のサンプル
ニコニコ大百科へようこそ
サンプル
ニコニコ大百科へようこそfilter: blur(3px);
ニコニコ大百科へようこそfilter: brightness(2);
ニコニコ大百科へようこそfilter: contrast(75%);
ニコニコ大百科へようこそfilter: drop-shadow(5px 5px 2px #444);
ニコニコ大百科へようこそfilter: grayscale(100%);
ニコニコ大百科へようこそfilter: hue-rotate(180deg);
ニコニコ大百科へようこそfilter: invert(100%);
ニコニコ大百科へようこそfilter: opacity(50%);
フィルターの各関数について
blur()
指定した要素にblur ガウスぼかしを適用します。
()内にてぼかしの半径を単位付きで指定します。
指定した半径が大きくなるほど要素はほやけます。
マイナスの値は無効値です。
利用できる単位は、 px|em|pt|mm|cm|in|pc|exです。
既定値および効果なし時は0です。
brightness()
指定した要素のbrightness 明度を調整します。
()内にて明るさを指定します。
指定した値が大きくなるほど要素は明るく、値が小さくなるほど要素は暗くなります。
数値または%にて指定します。
既定値および効果なし時は1（100%）です。
1.5と150%は同一の結果となります。
値が小さくなるほど要素は暗くなります
- brightness(1)
![]()
- brightness(0.8)
![]()
- brightness(0.6)
![]()
- brightness(0.4)
![]()
値が大きくなるほど要素は明るくなります
- brightness(1)
![]()
- brightness(1.2)
![]()
- brightness(1.4)
![]()
- brightness(1.6)
![]()
値が0になると黒い要素となります
- brightness(0)
![]()
contrast()
指定した要素のcontrast コントラストを調整します。
()内にて明るさを指定します。
指定した値が大きくなるほど要素のコントラストが上がり、値が小さくなるほど要素のコントラストが下がります。
数値または%にて指定します。
既定値および効果なし時は1（100%）です。
1.5と150%は同一の結果となります。
drop-shadow()
指定した要素のdrop-shadow ドロップシャドウを適用します。
()内にて２つまたは３つの長さの値と色を指定します。
１つめの値は左右、２つめの値が上下、３つめの値がぼかしを指定します。ぼかしを0にする場合は３つめの値は省略可能です。
色はカラーコードまたはカラーネームで指定します。色を省略した場合は、要素のcolor（文字色）の指定した色になります。
マイナスの値はそれぞれ左方向、上方向に影を作ります。ぼかしはマイナスの値は無効値です。
背景色を持たない文字や、背景色が透過の画像などの場合には透過部分に応じて影を作りますが、背景色を持った要素の場合、boxの影が生成されます。
box-shadowの利用方法と似ています。box-shadowについてはこちらからどうぞこんにゃくいもさんのユーザー記事『CSS3まとめ』box-shadow（影）
利用できる単位は、 px|em|pt|mm|cm|in|pc|exです。
- 130
- 0pt
