ボックスの影作成ツール

このツールで CSS の box-shadow 効果を組み立てて、 CSS オブジェクトにボックスの影の効果を追加することができます。

ボックスの影作成ツールは、 1 つまたは複数のボックスの影を要素に追加することができます。

ツールを開くと、右上の部分に四角形があります。これがシャドウを適用する対象となる要素です。この要素が選択されている状態（ページを最初に読み込んだときの状態）では、基本的なスタイルを適用することができます。

カラーピッカーツールを使って、要素の color を設定しましょう。
"border" チェックボックスを使って、要素の border をつけましょう。
スライダーを使って、要素の top, left, width, height の各プロパティを設定しましょう。

ボックスの影を追加するには、左上の「+」ボタンをクリックしてください。これで影を追加し、左側の列に並べます。それで新しい影の値を設定することができるようになります。

カラーピッカーツールを使って、影の color を設定しましょう。
"inset" チェックボックスを使って、影が内側になるようにしましょう。
スライダーを使って、影の位置、ぼかし、広がりを設定しましょう。

他の影を追加するには、「+」をまたクリックしてください。ここで設定した値は、この新しい影にも適用されます。左上の↑と↓のボタンで、 2 つの影の適用順を変更します。左側の列で最初の影をクリックして再度選択してください。要素のスタイルを更新するには、要素を選択し、上部にある「element」というボタンをクリックします。

要素に ::before と ::after の擬似要素を追加して、ボックスの影を付けることもできます。要素とその擬似要素を切り替えるには、上部にある「element」「:before」「:after」と書かれたボタンを使います。

右下のボックスには、要素と before:: または ::after 擬似要素の CSS が表示されます。