CSSの画像フィルター(明るさ・透明度・コントラスト・彩度 etc)

###center
CSSの画像フィルターのメモです。ブラウザによってフィルターが利かないものなどもあるので要確認です。

###explain
使用方法の例です。
###source
(html 使用例)
<img src="/img/hogehoge.jpg" style="filter: opacity(75%);" />

###explain center
実験画像です。
###raw
<div class="tc">
<img src="/datas/img/1/119.s.jpg" />
</div>

### title
良く使うフィルター

###title3
明るさ

###source ret
filter: brightness(200%);
###memo
100%=オリジナル。200%=2倍
###raw
<div class="tc">
<div class="d_ib tc oh">
50%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:brightness(50%);" />
</div>
<div class="d_ib tc oh">
100%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:brightness(100%);" />
</div>
<div class="d_ib tc oh">
200%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:brightness(200%);" />
</div>
</div>

###title3
透明度
###source ret
filter: opacity(75%);
###memo
0%=透明、100%=不透明
###raw
<div class="tc">
<div class="d_ib tc oh">
30%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:opacity(30%);" />
</div>
<div class="d_ib tc oh">
70%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:opacity(70%);" />
</div>
<div class="d_ib tc oh">
100%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:opacity(100%);" />
</div>
</div>

###title3
グレースケール
###source ret
filter: grayscale(100%);
###memo
0%=オリジナル、100%=グレー
###raw
<div class="tc">
<div class="d_ib tc oh">
0%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:grayscale(0%);" />
</div>
<div class="d_ib tc oh">
50%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:grayscale(50%);" />
</div>
<div class="d_ib tc oh">
100%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:grayscale(100%);" />
</div>
</div>

###title3
コントラスト
###source ret
filter:contrast(200%)
###
0%=グレー、100%=オリジナル、100%以上=高コントラスト

###raw
<div class="tc">
<div class="d_ib tc oh">
50%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:contrast(50%);" />
</div>
<div class="d_ib tc oh">
100%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:contrast(100%);" />
</div>
<div class="d_ib tc oh">
200%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:contrast(200%);" />
</div>
</div>

### title
その他のフィルター
###title3
彩度
###source ret
filter: saturate(0%);
###
0%=色彩なし、100%=オリジナル、100%～=鮮やか
###raw
<div class="tc">
<div class="d_ib tc oh">
filter:saturate(30%);<br />
<img src="/datas/img/1/119.s.jpg" style="filter:saturate(30%);" />
</div>
<div class="d_ib tc oh">
filter:saturate(100%);<br />
<img src="/datas/img/1/119.s.jpg" style="filter:saturate(100%);" />
</div>
<div class="d_ib tc oh">
filter:saturate(200%);<br />
<img src="/datas/img/1/119.s.jpg" style="filter:saturate(200%);" />
</div>
</div>

###title3
セピア
###source ret
filter: sepia(100%);
###memo
0%=オリジナル、100%=セピア

###raw
<div class="tc">
<div class="d_ib tc oh">
filter:sepia(0%);<br />
<img src="/datas/img/1/119.s.jpg" style="filter:sepia(0%);" />
</div>
<div class="d_ib tc oh">
filter:sepia(50%);<br />
<img src="/datas/img/1/119.s.jpg" style="filter:sepia(50%);" />
</div>
<div class="d_ib tc oh">
filter:sepia(100%);<br />
<img src="/datas/img/1/119.s.jpg" style="filter:sepia(100%);" />
</div>
</div>

###title3
ぼかし
###source ret
filter: blur(1px);
###raw
<div class="tc">
<div class="d_ib tc oh">
0.8px<br />
<img src="/datas/img/1/119.s.jpg" style="filter:blur(0.8px);" />
</div>
<div class="d_ib tc oh">
1.6px<br />
<img src="/datas/img/1/119.s.jpg" style="filter:blur(1.6px);" />
</div>
<div class="d_ib tc oh">
1em<br />
<img src="/datas/img/1/119.s.jpg" style="filter:blur(1em);" />
</div>
</div>

###title3
ドロップシャドウ
###source ret
filter: drop-shadow(5px 5px 15px #aaa);

###memo
「x軸 y軸 ぼかし半径 色」で指定
###raw
<div class="tc">
<div class="d_ib tc pad5 ">
0px 0px 3px #000<br />
<img src="/datas/img/1/119.s.jpg" style="filter:drop-shadow(0px 0px 3px #000);" />
</div>
<div class="d_ib tc pad5 ">
5px 5px 10px #aaa<br />
<img src="/datas/img/1/119.s.jpg" style="filter:drop-shadow(5px 5px 10px #aaa);" />
</div>

</div>

###title3
色相回転

###source ret
filter:hue-rotate(90deg);
###memo
0deg=オリジナル
###raw
<div class="tc">
<div class="d_ib tc oh">
0deg<br />
<img src="/datas/img/1/119.s.jpg" style="filter:hue-rotate(0deg);" />
</div>
<div class="d_ib tc oh">
100deg<br />
<img src="/datas/img/1/119.s.jpg" style="filter:hue-rotate(100deg);;" />
</div>
<div class="d_ib tc oh">
200deg<br />
<img src="/datas/img/1/119.s.jpg" style="filter:hue-rotate(200deg);" />
</div>
</div>

###title3
階調反転

###source ret
filter: invert(100%);
###memo
0%=オリジナル、100%=階調反転
###raw
<div class="tc">
<div class="d_ib tc oh">
0%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:invert(0%);" />
</div>
<div class="d_ib tc oh">
50%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:invert(50%);" />
</div>
<div class="d_ib tc oh">
100%<br />
<img src="/datas/img/1/119.s.jpg" style="filter:invert(100%);" />
</div>
</div>

###title
画像のフィット
### memo
画像フィルターとは違いますが、#*#object-fit:cover を使用すると、画像がつぶれずにのアスペクト比を保持したまま width や height を指定できて便利です。
###raw
<div class="tc">
<div class="d_ib tc oh">
120x50<br />
<img src="/datas/img/1/119.s.jpg" style="object-fit:cover;" width="50" height="120" />
</div>
<div class="d_ib tc oh">
150x80<br />
<img src="/datas/img/1/119.s.jpg" style="object-fit:cover;" width="150" height="80" />
</div>
</div>
###source ret
(html 使用例)
<img src="/img/hogehoge.jpg" style="object-fit:cover;" width="100" height="100" />
<img src="/img/hogehoge.jpg" style="object-fit:cover;" width="150" height="80" />

wakatta 記法

このコンテンツを見る