filter
: 画像にフィルターをかける CSSプロパティ
このページで解説するコードの実行結果。
sample

このページの説明で、ベースとして使用するHTMLとCSSコードは以下。
CSS : デフォルトCSS
HTML : 適用するHTML
<div class="sample"> sample </div> <img class="sample" src="/img/samples/filter.jpg">
実行結果
sample

filter
の概要
関数 | 機能 | 設定値 |
---|---|---|
blur() | ぼかす (数値が大きいほどボケる。) | 3px 、5px など |
brightness() | 明るさ (数値が大きいほど明るい。0 の時はblack ) | 0 ~2 程度 |
contrast() | コントラスト (数値が大きいほど高い。0 の時はgray ) | 0 ~2 程度 |
drop-shadow() | 影 | box-shadow 、text-shadow と同じ。 |
grayscale() | モノクロ (1 の時は完全なモノクロ) | 0 ~1 |
hue-rotate() | 色相 (180deg の時は補色) | 0deg ~360deg |
invert() | 反転 (1 の時は反転色) | 0 ~1 |
opacity() | 不透明度 (0 の時は完全な透明) | 0 ~1 |
saturate() | 彩度 (0 の時は完全なモノクロ) | 0 ~1 |
sepia() | セピア色 (1 の時は完全なセピア) | 0 ~1 |
blur()
: ぼかす
CSS : blur
.sample { filter: blur( 4px ); }
実行結果
sample

CSS : blur
.sample1 { filter: blur( 1px ); } .sample2 { filter: blur( 2px ); } .sample3 { filter: blur( 3px ); } .sample4 { filter: blur( 4px ); } .sample5 { filter: blur( 5px ); } .sample6 { filter: blur( 6px ); } .sample7 { filter: blur( 7px ); } .sample8 { filter: blur( 8px ); } .sample9 { filter: blur( 9px ); } .sample10 { filter: blur( 10px ); }
HTML : 適用するHTML
<img class="sample1" src="/img/samples/filter.jpg" alt="1px" title="1px" > <img class="sample2" src="/img/samples/filter.jpg" alt="2px" title="2px" > <img class="sample3" src="/img/samples/filter.jpg" alt="3px" title="3px" > <img class="sample4" src="/img/samples/filter.jpg" alt="4px" title="4px" > <img class="sample5" src="/img/samples/filter.jpg" alt="5px" title="5px" > <img class="sample6" src="/img/samples/filter.jpg" alt="6px" title="6px" > <img class="sample7" src="/img/samples/filter.jpg" alt="7px" title="7px" > <img class="sample8" src="/img/samples/filter.jpg" alt="8px" title="8px" > <img class="sample9" src="/img/samples/filter.jpg" alt="9px" title="9px" > <img class="sample10" src="/img/samples/filter.jpg" alt="10px" title="10px">
blur() : 1px ~ 10px










brightness()
: 明るさ
CSS : brightness
.sample { filter: brightness( 0.4 ); }
実行結果
sample

CSS : brightness
.sample0 { filter: brightness( 0 ); } .sample2 { filter: brightness( 0.2 ); } .sample4 { filter: brightness( 0.4 ); } .sample6 { filter: brightness( 0.6 ); } .sample8 { filter: brightness( 0.8 ); } .sample10 { filter: brightness( 1 ); } .sample12 { filter: brightness( 1.2 ); } .sample14 { filter: brightness( 1.4 ); } .sample16 { filter: brightness( 1.6 ); } .sample18 { filter: brightness( 1.8 ); } .sample20 { filter: brightness( 2 ); }
HTML : 適用するHTML
<img class="sample0" src="/img/samples/filter.jpg" alt="0" title="0" > <img class="sample2" src="/img/samples/filter.jpg" alt="0.2" title="0.2" > <img class="sample4" src="/img/samples/filter.jpg" alt="0.4" title="0.4" > <img class="sample6" src="/img/samples/filter.jpg" alt="0.6" title="0.6" > <img class="sample8" src="/img/samples/filter.jpg" alt="0.8" title="0.8" > <img class="sample10" src="/img/samples/filter.jpg" alt="1" title="1" > <img class="sample12" src="/img/samples/filter.jpg" alt="1.2" title="1.2" > <img class="sample14" src="/img/samples/filter.jpg" alt="1.4" title="1.4" > <img class="sample16" src="/img/samples/filter.jpg" alt="1.6" title="1.6" > <img class="sample18" src="/img/samples/filter.jpg" alt="1.8" title="1.8" > <img class="sample20" src="/img/samples/filter.jpg" alt="2" title="2" >
brightness() : 0 ~ 2











