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

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

ぼかし、モノクロ、セピア、彩度など…使用できるエフェクトが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);
}