CSS ブレンド モードの使用方法

CSS ブレンド モードは、ブラウザ内で画像効果を追加する簡単な方法です。

このため、画像編集ソフトウェア ソリューションから写真を編集して保存する従来の方法は必ずしも必要ではありません。 私たちはデザイナーとして、Adobe Photoshop などのツールを使用して画像にエフェクトを追加するのに数え切れないほどの時間を費やしてきました。 このチュートリアルを進めていくと、多くのオプションが Photoshop のオプションに似ていることがわかりますが、CSS スタイルを効率的に使用できるようになりました。

ブラウザのブレンド モードは、画像編集ソフトウェアの必要性を完全になくしますか? 完全ではありませんし、まだ完全ではありません。 しかし、CSS とブラウザーのサポートは、画像編集の新しい方法をサポートする上で長い道のりを歩んできました。 CSS と SVG のクリッピングとマスキング、ブレンド モード、3D 変換などにより、画像編集ソフトウェアへの依存を確実に減らすことができます。 ブラウザーがより洗練されるにつれて、より多くの可能性が見え、Photoshop で過ごす時間が (うまくいけば) 減るでしょう。

CSS ブレンド モードと CSS ミックス ブレンド モード

このチュートリアルでは、CSS ブレンド モードとその使用方法について説明します。 まず、知っておくべきいくつかの異なるオプションがあります。 1 つはbackground-blend-modeを使用した効果で、もう 1 つはmix-blend-modeを使用した効果です。

background-blend-mode propertyを使用すると、要素の背景レイヤー (画像または色) をブレンドできます。 ブレンド モードは値として定義され、背景画像の色をその背後にある色または他の背景画像とブレンドまたは混合する方法を指定します。

ブレンドを行いたいが、背景要素を使用したくない場合はどうなりますか? mix-blend-modeプロパティを使用して要素をブレンドできます。 このプロパティは、スタックされた HTML 要素間のブレンド方法を記述します。 重なっているレイヤー上の要素は、その下の要素とブレンドされます。 画像、テキスト、境界線、または見出しは、このプロパティの影響を受けます。

Adobe Photoshop 乗算の例

画像エディターでブレンド モードを表示する従来の方法を見てみると、CSS ブレンド モードで何ができるかがわかります。 次の写真は、Adobe Photoshop で作成したものです。 画像は独自の背景レイヤー上にあり、その上に赤いレイヤーがあります。 赤いレイヤーのブレンドモードは「乗算」が選択されました。 ご覧のとおり、赤いオーバーレイがあります。 この効果を実現するために、Adobe Photoshop は「乗算」が適用されたレイヤーから色を取得し、その下のレイヤーの色で乗算し、それらを 255 で割って結果を表示します。

これと同じ効果を CSS で実現することで、より迅速なカスタマイズと簡単な更新を実現できます。

CSS ブレンド モードの基本的な例

ブレンド モードがどのように機能するかを確認する簡単な例は、画像をbackground-colorとブレンドすることです。 まず、画像への URL パスを宣言し、次に色を指定する必要があります。 それらが決定されたら、ブレンドモードを選択する必要があります。 ここでは乗算が選択されており、このブレンド モードがbackground-imageの外観にどのように影響するかを示しています。

 .simple-blended { background-image: url(image.jpg); background-color: red; background-blend-mode: multiply; }

ブレンド モードは、レイヤーが重なっているときにピクセルの最終的なカラー値を計算する方法です。 各ブレンド モードは、前景と背景 (上部の色と下部の色) の色の値を取得し、その値を計算して、色の値を返します。 最終的に表示されるレイヤーは、ブレンドされたレイヤー間で重なり合うすべてのピクセルに対するブレンド モード計算の結果です。

乗算は非常に人気のあるブレンド モードですが、他のブレンド モード オプションも利用できます。色、明るさ。 「ノーマル」を指定するとリセットされます。 各ブレンド モードの詳細を 1 つずつ調べるのではなく、それらを試してみることが、最終的な結果がどうなるかを判断するための最良の方法です。

2 つの画像を使用した背景ブレンド モード

画像にカラー オーバーレイを配置するのではなく、2 つの画像を重ね合わせると、非常にクールな効果が得られます。 CSS 宣言に 2 つの背景画像を追加するのと同じくらい簡単です。 次の選択肢は、背景色を持つ (または持たない) ことです。 背景色が必要ない場合は、これを削除すると、選択したブレンド モードに応じて画像がブレンドされます。

 .two-image-stacked { background-image: url("image.jpg"), url("image-2.jpg"); background-color: purple; background-blend-mode: lighten; }

Background-blend-modes のグラデーション

単一の色だけを使用するのではなく、グラデーションを使用して独自の効果を与えることもできます。

 .gradient-on-image {
 バックグラウンド：
 線形グラデーション (紫 0%、赤 80%)、
 linear-gradient(右へ、紫 0%、黄 100%), url("image.jpg");
 background-blend-mode: スクリーン、差、明るく;
 } 

また、この例には複数の背景ブレンド モードがあることにも気付くでしょう。 1 つのブレンド モードでは不十分な場合は、複数のブレンド モードを使用できます。

実際の例は、この Codepen にあります。

混合ブレンド モードの例

この時点まで、焦点は背景にありました。 ページ上の他の要素がブレンド モードを利用したい場合はどうすればよいでしょうか? これは問題ありません。同じ種類のブレンド モードを使用できます。