contrast()
: コントラスト
CSS : contrast
.sample { filter: contrast( 2 ); }
実行結果
sample

CSS : contrast
.sample0 { filter: contrast( 0 ); } .sample2 { filter: contrast( 0.2 ); } .sample4 { filter: contrast( 0.4 ); } .sample6 { filter: contrast( 0.6 ); } .sample8 { filter: contrast( 0.8 ); } .sample10 { filter: contrast( 1 ); } .sample12 { filter: contrast( 1.2 ); } .sample14 { filter: contrast( 1.4 ); } .sample16 { filter: contrast( 1.6 ); } .sample18 { filter: contrast( 1.8 ); } .sample20 { filter: contrast( 2 ); }
HTML : 適用するHTML
<img class="sample0" src="/img/samples/filter.jpg" alt="0" title="0" > <img class="sample2" src="/img/samples/filter.jpg" alt="0.2" title="0.2" > <img class="sample4" src="/img/samples/filter.jpg" alt="0.4" title="0.4" > <img class="sample6" src="/img/samples/filter.jpg" alt="0.6" title="0.6" > <img class="sample8" src="/img/samples/filter.jpg" alt="0.8" title="0.8" > <img class="sample10" src="/img/samples/filter.jpg" alt="1" title="1" > <img class="sample12" src="/img/samples/filter.jpg" alt="1.2" title="1.2" > <img class="sample14" src="/img/samples/filter.jpg" alt="1.4" title="1.4" > <img class="sample16" src="/img/samples/filter.jpg" alt="1.6" title="1.6" > <img class="sample18" src="/img/samples/filter.jpg" alt="1.8" title="1.8" > <img class="sample20" src="/img/samples/filter.jpg" alt="2" title="2" >
contrast() : 0 ~ 2











drop-shadow()
: 影をつける
CSS : drop-shadow
.sample { filter: drop-shadow( 3px 3px 3px red ); }
実行結果
sample

CSS : box-shadow
.sample { box-shadow: 3px 3px 3px red; }
実行結果
sample

CSS : text-shadow
.sample { text-shadow: 3px 3px 3px red; }
実行結果
sample

CSS : 両方
.sample { box-shadow: 3px 3px 3px red; text-shadow: 3px 3px 3px red; }
実行結果
sample

grayscale()
: モノクロ
CSS : blgrayscaleur
.sample { filter: grayscale( 1 ); }
実行結果
sample

CSS : blur
.sample1 { filter: grayscale( 0.1 ); } .sample2 { filter: grayscale( 0.2 ); } .sample3 { filter: grayscale( 0.3 ); } .sample4 { filter: grayscale( 0.4 ); } .sample5 { filter: grayscale( 0.5 ); } .sample6 { filter: grayscale( 0.6 ); } .sample7 { filter: grayscale( 0.7 ); } .sample8 { filter: grayscale( 0.8 ); } .sample9 { filter: grayscale( 0.9 ); } .sample10 { filter: grayscale( 1 ); }
HTML : 適用するHTML
<img class="sample1" src="/img/samples/filter.jpg" alt="0.1" title="0.1" > <img class="sample2" src="/img/samples/filter.jpg" alt="0.2" title="0.2" > <img class="sample3" src="/img/samples/filter.jpg" alt="0.3" title="0.3" > <img class="sample4" src="/img/samples/filter.jpg" alt="0.4" title="0.4" > <img class="sample5" src="/img/samples/filter.jpg" alt="0.5" title="0.5" > <img class="sample6" src="/img/samples/filter.jpg" alt="0.6" title="0.6" > <img class="sample7" src="/img/samples/filter.jpg" alt="0.7" title="0.7" > <img class="sample8" src="/img/samples/filter.jpg" alt="0.8" title="0.8" > <img class="sample9" src="/img/samples/filter.jpg" alt="0.9" title="0.9" > <img class="sample10" src="/img/samples/filter.jpg" alt="1" title="1" >
grayscale() : 0.1 ~ 1










