アドビ Web プラットフォームチームは、Web 上で利用可能なレイアウト、タイポグラフィー、そしてビジュアル効果を一歩先に進めるために働いています。我々は、W3C を始め、ブラウザベンダーを含む他の企業と、先進的なタイポグラフィー, 2D と 3D のフィルタ効果, 雑誌スタイルのレイアウトなどの仕様策定や実装を行っています。

グラフィックツールではずっと前から使えたのに、Web では利用できなかった機能の一つはブレンドです。ブレンドはほとんどのグラフィックデザインツールでサポートされ、頻繁に使われてきました。この主題だけでも数多くの書籍が出版され、興味深い効果を実現するための手順やヒントを紹介する数えきれないほどの Web 上のチュートリアルが存在します。ブレンドは PDF の様なフォーマットや Photoshop の様なツールでサポートされています。我々は、これを HTML の世界でも実現するのは当然だと感じています。

我々は Canon と共同で、ブラウザの描画モデルにブレンドを追加する CSS へのシンプルないくつかの追加を記述したプロポーザルのドラフトを書きました。この仕様は W3C FX タスクフォースを始め SVG や CSS ワーキンググループなどで発表されました。我々は、ブラウザベンダによる幅広い採用を実現すべく、W3C の勧告プロセスに従う予定です。

我々が機能を提案して以来、開発者やデザイナのコミュニティからすばらしいフィードバックを頂いています。彼らは提案された機能にとても詳しく、即座に興味深いコンテンツの制作への利用方法を見いだしました。

この記事は、Web ページ内でのブレンドの指定方法をいくつかのコードの例とともに紹介します。

ブレンドとは?

このコンセプトにあまりなじみの無い方のために説明します。ブレンドはレイヤーがその下にある要素からどのように色を引き継ぐかを決定します。より基本的には、ある要素の色を取得して、それをその要素の下に隠されている色と混ぜることです。ブレンドのモード名は、混ぜる際の数学的な公式を指定します。

例えば、以下のブレンドが適用されていない 2 つの画像の例を見てみましょう(図1):

ご覧のように、2 つの画像の間には色の混合は見られません。

さて、ここで太陽の画像にオーバーレイのブレンドモードを適用します。すると、以下の様な結果が得られます (図2):

下側の画像の明暗が反映されるよう太陽の色が再計算された様子が分かるでしょうか。

もし、他の人々がこの機能を使って制作したいくつかのすばらしいアートワークに興味があれば、‘Photoshop ブレンド チュートリアル’ で検索するといくつもの記事や YouTube ビデオを見つけられるでしょう。

Web ページ内の要素をブレンドする方法

この例では、3 つのスタイル付きのボタンが並んだ単純な Web ページを用います。 (図3)

HTML と CSS は以下の様になるでしょう。

HTML

<h2>texturing and blending</h2> <ul id="textured-menu"> <li>Home</li> <li>About</li> <li>Products</li> </ul>

CSS

#textured-menu li { width: 200px; height: 200px; padding-top: 65px; text-align: center; border-radius: 100px; margin: 10px; … }

さて、Web ページ上には 3 つのボタンが存在します。形は気に入っていますが、より興味深い効果を追加するために、背景のテクスチャを透過させたいと思います。

今日、そのような効果を表示するには Photoshop の様なプログラムで画像をつくらなければなりません。この方法の大きな欠点は、ユーザにとってダウンロード時間が増加することと、変更があるたびに画像をつくり直すことによる管理コストが高くなることです。また、もし画像が小さい画面に合わせて縮小されたら、テキストや線がギザギザになってしまうでしょう。

CSS ブレンドの提案では、これを実装するのはずっと簡単です。効果を適用したい要素にブレンドモードを指定するだけで良いのです。今回の場合であれば、この宣言をボタンの CSS シンタックスに追加します。

#textured-menu li { blend-mode: color-burn; }

そうすれば以下の様な効果を得られるでしょう。

