この記事はトリックの箱として機能し、ボックスの影、ブレンドモード、フィルタのようなボックスの装飾に使用できる高度な機能のいくつかを紹介します。

ボックスの影

前提知識:	HTML の基礎（HTML 入門を学ぶ）、および CSS の機能の考え方（CSS 入門を学ぶ）。
学習目標:	ボックスの高度なエフェクトの使用方法についてのアイデアを得ることと、CSS 言語に登場しているいくつかの新生のスタイル設定ツールについて知ること。

テキストの装飾のモジュールに戻って、{{cssxref("text-shadow")}} プロパティを見てみましょう。これにより、要素のテキストに1つ以上のドロップシャドウを適用できます。ボックスにも同等のプロパティがあります — {{cssxref("box-shadow")}} を使用すると、実際の要素ボックスに1つ以上のドロップシャドウを適用できます。テキストの影と同様に、ボックスの影はブラウザー間で非常によくサポートされていますが、IE9 以降のみです。古いバージョンの IE を使用しているユーザーは、影なしで対処するしかないかもしれないので、コンテンツがそれらなしで判読可能であることを確かめるためにデザインをテストするだけです。

簡単なボックスの影

物事を始めるための簡単な例を見てみましょう。まず、いくつかの HTML です。

box-shadow プロパティ値に次の4つの項目があることがわかります。

これらの値を定義するために必要な長さと色の単位を使用できます。

複数のボックスの影

次のように、1つの box-shadow の宣言で、複数のボックスの影をコンマで区切って指定することもできます。

<article class="multiple">
  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>

ここでは、複数の色付きレイヤーを持つ凸型のボックスを作成することで楽しいことができましたが、例えば複数の光源に基づいて影を付けてよりリアルな外観を作成するなど、好きな方法で使用できます。

その他のボックスの影の機能

{{cssxref("text-shadow")}} とは異なり、{{cssxref("box-shadow")}} には inset キーワードがあります — これを影の宣言の最初に置くと、外側の影ではなく内側の影になります。見て理解してもらいましょう。

ここでは、フォーカス/ホバー/アクティブ状態と共にボタンの装飾を設定しました。このボタンには、デフォルトで単純な黒いボックスの影が設定されています。さらに、1つは明るく、もう1つは暗い、2つの内側の影を、ボタンに素晴らしい陰影エフェクトを与えるためにボタンの反対側の角に置きます。

ボタンが押されたとき、アクティブ状態は最初のボックスの影を非常に暗い内側の影と交換し、押されているボタンの外観を与えます。

注: box-shadow 値に設定できる別の項目があります — 色の値の直前に別の長さの値をオプションで設定できるのが、広がり半径（spread radius）です。設定すると、影が元のボックスよりも大きくなります。あまり一般的ではありませんが、言及する価値があります。

フィルタ

CSS フィルタは、Photoshop のようなグラフィックパッケージのレイヤーにフィルタを適用するのと同じ方法で、要素にフィルタを適用する方法を提供します。利用可能ないくつかの異なるオプションがあり、{{cssxref("filter")}} のリファレンスページでそれらすべてについて詳しく読むことができます。このセクションでは、構文について説明し、結果がどれほど楽しいものになるかを説明します。

基本的に、フィルタは任意の要素、ブロック、インラインに適用することができます — あなたは単に filter プロパティを使い、それに特定のフィルタ関数の値を与えるだけです。利用可能なフィルタオプションの中には他の CSS 機能と非常によく似た機能を持つものがあります。例えば、drop-shadow() は非常によく似た方法で機能し、{{cssxref("box-shadow")}} や {{cssxref("text-shadow")}} と同じエフェクトをもたらします。しかし、フィルタに関して本当に素晴らしいことは、ボックス自体を1つの大きな塊としてではなく、ボックス内のコンテンツの正確な形状に作用することです。それは常に望んだものではないかもしれませんが、もっときれいに見えます。簡単な例を使用して、意味を説明しましょう。

そして今、いくつかの CSS はドロップシャドウをそれぞれに適用します。

ご覧のとおり、フィルタのドロップシャドウは、テキストの正確な形と境界線の破線に従います。ボックスの影はボックスの四角形にちょうど従っています。

注: コードで接頭辞を使用する場合は、接頭辞が必要なバージョンと接頭辞の付かないバージョンを必ずすべて含めてください。そうすれば、可能な限り最大数のブラウザーでこの機能を使用できるようになり、後でブラウザーが接頭辞をなくすときに接頭辞の付かないバージョンも使用できます。また、これらの実験的な機能は変更される可能性があるため、コードが壊れる可能性があります。接頭辞が削除されるまで、これらの機能を試してみることが本当に最善です。