hue-rotate()
: 色相
CSS : hue-rotate
.sample { filter: hue-rotate( 180deg ); }
実行結果
sample

CSS : blur
.sample1 { filter: hue-rotate( 0deg ); } .sample15 { filter: hue-rotate( 15deg ); } .sample30 { filter: hue-rotate( 30deg ); } .sample45 { filter: hue-rotate( 45deg ); } .sample60 { filter: hue-rotate( 60deg ); } .sample75 { filter: hue-rotate( 75deg ); } .sample90 { filter: hue-rotate( 90deg ); } .sample105 { filter: hue-rotate( 105deg ); } .sample120 { filter: hue-rotate( 120deg ); } .sample135 { filter: hue-rotate( 135deg ); } .sample150 { filter: hue-rotate( 150deg ); } .sample165 { filter: hue-rotate( 165deg ); } .sample180 { filter: hue-rotate( 180deg ); } .sample195 { filter: hue-rotate( 195deg ); } .sample210 { filter: hue-rotate( 210deg ); } .sample225 { filter: hue-rotate( 225deg ); } .sample240 { filter: hue-rotate( 240deg ); } .sample255 { filter: hue-rotate( 255deg ); } .sample270 { filter: hue-rotate( 270deg ); } .sample285 { filter: hue-rotate( 285deg ); } .sample300 { filter: hue-rotate( 300deg ); } .sample315 { filter: hue-rotate( 315deg ); } .sample330 { filter: hue-rotate( 330deg ); } .sample345 { filter: hue-rotate( 345deg ); }
HTML : 適用するHTML
<img class="sample0" src="/img/samples/filter.jpg" alt="0deg" title="0deg" > <img class="sample15" src="/img/samples/filter.jpg" alt="15deg" title="15deg" > <img class="sample30" src="/img/samples/filter.jpg" alt="30deg" title="30deg" > <img class="sample45" src="/img/samples/filter.jpg" alt="45deg" title="45deg" > <img class="sample60" src="/img/samples/filter.jpg" alt="60deg" title="60deg" > <img class="sample75" src="/img/samples/filter.jpg" alt="75deg" title="75deg" > <img class="sample90" src="/img/samples/filter.jpg" alt="90deg" title="90deg" > <img class="sample105" src="/img/samples/filter.jpg" alt="105deg" title="105deg" > <img class="sample120" src="/img/samples/filter.jpg" alt="120deg" title="120deg" > <img class="sample135" src="/img/samples/filter.jpg" alt="135deg" title="135deg" > <img class="sample150" src="/img/samples/filter.jpg" alt="150deg" title="150deg" > <img class="sample165" src="/img/samples/filter.jpg" alt="165deg" title="165deg" > <img class="sample180" src="/img/samples/filter.jpg" alt="180deg" title="180deg" > <img class="sample195" src="/img/samples/filter.jpg" alt="195deg" title="195deg" > <img class="sample210" src="/img/samples/filter.jpg" alt="210deg" title="210deg" > <img class="sample225" src="/img/samples/filter.jpg" alt="225deg" title="225deg" > <img class="sample240" src="/img/samples/filter.jpg" alt="240deg" title="240deg" > <img class="sample255" src="/img/samples/filter.jpg" alt="255deg" title="255deg" > <img class="sample270" src="/img/samples/filter.jpg" alt="270deg" title="270deg" > <img class="sample285" src="/img/samples/filter.jpg" alt="285deg" title="285deg" > <img class="sample300" src="/img/samples/filter.jpg" alt="300deg" title="300deg" > <img class="sample315" src="/img/samples/filter.jpg" alt="315deg" title="315deg" > <img class="sample330" src="/img/samples/filter.jpg" alt="330deg" title="330deg" > <img class="sample345" src="/img/samples/filter.jpg" alt="345deg" title="345deg" >
hue-rotate() : 0.1 ~ 1
























