【ウェブデザイン】CSSブレンドモードで、あなたのウェブサイトにもかっこいいエフェクトを加えましょう！

ウェブデザイン、特にCSSは、近年意外性のないパターンを進んできました。初めに、ライブラリー以外かその両方の画像に重点を置き、特別効果を作成します。次にCSSでキャパシティーを加えていきます―これで外部リソースへの必要性を大幅に減らしています。ということは、ここで必要になってくる背景にある馬力の大部分は、純粋にブラウザに組み込まれているということです。

 

CSSブレンドモードは、新たな素晴らしい発見です。前景からも背景からも、色彩豊かな要素をディスプレイする手助けになります。これは、Photoshopブレンドモードと同じような作用です―とても興味深いエフェクトを生み出してくれること間違いなしです。

 

この記事を投稿する段階で、ブラウザーサポートは100%ではないですが、（マイクロソフトはあまり役に立ちませんでした）デザイナーたちは、すでにブレンドモードで実現できる可能性を追求しています。ここでは、私たちが見つけたエキサイティングな例を紹介していきます。

 

ブレンドが実現する変化を見る

 

こちらの便利なデモから始めましょう。各ブレンドモードが背景画像にもたらす効果について、紹介しています。ドロップダウンメニューを使い、複数のモードがどんな風にディスプレイに作用するのか見てみましょう。種類の多さに驚くと思いますよ。

 

テーマのある背景

 

これは、CSSブレンドモードのとても実用的な使用例です。このギャラリー上で写真を選択すると、フルサイズの画像だけでなく、それ以上を見せてくれます。また、背景にはブレンドされてぼやけたエフェクトのバージョンが見られます。より没頭させるような体験を提供しています。

 

フィルター&ブレンド

 

CSSで実現可能なマニピュレーションの数は、無限大です。このツールは、ベース/中央/ハイライト効果と使用するカラーを調整する、視覚的証拠を提供しています。最終的な出来上がりは、オリジナルとはかなり遠い見た目にもできるのです。

 

小さなコード、大きな結果

 

この注意深くブレンドされた写真は、CSSだけを使ってどんなことが達成できるかを紹介する、素晴らしい例です。この写真をより魅力的にする要素は、スタイルシートの長さがたった5つのラインだということです。グラデーションを加えてブレンドを完成させ、写真の背景を設定することが重点です。画像エディターでは、こんなに早く同じエフェクトはつくれないですよ！

 

前進するナビゲーション

 

ブレンドモードは、美しい画像エフェクト以上にも活用されます。ここでは、スクロールを主に活用するナビゲーションメニュー上で、便利なマイクロインタラクションとして使われています。ユーザーは、メニューアイテムの色の透明度により、その時読んでいる章がどこか見ることができます。さらに、エフェクトからは章の初めか終わりどちらを読んでいるかもわかるのです。ここではjQueryも、スクロールの位置を追跡し、大きな手助けになっています。

 

ダブルトラブル

 

多重露光写真のプロセスは、2つの画像を1つにまとめることです。このコンセプトはここで素晴らしいエフェクトに使用されており、背景の写真がアニメーション化されたGIFと合成されていることで、サイケデリックな効果を生み出しています。昔ながらのビデオゲームで遊びたくさせるような効果を持っているのです。

 

超かっこいいテキスト

 

ブレンドモードをSVGテキストと組み合わせることで、とても見事なエフェクトを作成できます。この例では、二重のテキストがつくられています。一つは塗りつぶされていて、もう一つが枠のみです。さらに二つのテキストは少しずらして配置されており、魅力的で機能的な見た目を実現しています。反応する機能までついています。

 

滑らかな虹模様

 

最後に、少しの創造性だけでどれだけのことが実現できるかの例を紹介して、私たちのコレクションを締めくくりたいと思います。この美しい虹のカラーですが、とても入り組んだように見えるかもしれません。しかし、実際にはかなり基本的なCSSグラデーションとブレンドモードを組み合わせてつくったものなのです。たまには、やっぱりシンプルがいいですね。

 

ブレンドさせることで目立たせる

 

CSSブレンドモードは、様々なデザイン要素に気分転換のような効果を与えます。私たちがCSSブレンドモードを主に画像と結びつける中、上の例ではその他のエフェクトについても紹介されました。テキストやナビゲーションのようなアイテムにも有益なのです。

 

さらに称賛できるところは、彼らが、今まで長い間印刷デザインで見られた技術を、簡単にウェブでも採用できるものに作り直したということです―もう画像エディターも必要ありません。

 

CSSブレンドモードで色々実験してみて、あなたの次のプロジェクトを強化する技法として活用してください。

 

もっと知りたいですか？私たちのCodePenコレクションで他の例も見てみましょう！！