CSSブレンドモード(描画モード)を用いたクリエイティブデザイン8選

IllustratorやPhotoshopではおなじみの、レイヤーの重ね方を設定できる「ブレンドモード（描画モード）」。実はCSSでも使えることをご存知でしょうか。

この機能を使うと、複数のレイヤーを重ねて美しい効果を生み出せます。乗算、焼き込み、スクリーン、覆い焼きなど、エフェクトの種類もさまざま。Microsoft製のブラウザが対応していないのは残念ですが、Firefox、Chrome、SafariなどはCSSブレンドモードに対応しています。

今回はCSSブレンドモードを使ったクリエイティブなコードスニペットを8つご紹介します。バラエティ豊かなデザイン作品をとおして、CSSブレンドモードの可能性を探ってみましょう！

1. さまざまなブレンドモードを試してみる

まずはCSSブレンドモードの効果を知るのに最適な、シンプルなデモをご紹介します。

ドロップダウンメニューから効果を選ぶことで、どのようにエフェクトがかかるのかを確認できる作品です。ぜひ実際に遊んで、CSSブレンドモードの可能性を楽しんでみましょう。

See the Pen CSS Blend Modes by Tyler Duprey (@TylerDuprey) on CodePen.0

2. ぼかした背景

次にご紹介するのは、とても実用的な作品です。左側のメニューから写真を選択すると、フルサイズの画像が表示されます。

背景にぼかした画像を配置することで、写真がより立体的に見えますね。

See the Pen Themed, CSS blended background blur gallery by Paul Noble (@paulnoble) on CodePen.0

3. フィルターとブレンドでイラストを操作

こちらはブレンドモードにより、イラストの色味を操作できる作品です。

右側のメニューから、色やフィルター効果を変えてみましょう。CSSの潜在的な可能性に驚かされるはずです。

See the Pen Filter + Blend Modes Demo by Chris Johnson (@jhnsnc) on CodePen.0

4. たった5行のコードで作るグラデーション効果

この作品のもっとも大きな特徴は、わずか5行で構成されているという点でしょう。

CSSブレンドモードを使えば、写真とグラデーションを組み合わせて効果をつけるだけで、画像編集ソフトよりも簡単に美しい作品を作れることがわかります。

See the Pen CSS blend modes by Alvaro Felipe (@AlvaroFelipe) on CodePen.0

5. スクロールに対応したナビゲーション

CSSブレンドモードが活躍するのは、写真やイラストに効果をつける場面だけではありません。この例では、マイクロインタラクションにCSSブレンドモードとjQueryを活用しています。

スクロールしている位置に応じて、左側のメニューが変化するのが分かるでしょう。

See the Pen Progress Navigation using CSS Blend Modes by Michael Leonard (@mikel301292) on CodePen.0

6. サイケデリックな効果

さきほどの例とは対照的に、CSSブレンドモードをとても派手に使った作品です。

写真にGIFアニメーションを組み合わせて、多重露光写真のようなサイケデリックな効果をつけています。

See the Pen double exposure using css blend modes by Pixelsonoro (@Pixelsonoro) on CodePen.0

7. CSSブレンドモード×SVGテキスト

CSSブレンドモードとSVGテキストを組み合わせた作品がこちら。

赤い文字と、青の袋文字を重ねています。シンプルながら魅力的なデザインですね。

See the Pen SVG Blended Outline & Text by Natasha Gonzales (@ngonzalesdesign) on CodePen.0

8. シームレスな虹色

さまざまな色がシームレスに混ざり合ったこの作品。実は3つのベーシックなCSSグラデーションと、ブレンドモードだけで作られています。

ちょっとした工夫で、美しい作品が作れることが分かる作品です。

See the Pen CSS Blend Mode Background by Gemma Stiles (@GemmaStiles) on CodePen.0

おわりに

CSSブレンドモードの機能をはじめて知った人は、まず画像を重ねて効果をつけることを考えるでしょう。しかし今回ご紹介した例からもわかるように、工夫次第でナビゲーションやテキストデザインにも応用できます。

派手なアニメーションからマイクロインタラクションまで、CSSブレンドモードの可能性は無限大です。ぜひ次のプロジェクトのデザインで活用してみてください。

（原文：Eric Karkovack　翻訳：Nakajima Asuka）

こちらもおすすめ！▼