invert()
: 反転
CSS : invert
.sample { filter: invert( 1 ); }
実行結果
sample

CSS : blur
.sample1 { filter: invert( 0.1 ); } .sample2 { filter: invert( 0.2 ); } .sample3 { filter: invert( 0.3 ); } .sample4 { filter: invert( 0.4 ); } .sample5 { filter: invert( 0.5 ); } .sample6 { filter: invert( 0.6 ); } .sample7 { filter: invert( 0.7 ); } .sample8 { filter: invert( 0.8 ); } .sample9 { filter: invert( 0.9 ); } .sample10 { filter: invert( 1 ); }
HTML : 適用するHTML
<img class="sample1" src="/img/samples/filter.jpg" alt="0.1" title="0.1" > <img class="sample2" src="/img/samples/filter.jpg" alt="0.2" title="0.2" > <img class="sample3" src="/img/samples/filter.jpg" alt="0.3" title="0.3" > <img class="sample4" src="/img/samples/filter.jpg" alt="0.4" title="0.4" > <img class="sample5" src="/img/samples/filter.jpg" alt="0.5" title="0.5" > <img class="sample6" src="/img/samples/filter.jpg" alt="0.6" title="0.6" > <img class="sample7" src="/img/samples/filter.jpg" alt="0.7" title="0.7" > <img class="sample8" src="/img/samples/filter.jpg" alt="0.8" title="0.8" > <img class="sample9" src="/img/samples/filter.jpg" alt="0.9" title="0.9" > <img class="sample10" src="/img/samples/filter.jpg" alt="1" title="1" >
invert() : 0.1 ~ 1










opacity()
: 不透明度
CSS : opacity
.sample { filter: opacity( 0.2 ); }
実行結果
sample

CSS : blur
.sample0 { filter: opacity( 0 ); } .sample1 { filter: opacity( 0.1 ); } .sample2 { filter: opacity( 0.2 ); } .sample3 { filter: opacity( 0.3 ); } .sample4 { filter: opacity( 0.4 ); } .sample5 { filter: opacity( 0.5 ); } .sample6 { filter: opacity( 0.6 ); } .sample7 { filter: opacity( 0.7 ); } .sample8 { filter: opacity( 0.8 ); } .sample9 { filter: opacity( 0.9 ); } .sample10 { filter: opacity( 1 ); }
HTML : 適用するHTML
<img class="sample0" src="/img/samples/filter.jpg" alt="0" title="0" > <img class="sample1" src="/img/samples/filter.jpg" alt="0.1" title="0.1" > <img class="sample2" src="/img/samples/filter.jpg" alt="0.2" title="0.2" > <img class="sample3" src="/img/samples/filter.jpg" alt="0.3" title="0.3" > <img class="sample4" src="/img/samples/filter.jpg" alt="0.4" title="0.4" > <img class="sample5" src="/img/samples/filter.jpg" alt="0.5" title="0.5" > <img class="sample6" src="/img/samples/filter.jpg" alt="0.6" title="0.6" > <img class="sample7" src="/img/samples/filter.jpg" alt="0.7" title="0.7" > <img class="sample8" src="/img/samples/filter.jpg" alt="0.8" title="0.8" > <img class="sample9" src="/img/samples/filter.jpg" alt="0.9" title="0.9" > <img class="sample10" src="/img/samples/filter.jpg" alt="1" title="1" >
opacity() : 0 ~ 1











saturate()
: 彩度
CSS : saturate
.sample { filter: saturate( 0 ); }
実行結果
sample

