HTML CSS

CSS3だけで画像にフィルターをかけてぼかしてみよう

2016年3月18日

CSS3で画像自体にぼかしなどのフィルターを適用させてみましょう。

関連:cssのみでiOSのような後ろをぼかしたエフェクトを実現

関連記事では、ぼかした写真をあらかじめ用意しておく方法を紹介しました。
今回は画像自体にぼかしを効かせる方法を試してみます。

要素にフィルターをかけるプロパティ “filter”

filterプロパティを使えば画像にフィルターをかけることができます。
ぼかしをつけたいときには下記のように記述すればいいです。

.photo{
  filter : blur(5px);
  -webkit-filter: blur(5px);
}

compassでの記述方法は下記のとおり。

.photo{
  @include filter(blur(5px));
}

これだけで画像が下記のようにぼかされます。

victoria-trip1

簡単ですね。

ぼかし以外のフィルター

フィルターはぼかす機能以外にもあります。

  • brightness()
  • contrast()
  • grayscale()
  • opacity
  • sepia()
  • saturation()
  • hue-rotate
  • invert
  • などなど。

filterの効果をわかりやすくまとめられているサイトを見つけましたので効果を確認してみてください。
bennettfeely.com

フィルターを複数かけてみる

ひとつの写真に複数のフィルターをかけることもできます。

.photo-multifilter{
  filter: blur(5px) grayscale(100%);
   -webkit-filter-filter:blur(5px) grayscale(100%);
}

このように、スペースを空けて複数のフィルター名を記述すればOKです。
下の写真のようになります。

victoria-trip1

フィルターがかけられる要素は写真だけじゃない。

どんな要素にもフィルターがかけられます。
文字にだって、ブロック要素にだってかけられます。

例えば、下記のようなコードにフィルターをかけてみましょう。

html 
<div class="filter" >
  <p> フィルターの実験 </p>
</div>

css
.filter{
  -webkit-filter-filter : blur(3px);
  filter : blur(3px);
}

このように、フィルターをかけた要素の下にまでフィルターがかかります。

フィルターの実験

使いどころを極めたらかなりリッチな表現ができそうです。

お問い合わせやコメント

ウェブサイト制作の依頼やこの投稿へのコメントなど、なんでもいいのでお問い合わせ待っています!ウェブデザインのチューターもしているのでそういったことへの依頼も受け付けています。

送信完了しました。 お問い合わせ確認用メールを上記のメールアドレス宛てに送信しましたのでご確認ください。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信完了しました。 24時間以内に返信いたしますのでお待ち下さいませ。
お問い合わせありがとうございました!

送信に失敗しました。お手数ですが入力内容をご確認の上、再度送信ボタンをクリックしてください。