背景がボタンを通して見える状態になっています。それでも、ブラウザはボタンがテキストを含む領域であることを理解しているため、描画にノイズは含まれず、テキストを選択することもできます。

‘blend-mode’ 属性はどんな HTML または SVG 要素にも適用できます。適用された要素は描画されて背景とブレンドされます。

#textured-menu li:hover { background-color: red; transition: background-color 0.15s linear; }

ブラウザは自動的にトランジション期間中の中間ステップの値を計算します。

CSS へのブレンドモードの追加に加えて、提案には独立(isolated)とノックアウト(knockout)というグループのサポートも含まれます。これら2つは先進的な機能で、どの要素同士がブレンドの対象となるかを詳細に定義する際に使用します。

ドロップシャドウへのブレンドの適用方法

現在、CSS のボックシャドウとテキストシャドウは背景の上に書かれますが、これは常に望ましいとは限りません。アルファを使うことで見た目を変えることは可能ですが、ドロップシャドウが色あせたりノイズが出ることもあります。より見た目の良い効果をつくるには、Photoshop のようなツールで影をブレンドするところです。

例えば、以下の画像は黒色のドロップシャドウを 75% の透過度で描いています(図5):

CSS

p { text-shadow: rgba(0,1,0,.75) 20px 54px; }

もし上の定義から透過の指定を削除して乗算のブレンドモードを適用すれば、以下の様な結果が得られます(図6):

影の色が背景に応じて変化しているのが分かるでしょうか。この変化はより自然な見た目の影を実現しています。

このときの CSS は以下の様になります:

CSS

p { text-shadow: green 20px 54px; text-shadow-blend-mode: overlay; }

同様に、ボックスの影を制御するための ‘box-shadow-blend-mode’ もあります。

CSS ボックス内のブレンド

CSS ボックスモデルと background の仕様はコンテンツの重なりを定義します。重なった要素だけのブレンドを実現したい場合もあるでしょう。

例えば、テキスト要素の色を背景の画像とブレンドしたいかもしれません(図7):

CSS

p { color: white; foreground-blend-mode: overlay; background-color: hsl(34, 53%, 82%); background-image: … );}

background-image 属性の完全な使い方は CSS3 Patterns Gallery をご覧ください(Divya Manian 作)。

foreground-blend-mode はテキストや入れ子になった要素のブレンドを指定します。背景画像へのブレンド用には background-blend-mode を導入しました。こちらはブレンドモードのリストを指定できます。リスト内の個々の要素はある背景画像に対応します。

ブレンドを適用できる場所は?

以下の表は CSS ボックスモデル内のブレンドを制御する CSS キーワードを示します:

要素

CSS キーワード

CSS ボックスのテキスト又は子要素

foreground-blend-mode

テキストのドロップシャドウ

text-shadow-blend-mode

CSS ボックスの背景画像

background-blend-mode

CSS ボックスのドロップシャドウ

box-shadow-blend-mode

CSS ボックス全体

blend-mode

CSS ブレンドの今後は?

アドビとキヤノンは CSS と SVG の作業グループに提案を提出し、双方に受理されました。つまりこの文書は今や正式な "Woking Draft" です。これは Web コミュニティ(あなたもその一員です!)により審査されるでしょう。フィードバックを統合して、できれば近い内に "Candidate Recommendation" の状態に進めたらと期待しています。

同時に、ブラウザベンダと共同で、大きなアーキテクチャ上の問題点が無いかを確認しています。

実現の可能性を調べるために、ブレンドを FireFox と Chromium に実装してみました。そして我々の初期の実装は最初の実験には十分だと感じられたため、Chromium のプライベートビルドを公開しました。慣習に従って、このビルドのブレンドの属性には "-webkit-" というプレフィックスが付けられています。ぜひこの機能を試して、結果を見てみてください。

我々はこの技術が Web で実現されるのを楽しみにしています。デザイナの皆さんがどんな新しくて斬新な使い方をするかを見るのが待ちきれません。

次のステップ

最新の CSS ブレンドについて学ぶには以下のリソース(英文)をご利用ください。