system
矢口 奈果

2021.2.1HTML/CSS 

Webクリエイター

矢口 奈果

【フロントエンド】CSSだけで背景画像・動画をおしゃれに加工する方法

こんにちは。鍋に入った春菊とマロニーは溶けるまで煮るタイプのWebクリエイター、矢口です。
今回はCSSのブレンドモード(background-blend-mode、mix-blend-mode)で背景にフィルター加工を施す方法について紹介したいと思います。

基本

まずは基本形となるHTML/CSSを記述していきます。

See the Pen
WNoeEre
by Nako (@mr_nako)
on CodePen.

画像はbackground-imageとして、動画の方はvideoタグで記述しています。
画像にbackground-blend-mode、動画にmix-blend-modeを当てていきます。

スクリーン

スクリーンを重ねたような(光を掛け合わせたような)見え方になります。

See the Pen
JjbPyGO
by Nako (@mr_nako)
on CodePen.

海がメロンソーダになったようですね。
こちらは背景色が濃いほど元の色に近くなります。

オーバーレイ

背景色の明暗に応じて、暗いところは暗く、明るいところは明るく重ね合います。

See the Pen
gOLYxPq
by Nako (@mr_nako)
on CodePen.

神秘的なメロンソーダですね。森の中にあるメロンソーダって感じです。
個人的にはイラストなどにもよく使われる効果、というイメージです。

ソフトライト

背景色の明暗に応じて、暗いところは暗く、明るいところは明るく重ね合います。
やわらかい光を当てたような印象になります。

See the Pen
bGVbrpV
by Nako (@mr_nako)
on CodePen.

ハードライト

背景色の明暗に応じて、暗いところは暗く、明るいところは明るく重ね合います。
強めの光を当てたような印象になります。

See the Pen
QWGLMNw
by Nako (@mr_nako)
on CodePen.

他にも様々な効果を与えられますが、今回は独断と偏見の4選をご紹介しました。
簡素な素材でも効果を与えるとグッとおしゃれになり、サイトの見栄えが良くなります。
また、どちらもCSSだけで完結するので、わざわざ素材を用意しなくてもよいのが助かりますね。

なお、残念ながらブレンドモードプロパティはどちらもIEでは非対応となります。。
代替の画像を入れて対応するしかなさそうなのが難点ですね…

ちなみに溶けるまで煮たマロニーは箸でつかめなくなるので、皆さんはほどよいタイミングで食べてください。
それでは。

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