業務で自分が詰まって解決できた部分を書いてますので、かなり狭いターゲット層になるのではないかと思います。
ひとまず、結果を見てもらい、違う！と思った方はするりと離脱してください。
今回の記事の目的はこれです！
こんな感じのテキストの白背景（色は何でもOK）にぼかしを入れます。
ぼかしを入れられるプロパティはいくつかありますが、いくつか試してしっくりきたのが「filter」プロパティでした。
filterプロパティとは
CSSのfilterプロパティは、要素に対してさまざまな視覚効果を適用するために使用されるプロパティです。filterプロパティを使用することで、画像やテキスト、背景などの要素を変形、調整、装飾することができます。
blur(): 要素をぼかします。引数としてぼかしの強さを指定します。brightness(): 要素の明るさを調整します。引数として明るさの倍率を指定します。contrast(): 要素のコントラスト（対比）を調整します。引数としてコントラストの倍率を指定します。grayscale(): 要素をグレースケール（白黒）に変換します。引数は不要です。hue-rotate(): 要素の色相を回転させます。引数として角度を指定します。invert(): 要素の色を反転させます。引数として反転の割合を指定します。saturate(): 要素の彩度（鮮やかさ）を調整します。引数として彩度の倍率を指定します。sepia(): 要素にセピア色調を追加します。引数は不要です。
こんな感じの内容ですが、今回使用するのは「blur」のみです。
これ全部使いこなせたら色んな事ができるんですが、僕はそこまで使えませんので、今回はぼかしを解説します。
filter：blurの使い方
正直そんなに使い方自体は難しくないのですが、ただただ背景を設定してそこにfilterを使用すると
See the Pen filter エラーバージョン by Mota (@Mota-the-flexboxer) on CodePen.
こんな感じになっちゃいます。
なので、上にあるような背景を作るには一手間加えます。
See the Pen filter 正バージョン by Mota (@Mota-the-flexboxer) on CodePen.
形整えるのに色々加えてますが、大事なのはpタグをdivタグで囲みそこに疑似要素（before）を使用している部分です。そこにfilterを使います。
この一つ外側にdivタグを追加するという動きは、実は結構使います。
しっかり先まで考えてHTMLを構成できてる方は最初から囲んでいるかもしれませんが、中々HTMLを組む段階で気づかないこともあるので、何かCSSが上手く効かせられない時は、HTMLの構成を変えてみるという発想も大事です。
今回の解説で肝なのは実際はfilterプロパティではなく、要素の並びをいかに思い通りに並べられるかという所かと思います。
これは自称中の下の自分もたまによくわからなくなる部分なので、改めて別の記事でご紹介したいと思います。
まとめ
- filterプロパティでぼかしを入れることができる
- HTMLの構成を変える発想も大事
いきなりタイトルとぶれぶれな記事になってしまいましたが、こんなデザインを再現したい！というピンポイントな解説がこれからどんどん出てくると思います。
幅広い知見が薄いので、実際の経験を基にできたことを書いていこうと思いますので、このピンポイントに悩んだ人に対して少しでも役に立てれば幸いです。
ひとまず次回は、「要素の並び順のルール」についてになるかなーと思ってます！
それではまた！