Sample List

まるでPhotoshopを使ったかのようにお刺身をcssのfilterで加工してみる

10種類のエフェクトについて

ぼかし、モノクロ、セピア、彩度など…使用できるエフェクトが10種類あります。

blur ぼかし処理。【初期値:0px】
grayscale モノクロ処理。【初期値:0%】
sepia セピア処理。【初期値:0%】
saturate 彩度。【初期値:100%】
hue-rotate 色相回転。【初期値:0deg】
invert 階調反転。【初期値:0%】
opacity 透過度。【初期値:100%】
brightness 明るさ。【初期値:100%】
contrast コントラスト。【初期値:100%】
drop-shadow 影処理。【初期値:none】

10種類のエフェクトを適用してみる

コード下部にある10個のボタンより実際の挙動をご確認ください。

img {
  filter: none;
}
img {
  filter: blur(10px);
}
img {
  filter: grayscale(100%);
}
img {
  filter: sepia(100%);
}
img {
  filter: saturate(200%);
}
img {
  filter: hue-rotate(180deg);
}
img {
  filter: invert(100%);
}
img {
  filter: opacity(50%);
}
img {
  filter: brightness(200%);
}
img {
  filter: contrast(200%);
}
img {
  filter: drop-shadow(5px 5px 5px #ccc);
}
一覧に戻る