【CSS】filterを使ってみよう

使用スタイル

filter: <filter-function> [<filter-function>]* | none

ぼかし

画像にぼかしを入れる事で曇りガラスのような雰囲気をCSSだけで作成できます。

#blur-img1{
  filter: blur(1px);
}
#blur-img2{
  filter: blur(4px);
}

オリジナル

blur(1px)

blur(4px)

セピア

写真をセピアフィルターにかけるとこんな感じです。

#sepia-img1{
  filter: sepia(50%);
}
#sepia-img2{
  filter: sepia(100%);
}

オリジナル

sepia(50%)

sepia(100%)

グレースケール

写真をグレースケールにするとこんな感じです。最近よく見かけるような気がします。

#gray-img1{
  filter: grayscale(50%);
}
#gray-img2{
  filter: grayscale(100%);
}

オリジナル

grayscale(50%)

grayscale(100%)

フィルターを使った画像とオリジナルの画像の組み合わせ

グレースケールの中に色のある画像があると一際目立って見えますね。

#img-wrapper{
  position: relative;
}
#park-img{
  filter: grayscale(100%);
}
#cat-img{
  bottom: 10%;
  left: 10%;
  position: absolute;
  width: 20%;
}