こんにちは、「ふ」です。
CSSにはfilterプロパティという、要素にCG効果を与えることのできるものがあります。
元画像
「セピア」を適用
例えば上の画像はセピア効果をかけたものです。古き良き日本の感じが出ています。
CSSだけでグラフィックソフトのフィルター処理のようなことができる、filterプロパティ。各フィルターの効果について書かれたページはたくさんいらっしゃるみたいなので、今回は複数指定やテキストへの使用といった、少し踏み込んだところと試してみたいと思います。
filterプロパティで用意されているものの一覧を貼っておきます。これ⬇︎、スクショを撮るなどして参照しながらコーディングすると便利かと思います。
やはり単一のフィルタを適用するだけでは、「ベタ」な印象となるときもあるかもしれません。合わせ技を使うにはどうすればいいか。以下のように記述するだけです。
元画像
この画像に「潜入捜査」感を出したい。
モノクロにするだけでは怪しさが足りない。
更に、ぼかしを追加すると「隠しカメラ」感が出ました。
filter効果を<p>〜</p>などのテキスト要素に施すとどうなるのか。
以下のHTMLで試してみます。
ブラウザ
てきすと
ここに「ぼかし」と「透明度」を指定します。
CSS
ブラウザ
てきすと
お、一見うまくいったようです。が、ここで要素に背景色を使ってみます。
CSS
ブラウザ
てきすと
・・なんだか背景色の黄色も薄く表示されました。
そうです。filter効果は、backgroundやborderなども含めた「要素全体」に適用されてしまうのでした。
そこで、テキスト部分を<span>〜</span>で囲んで別のクラス名を付けておきます。
HTML
filterもspan要素のほうに指定しましょう。
CSS
ブラウザ
てきすと
成功です。背景色はデフォルトのまま、テキストだけにフィルターを掛けることができました。
画力のない「ふ」です。
今回サンプル画像を作るにあたり、背景にはフリー写真素材 フォトックさんの画像を利用させていただきました。ありがとうございます。
CSSのfilterプロパティ。グラフィックソフトよりもシンプルな設定でフィルタ効果が得られて便利ですね。。みなさんも試してみてください ♪
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。
🐧 twitter 🐧