コピペしてすぐに使える！cssのみで画像をぼかす(ブラー処理）方法【初心者向け】

皆さんこんばんわ！バジラです！

今回はですね、フォトショ等で画像編集を行わずにcssのみで画像をぼかす（ブラー処理）方法を紹介します！

まぁ簡単に言っちゃえば、っつーかフォトショで加工して仕舞えばいいんですけど、コーディングの最中の微妙な仕様変更で、スピード感が求められたりすることも多々ありますので、そういう時が使いどきかなと思います！

あとはホバーアクションですね！ホバーと同時に、背景ぼかし＋タイトル出現！とかは面白そうです！クライアントワークで言うならば、お知らせのサムネイルとか、ブログ記事のサムネイル、あとは、製品紹介リンクのなんかに使用すると、ひと工夫しているというか、手を抜いてないなって感じます！

んじゃまずはサンプル

せりゃ！

ITっぽいというかね、無難な画像で申し訳ないんですが、サンプルはこんな感じ！！20pxでぼかしています！ちなみに元画像はこれ。

どこで使うのか。

んー。これは中々に難しいところ。使う場面というのは限られている気もしますね。

例えば、お客さんが任意で選択できる場合の下層ページタイトル帯の背景だったり、画像をホバーして文字を浮き上がらせるっていうアクションがあったとして、その際に文字を見やすくするために背景の画像をぼかすだとか。少し特殊なケースでの使用となる気がします。

さぁコードだ！ctrl+cの準備はいいか！！

HTML

<div class="hcb_wrap">
 <div class="hoge"></div>
</div>

CSS

.hoge{
   position: relative;
   z-index: 0;
   overflow: hidden;
   width: 100%;
   height:200px;
   background:url(画像のパス); //位置・リピートはお好みで！
  &:before{
      /* ぼかし処理の設定 */
      content: '';
      position: absolute;
      background: inherit;
      filter: blur(5px);//ぼかしの強さ
      top: -5px;
      left: -5px;
      right: -5px;
      bottom: -5px;
      z-index: -1;
}

簡単な作業解説としましては、

• .hogeにbackgroundで背景画像を設定。
  
• 背景画像をbeforeにも引き継がせるためbeforeにbackground: inheritを設定
  
• 画像の端がボヤけるのでぼかした分だけpositionで位置を微調整

って感じですね！あとはまぁoverflowを入れたりするわけですが、その辺はまんまコピーしておけばいいようにしてあります。

薄くするとこんな感じ

はい！サンプルと同じ画像を5pxぼかしに！ぼかしが薄くなっているのが分かりますよね！いい感じっすわ！

まとめ

真面目に話しますと、ぼかしの効果はもちろんですが、この処理の最大のメリットは

サイズが小さい画像でもぼかしを入れることで、使える場面が増える

ってところです。

大きい画像ではっきりと画像を使用したいんだけど、それができない。でも指定された画像は使わなきゃいけない！

なんて時にこの処理で適度に画像をぼかし、背景なんかで使用すればうまく対応できるかもしれませんね！うーんぼかしって偉大！！

みなさんもぜひ制作に活かしてみてくださいね！

はい、それでは今回はこの辺で終わりにしようと思います！お付き合いいただきありがとうございましたー！