ブレンドモード

CSS ブレンドモードでは、2つの要素が重なるときにブレンドエフェクトを指定する要素にブレンドモードを追加できます — 各ピクセルに表示される最終的な色は、元のピクセル色とその下のレイヤーにあるピクセル色を組み合わせた結果になります。ブレンドモードは、Photoshop のようなグラフィックアプリケーションのユーザーにとっては非常によく知られています。

CSS でブレンドモードを使用する次の2つのプロパティがあります。

こちらの blend-modes.html サンプルページ（ソースコードを参照）、および {{cssxref("<blend-mode>")}} リファレンスページには、ここに掲載されている以外にもたくさんの例があります。

background-blend-mode

ここでも、これをよりよく理解できるように、いくつかの例を見てみましょう。まず、{{cssxref("background-blend-mode")}} です — ここでは次のいくつかの簡単な {{htmlelement("div")}} を示すことで、オリジナルとブレンドバージョンを比較できます。

次にいくつかの CSS です — <div> に1つの背景画像と緑色の背景色を追加しています。

結果はこれです — 左側にオリジナル、右側に乗算ブレンドモードがあります。

mix-blend-mode

それでは、{{cssxref("mix-blend-mode")}} を見てみましょう。ここでは上と同様の2つの <div> を提示しますが、要素がどのようにブレンドされるかを示すために、それぞれが紫色の背景を持つ単純な <div> の上に乗っています。

ここでは、乗算混合（multiply mix）ブレンドが2つの背景画像だけでなく、その下の <div> からの色もブレンドしていることがわかります。

-webkit-background-clip: text

先に進む前に、簡単に言及しておきたいと思うもう1つの新生機能は、{{cssxref("background-clip")}} の text 値です（現在 Chrome、Safari、Opera でサポートされており、Firefox で実装されています）。独自の -webkit-text-fill-color: transparent; 機能とともに使用すると、背景画像を要素のテキストの形に切り取ることができ、いくつかの素晴らしいエフェクトをもたらします。これは公式の標準ではありませんが、普及しており、開発者によってかなり広く使用されているため、複数のブラウザーにわたって実装されています。このコンテキストで使用すると、Webkit / Chrome 以外のブラウザーでも、両方のプロパティに -webkit- ベンダー接頭辞が必要になります。

では、なぜ他のブラウザーが -webkit- 接頭辞を実装したのでしょうか？主にブラウザーの互換性のためにです — 非常に多くのウェブ開発者が -webkit- 接頭辞を使用してウェブサイトを実装し始めているため、実際には標準に従っているのに、他のブラウザーでは壊れているように見え始めました。そこで彼らはそのような機能をいくつか実装することを余儀なくされました。これはあなたの仕事で標準的でなく接頭辞の付いた CSS 機能を使用する危険性を浮き彫りにします — それらはブラウザーの互換性の問題を引き起こすだけでなく、変更される可能性もあるため、コードはいつでも壊れる可能性があります。標準に固執するほうがはるかに良いです。

本番環境でこのような機能を使用したい場合は、ブラウザー間で徹底的なテストを行い、機能が機能しない場合でもサイトが引き続き使用可能であることを確認してください。

能動的学習: いくつかのエフェクトを用いた実験

今度は、あなたの番です。この能動的学習のために、下に提供されているコードを使用して、上で読んだエフェクトのいくつかを試してみてください。

間違えた場合は、Reset ボタンを使用して例をいつでもリセットできます。

Playable code

<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><div class="style-me">
</div></textarea>

  <h2>CSS Input</h2>
  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">.style-me {
  width: 280px;
  height: 130px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  background-color: red;
  background: url(https://mdn.mozillademos.org/files/13090/colorful-heart.png) no-repeat center 20px,
              linear-gradient(to bottom right, #f33, #a33);
} </textarea>

  <h2>Output</h2>
  <div class="output" style="width: 90%;height: 15em;padding: 10px;border: 1px solid #0095dd;overflow:hidden;"></div>
  <div class="controls">
    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
  </div>
</div>

var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);

まとめ

この記事が楽しかったことを願っています — ぴかぴかのおもちゃで遊ぶのは概してそうで、最先端のブラウザーで、どのような種類のツールが使用可能になりつつあるのかを見るのはいつも面白いです。ボックスの装飾の記事の終わりに到達したので、次に私たちの評価であなたのボックスの装飾のスキルをテストします。

{{PreviousMenuNext("Learn/CSS/Styling_boxes/Styling tables", "Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper", "Learn/CSS/Styling_boxes")}}