初期、継承、および設定解除を除いて、 background-blend-modesと同じように見えます。

• 初期: ブレンド モードを設定しないプロパティの既定の設定。
• 継承: 親要素からブレンド モードを継承します。
• 設定解除: 要素からブレンド モードを削除します。

アイソレーションを使用した混合ブレンド モードの基本的な例

mix-blend-modeを使用する場合、分離が必要になることがあります。 まず、「スタッキング」が可能であることを知っておくことが重要です。これは、多くのレイヤーを操作する場合に役立ちます。 箱の積み重ねを考えてください。 各ボックスはグループから分離されています。 各ボックスの内部には、複数のアイテムのレイヤーが存在する場合があります。 この考え方は、何を分離する必要があるかを判断する際に役立ちます。

Mix-blend-mode によるテキストと画像の混合

この例では、クラスがimg-wrapのdivに画像が含まれています。 画像には乗算のmix-blend-modeあります。 基本的に、画像は背景に落ちて見えます。

これを防ぐには、 img-wrap div (見出しテキストも含む) をスタックされたコンテンツの新しいセットにして、body 要素の背景とは別に設定する必要があります。 これは分離プロパティで行われます。 デフォルト値は auto なので、 isolation: isolate; を追加する必要があります。

これをテストするには、 divの分離プロパティを.img-wrapクラスでコメント アウトし、結果を確認します。

HTMLは次のとおりです。

 <div class="img-wrap"> <img src="http://abbeyjfitzgerald.com/wp-content/uploads/2017/01/blend-mode-original.jpg" /> <h2>Outdoor Club</h2> </div>

ここにCSSがあります。 .img-wrapのisolateに細心の注意を払ってください。

 h2 { margin-bottom: 7rem; position: absolute; top: 45%; right: 0; left: 0; margin: auto; text-align: center; font-size: 4rem; padding: .5em .25em; color: #007eae; text-shadow: 2px 3px 3px #000; mix-blend-mode: overlay; } .img-wrap { width: 45%; padding: 1%; position: relative; isolation: isolate; margin: 0 auto; } .img-wrap img { max-width: 100%; mix-blend-mode: multiply; }

実際の例は Codepen にあります。

Mix-blend-mode でテキストを切り取る

ミックス ブレンド モードを使用すると、いくつかの興味深いタイプ エフェクトを作成できます。 テキストを切り取る簡単な方法があります。 背景は、 h1要素の塗りつぶしによって隠されています。

HTMLは次のとおりです。

 <div class="dark-cover"> <h1>Outdoor Club</h1> </div>

<div>を含むものは、森の背景画像で埋められます。

 .dark-cover { background-image: url(image.jpg); text-align: center; background-size: cover; }

その中の見出しは、オプションの背景色でスタイル設定されています。 見出しは、乗算のmix-blend-modeを使用することで、半シースルーの背景画像でシースルー効果があります。

 .dark-cover h1 { margin: 0; font-size: 8rem; text-transform: uppercase; line-height: 1.9; color: #fff; background-color: green; mix-blend-mode: multiply; }

実際の例は Codepen にあります。

ミックスブレンドモードと SVG

SVG ファイルは Web で非常に人気があり、CSS ブレンド モードもうまく機能します。 シェイプを簡単にターゲットにして、目的のブレンド モードを設定できます。

この例でも分離が重要でした。 円を分離しないと、灰色の背景が干渉します。

サークル グループを作成するコードは次のとおりです。

 <svg> <g class="isolate"> <circle cx="60" cy="60" r="50" fill="red"/> <circle cx="100" cy="60" r="50" fill="lime"/> <circle cx="80" cy="100" r="50" fill="blue"/> </g> </svg>

CSS スタイルは次のとおりです。

 body { background: #898989; } circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* if this was not isolated, the gray background would impact the outcome */

この例は Codepen にあります。

Background-blend-mode および Mix-blend-mode のブラウザー サポート

ブラウザのサポートは非​​常に優れていますが、background-blend-mode と完全に一致しているわけではありません。 この機能を利用した設計を開始する前に、Can I Use を確認してください。 現在、Edge と Safari はサポートされていません。 限られたサポートに対処するため、およびサポートが必要なブラウザーによっては、CSS Feature Query が適切なオプションになる場合があります。 そうでない場合は、「ブレンドされた」画像を強化 (必須ではありません) と考えるのが最善の策かもしれません。

ブラウザーのサポートは、mix-blend-mode の方がわずかに優れています。 部分的なサポートを意識するのは良いことです。 たとえば、Safari は色相、彩度、色、明度をサポートしていません。

ブレンド モードで何がデザインできるかを実際に学ぶ最善の方法は、実験することです。 ここに示した例は、表面をなぞっただけです。 ブレンドモードを使ってどんなグラフィックが作れるのか、すごいです。 これは、Web でできることの大きな前進です。

WP Engine で作成する自由を促進

WP Engine は、WordPress で作成する自由を強化します。 同社の製品は、すべての WordPress プロバイダーの中で最速であり、150 万のデジタル エクスペリエンスを支えています。 世界の上位 200,000 サイトの多くが、WordPress の他の誰よりもデジタル エクスペリエンスを強化するために WP Engine を使用しています。 wpengine.com で詳細を確認するか、今すぐ担当者にお問い合わせください。