CSS : filterプロパティ。複数指定、テキストへの効果などを試してみた。

〽️ 楽しいのでやってみるべし。


CSSだけでCG効果。

こんにちは、「ふ」です。
CSSにはfilterプロパティという、要素にCG効果を与えることのできるものがあります。

元画像




「セピア」を適用



例えば上の画像はセピア効果をかけたものです。古き良き日本の感じが出ています。
CSSだけでグラフィックソフトのフィルター処理のようなことができる、filterプロパティ。各フィルターの効果について書かれたページはたくさんいらっしゃるみたいなので、今回は複数指定やテキストへの使用といった、少し踏み込んだところと試してみたいと思います。

filterプロパティで用意されているものの一覧を貼っておきます。これ⬇︎、スクショを撮るなどして参照しながらコーディングすると便利かと思います。

filterいろいろ
下線 がfilter適用前の状態です。


◼︎ blur(ぼかし)    値: 0 〜 ∞ (pxなどの絶対値)
filter : blur(1px);
◼︎ grayscale(モノクロ)    値: 0 〜 100(%)
filter : grayscale(50%);
◼︎ brightness(明るさ)    値: 0 〜 100 〜 ∞(%)
filter : brightness(200%);
◼︎ contrast(コントラスト)    値: 0 〜 100 〜 ∞(%)
filter : contrast(150%);
◼︎ saturate(彩度)    値: 0 〜 100 〜 ∞(%)
filter : saturate(200%);

◼︎ sepia(彩度)    値: 0 〜 100(%)
filter : sepia(90%);
◼︎ opacity(透過)    値:0 〜 100(%)
filter : opacity(80%);
◼︎ invert(階調反転)    値:0 〜 100(%)
filter : invert(40%);
◼︎ hue-rotate(色調回転)    値:0 〜 180 〜 360(deg)
filter : hue-rotate(180deg);
◼︎ drop-shadow(影)
    値: x方向    -∞ 〜 0 〜 ∞(pxなど)
           y方向    -∞ 〜 0 〜 ∞(pxなど)
           オフセット    0 〜 ∞(pxなど)
           色指定     #000
filter : drop-shadow(2px 2px 5px #fff100);


filterの複数指定。

やはり単一のフィルタを適用するだけでは、「ベタ」な印象となるときもあるかもしれません。合わせ技を使うにはどうすればいいか。以下のように記述するだけです。

filter: 効果(値) 効果(値) ・・ ;

元画像

この画像に「潜入捜査」感を出したい。







filter : grayscale(100%);

モノクロにするだけでは怪しさが足りない。







filter : grayscale(100%) blur(1.5px);

更に、ぼかしを追加すると「隠しカメラ」感が出ました。






テキストにつかえるのか?

filter効果を<p>〜</p>などのテキスト要素に施すとどうなるのか。

以下のHTMLで試してみます。

<p class = "jikken" style = font-size:2em; font-weight:900; color:blue;> てきすと </p>

ブラウザ

てきすと

ここに「ぼかし」と「透明度」を指定します。

CSS

.jikken{ filter:blur(1px) opacity(30%); }

ブラウザ

てきすと

お、一見うまくいったようです。が、ここで要素に背景色を使ってみます。

CSS

.jikken { filter:blur(1px) opacity(30%); 「「1background-color:yellow;」」 }

ブラウザ

てきすと

・・なんだか背景色の黄色も薄く表示されました。

そうです。filter効果は、backgroundやborderなども含めた「要素全体」に適用されてしまうのでした。
そこで、テキスト部分を<span>〜</span>で囲んで別のクラス名を付けておきます。

HTML

<p class = "jikken" style = font-size:2em; font-weight:900; color:blue;> <「「1span class = "nakami"」」 > てきすと <「「1/span」」> </p>

filterもspan要素のほうに指定しましょう。

CSS

.jikken { background-color:yellow; } .nakami { 「「1filter:blur(1px) opacity(30%);」」 }

ブラウザ

てきすと

成功です。背景色はデフォルトのまま、テキストだけにフィルターを掛けることができました。



シンプルに楽しめます。

画力のない「ふ」です。
今回サンプル画像を作るにあたり、背景にはフリー写真素材 フォトックさんの画像を利用させていただきました。ありがとうございます。

CSSのfilterプロパティ。グラフィックソフトよりもシンプルな設定でフィルタ効果が得られて便利ですね。。みなさんも試してみてください ♪













「ふ」です。

swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。

🐧 twitter 🐧