概要へ移動

このページで解説するコードの実行結果。

このページの説明で、ベースとして使用するHTMLとCSSコードは以下。

CSS : デフォルトCSS
div {
font-size: 2em; /* 文字の大きさ */
margin: 5px; /* 外側の余白 */
color: brown; /* 文字の色 */
}
img {
max-width: 230px; /* 最大幅 */
}
HTML : 適用するHTML
<div class="sample"> sample </div>
<img class="sample" src="/img/samples/filter.jpg">
実行結果
sample

filterの概要

(表) filterの設定値
関数機能設定値
blur()ぼかす (数値が大きいほどボケる。)3px5pxなど
brightness()明るさ (数値が大きいほど明るい。0の時はblack02程度
contrast()コントラスト (数値が大きいほど高い。0の時はgray02程度
drop-shadow()box-shadow
text-shadowと同じ。
grayscale()モノクロ (1の時は完全なモノクロ)01
hue-rotate()色相 (180degの時は補色)0deg360deg
invert()反転 (1の時は反転色)01
opacity()不透明度 (0の時は完全な透明)01
saturate()彩度 (0の時は完全なモノクロ)01
sepia()セピア色 (1の時は完全なセピア)01

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
1px 2px 3px 4px 5px 6px 7px 8px 9px 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
0 0.2 0.4 0.6 0.8 1 1.2 1.4 1.6 1.8 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
0 0.2 0.4 0.6 0.8 1 1.2 1.4 1.6 1.8 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
0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 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
0deg 15deg 30deg 45deg 60deg 75deg 90deg 105deg 120deg 135deg 150deg 165deg 180deg 195deg 210deg 225deg 240deg 255deg 270deg 285deg 300deg 315deg 330deg 345deg

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
0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 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
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 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
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 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
0 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1

複数指定

複数のフィルターを設定するには、スペースで続ける。

例1。反転させて(invert())セピア色(sepia())にする

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