CSS : blur
.sample0 { filter: saturate( 0 ); } .sample1 { filter: saturate( 0.1 ); } .sample2 { filter: saturate( 0.2 ); } .sample3 { filter: saturate( 0.3 ); } .sample4 { filter: saturate( 0.4 ); } .sample5 { filter: saturate( 0.5 ); } .sample6 { filter: saturate( 0.6 ); } .sample7 { filter: saturate( 0.7 ); } .sample8 { filter: saturate( 0.8 ); } .sample9 { filter: saturate( 0.9 ); } .sample10 { filter: saturate( 1 ); }
HTML : 適用するHTML
<img class="sample0" src="/img/samples/filter.jpg" alt="0" title="0" > <img class="sample1" src="/img/samples/filter.jpg" alt="0.1" title="0.1" > <img class="sample2" src="/img/samples/filter.jpg" alt="0.2" title="0.2" > <img class="sample3" src="/img/samples/filter.jpg" alt="0.3" title="0.3" > <img class="sample4" src="/img/samples/filter.jpg" alt="0.4" title="0.4" > <img class="sample5" src="/img/samples/filter.jpg" alt="0.5" title="0.5" > <img class="sample6" src="/img/samples/filter.jpg" alt="0.6" title="0.6" > <img class="sample7" src="/img/samples/filter.jpg" alt="0.7" title="0.7" > <img class="sample8" src="/img/samples/filter.jpg" alt="0.8" title="0.8" > <img class="sample9" src="/img/samples/filter.jpg" alt="0.9" title="0.9" > <img class="sample10" src="/img/samples/filter.jpg" alt="1" title="1" >
saturate() : 0 ~ 1











sepia()
: セピア色
CSS : sepia
.sample { filter: sepia( 1 ); }
実行結果
sample

CSS : blur
.sample0 { filter: sepia( 0 ); } .sample1 { filter: sepia( 0.1 ); } .sample2 { filter: sepia( 0.2 ); } .sample3 { filter: sepia( 0.3 ); } .sample4 { filter: sepia( 0.4 ); } .sample5 { filter: sepia( 0.5 ); } .sample6 { filter: sepia( 0.6 ); } .sample7 { filter: sepia( 0.7 ); } .sample8 { filter: sepia( 0.8 ); } .sample9 { filter: sepia( 0.9 ); } .sample10 { filter: sepia( 1 ); }
HTML : 適用するHTML
<img class="sample0" src="/img/samples/filter.jpg" alt="0" title="0" > <img class="sample1" src="/img/samples/filter.jpg" alt="0.1" title="0.1" > <img class="sample2" src="/img/samples/filter.jpg" alt="0.2" title="0.2" > <img class="sample3" src="/img/samples/filter.jpg" alt="0.3" title="0.3" > <img class="sample4" src="/img/samples/filter.jpg" alt="0.4" title="0.4" > <img class="sample5" src="/img/samples/filter.jpg" alt="0.5" title="0.5" > <img class="sample6" src="/img/samples/filter.jpg" alt="0.6" title="0.6" > <img class="sample7" src="/img/samples/filter.jpg" alt="0.7" title="0.7" > <img class="sample8" src="/img/samples/filter.jpg" alt="0.8" title="0.8" > <img class="sample9" src="/img/samples/filter.jpg" alt="0.9" title="0.9" > <img class="sample10" src="/img/samples/filter.jpg" alt="1" title="1" >
sepia() : 0 ~ 1











複数指定
複数のフィルターを設定するには、スペースで続ける。
CSS : 反転させて(invert)セピア色(sepia)にする
.sample { filter: invert( 1 ) sepia( 1 ); }
実行結果
sample

例2。色相を変えて(hue-rotate()
)コントラストを強調(contrast()
)して影をつける(drop-shadow()
)。
CSS : 色相を変えて(hue-rotate)コントラストを強調(contrast)して影をつける(drop-shadow)
.sample { filter: hue-rotate( 340deg ) contrast( 2 ) drop-shadow( 0px 0px 5px red ); }
実行結果
sample
