CSSボックスシャドウチュートリアル:ステップバイステップガイド(+例)

公開: 2022-03-09

box-shadow CSSプロパティが独自のチュートリアルに値するのはなぜですか? 以下に示すように、これは、同時に複数の値をとる、より複雑なプロパティの1つであるためです。 これは初心者にとって特に難しいかもしれません。

これまでbox-shadowを適切に使用するのに苦労している場合は、適切な場所に来ています。 以下のガイドでは、このCSSプロパティについて知っておくべきことをすべて説明します。 それが何をするのか、その構文を正しく使用する方法、いくつかのクールなCSS box-shadow例、そして最後にそれを簡単に操作できるようにするいくつかのジェネレーターツールについて説明します。

CSSボックスシャドウとは何ですか?

これまでbox-shadowプロパティに気付いていなくても、おそらくWeb上で実際に動作しているのを見たことがあるでしょう。

cssボックスシャドウチュートリアルの例

上記は、野生での様子の良い例です(ここで少し増やして説明しますが)。 box-shadowは、基本的にその名前が示すとおりです。これにより、ほとんどすべての要素のフレームにドロップシャドウを追加できます。 影は、正方形、長方形、円形、楕円形など、アンカーの形状にも付着します。 これは、 border-radiusプロパティを設定した場合にも当てはまります。

アンカー要素の形状の例に付着しているボックスの影

Webの周りでは、人々はそれを使用してさまざまな効果を作成します。以下に、いくつかの興味深いbox-shadow例を示します。 今のところ、それが最も基本的なレベルでどのように機能するかについて話しましょう。

基本的なボックスシャドウの構文

ブラウザ開発ツールを使用してボックスシャドウのある要素を見ると、次のようなマークアップが見つかります。

 box-shadow: inset 0 25px 40px 0 rgba(0, 0, 0, 0.3);

少し複雑に見えますよね?

しかし、心配しないでください。これらの宣言のすべてが常に必要なわけではありません。 さらに、それらがどのように機能するかを理解すれば、最初のように混乱することはなくなります。

上記のように、 box-shadowは最大6つの値を取ることができます。 それらを一つずつ見ていきましょう。

オフセット-x

最初の値は、アンカー要素の側面からのドロップシャドウの水平距離です。 正の値は右に移動し、負の値は左に移動します。

pxemvhなど、この値の長さを示すすべての一般的なCSSデータ型を使用できます。 最も一般的に使用されるのはpxemです。

オフセットxの例

オフセット-y

上記と同じですが、縦軸が異なります。 正の値は要素の下に影を移動し、負の値は上に影を移動します。

オフセットyの例

ぼかし半径

これは、ボックスシャドウのぼかしを定義します。 値が高いほど、ぼやけます。 また、 blur-radiusは、すべての一般的なCSSの長さの単位を取りますが、負の値は取りません。

ぼかし半径の例

拡散半径

これは、要素の高さまたは幅を超えたシャドウの広がりを制御します。 長さが長いほど、広がりが大きくなります。 負の数を使用して収縮を導入することもできます。

広がり半径の例

ご想像のとおり、これにより、通常の方法でボックスの影の色を定義できます。 ほとんどの場合、16進数(例: #ededed )またはrgba(例: rgba(46, 182, 142, 0.9) )の値で表されます。 後者では、ドロップシャドウに一般的に使用される不透明度を制御することもできます。

ボックスシャドウカラーの例

色を設定しない場合、ブラウザは現在使用されているテキストの色を使用することに注意してください。

はめ込み

最後に、オプションで宣言の先頭にinsetを追加できます。 これにより、シャドウがドロップシャドウから要素内のシャドウに変わります。 境界線の内側、背景の上、要素のコンテンツの下に表示されるため、たとえばテキストはカバーされません。

はめ込みボックスの影の例

値を順番に使用する

box-shadowプロパティの値が表示される順序は次のとおりです。

 box-shadow: offset-x offset-y blur-radius spread-radius color inset;

ボックスシャドウを割り当てるには、少なくとも2つの長さの値が必要です。 ブラウザは、 offset-xおよびoffset-yにそれらを自動的に使用します。 3番目を追加すると、 blur-radiusとして解釈され、4番目はspread-radiusとして解釈されます。 insetcolorはオプションであり、最後または最初に任意の順序で表示できます。 以下のCSSはすべて同じ結果になります。

 box-shadow: 20px 20px 10px 0 inset rgba(0, 0, 0, 0.5); box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5) inset; box-shadow: inset 20px 20px 10px 0 rgba(0, 0, 0, 0.5); box-shadow: rgba(0, 0, 0, 0.5) 20px 20px 10px 0 inset; box-shadow: rgba(0, 0, 0, 0.5) inset 20px 20px 10px 0; box-shadow: inset rgba(0, 0, 0, 0.5) 20px 20px 10px 0;

複数のボックスシャドウの割り当て

誰もが知っているわけではないことは、同じ要素に複数のボックスシャドウを設定できることです。 そのためには、複数の値のグループを指定し、それらをコンマで区切ります。

 box-shadow: 20px 20px 10px 0 rgba(0, 0, 0, 0.5), -20px -20px 10px 0 olive;

上記のコードは次のようになります。

複数のボックスシャドウの例

これを使用して、要素の周囲に線を作成することもできます。 そのためには、異なる色でいくつかのシャドウを追加し、それらのオフセットとブラーをゼロに設定する必要があります。

 box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.5), 0 0 0 10px olive;

これにより、さまざまな色のアウトラインが作成されます。

アウトラインの例としての複数のボックスシャドウ

これはボックスモデルの寸法には影響しないため、ボックスの影が要素の全体的なサイズにmarginborderのように追加されることはないことに注意してください。

ブラウザの互換性

box-shadowに対するブラウザの互換性は、実際には心配する必要はありません。 これは、 insetや複数のシャドウなどのマークアップを含め、事実上すべてのブラウザで受け入れられる非常に確立されたCSSプロパティです。

cssボックスシャドウブラウザの互換性

一部のブラウザの古いバージョンをサポートするために、同じ値の-webkit-box-shadow -shadowプロパティと-moz-box-shadowプロパティを含めるのが一般的です。 ただし、最も一般的なブラウザの最新バージョンでは、これはもう必要ありません。

CSSボックスシャドウの例

次のこのbox-shadowチュートリアルでは、CSSボックスシャドウの例をいくつか見ていき、このプロパティで何ができるかを確認します。 ご覧のとおり、これを使用して非常にエキサイティングなことができるため、標準的なアプリケーションからより特別なアプリケーションに移行します。

ボタンに影を追加する

ボタンは、多くの場合、ボックスシャドウが適用されている要素です。 それは、ページ上で目立たせるための良い方法だからです。 結局のところ、ボタンを含める場合は、通常、他の人にボタンをクリックしてもらいたいと思います。 そうするように促すために、ボックスシャドウを使用してそれを行う方法の簡単な例を次に示します。

ボタンの例のボックスシャドウ

付随するマークアップは次のようになります。

 box-shadow: 0px 11px 12px rgba(0, 0, 0, 0.2);

ソフトボックスシャドウ

比較的ソフトなCSSボックスシャドウを作成する場合は、オフセットを0に設定しながら、ほとんどの場合、ぼかしと広がりを使用します。 このように、影は明確な形にはなりませんが、エッジの周りに柔らかく表示されます。

ソフトボックスシャドウの例

上記の効果を実現するには、次のマークアップを使用できます。

 box-shadow: 0 0 50px 10px #999;

これは、要素のすべての側面にボックスシャドウを作成するための優れた方法でもあります。 より明確にしたい場合は、単にスプレッドを上げ、ぼかしをトーンダウンし、より暗い色を使用します。

複数のボックスシャドウ

最後のbox-shadow例は、一度に複数のシャドウを使用するためのものです。 これはさまざまな可能性を提供します。 1つは、クールなフェード、数ステップのボックスシャドウを導入することです。

複数のフェードボックスシャドウの例

驚くほど簡単です。不透明度を下げながら、オフセットを均等に増やしながら、ボックスの影を積み重ねるだけです。 ちなみに、多くのボックスシャドウを使用する場合は、1つの長い宣言としてではなく、別々の行に宣言を記述すると便利です。 理解しやすくなります。

 box-shadow: 10px 10px rgba(0, 0, 0, 0.4), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px rgba(0, 0, 0, 0.05);

また、間に負のspread-radius値を持つ白いボックスシャドウを導入することで、これをさらに進めることができます。その結果、いくつかの要素が互いに重なり合っているように見えます。

空白の例を使用した複数のボックスシャドウ

なぜ負のスプレッド値なのか? そうしないと、白いボックスの影がその下の影を覆うためです。 負の値はそれらを縮小して、背後の色が透けて見えるようにします。 以下は、自分のWebサイトに同様の効果を導入する場合に必要なマークアップです。

 box-shadow: 10px 10px 0px -3px rgba(255, 255, 255), 10px 10px rgba(0, 0, 0, 0.4), 20px 20px 0px -3px rgba(255, 255, 255), 20px 20px rgba(0, 0, 0, 0.3), 30px 30px 0px -3px rgba(255, 255, 255), 30px 30px rgba(0, 0, 0, 0.2), 40px 40px 0px -3px rgba(255, 255, 255), 40px 40px rgba(0, 0, 0, 0.1), 50px 50px 0px -3px rgba(255, 255, 255), 50px 50px rgba(0, 0, 0, 0.05);

いくつかのCSSボックスシャドウの最後の例は、オフセットとブラーを0に設定する前述の方法です。 上で見たように、要素にはいくつかの輪郭があり、この場合はカラフルなものになります。 ただし、これが機能するのは、ボックスシャドウごとにspread-radius値が増加するためです。

複数のカラフルなCSSボックスの影の例

これを自分で試してみたい場合は、次のことから始めることができます。

 box-shadow: 0px 0px 0px 3px red, 0px 0px 0px 6px orange, 0px 0px 0px 9px yellow, 0px 0px 0px 12px green, 0px 0px 0px 15px blue, 0px 0px 0px 18px indigo, 0px 0px 0px 21px violet;

最高のボックスシャドウジェネレータ

これまで説明してきたように、 box-shadowは非常に多くの値を取ります。 したがって、希望する種類の影に到達するまで、少し試行錯誤する必要があります。

簡単にするために、コントロールで遊んだり、結果をすぐに確認したり、満足したらマークアップをコピーしたりできるボックスシャドウジェネレータツールがたくさんあります。

cssボックスシャドウジェネレータツールの例

ボックスシャドウジェネレータの最適なオプションは次のとおりです。

  • box-shadow.dev —この単一目的のツールには、必要なすべての機能と、最高のユーザーインターフェイスが備わっています。 insetを使用したり、いくつかのボックスシャドウを作成したり、オフセットを制御したり、スライダーを介してぼかし、拡大したり、手動で色を入力したりできます。 満足したら、[コードの表示]をクリックしてCSSマークアップをコピーします。 唯一の欠点は、古いブラウザ用のコードが提供されないことです。
  • CSSmaticボックスシャドウCSSジェネレーター—上記と同様です。 スライダーを使用してbox-shadowプロパティを制御したり、手動で数値を入力したりできます。 不透明度を独自に制御できます。これは素晴らしいことです。 一方、複数のシャドウの機能が不足しています。 取得するコードマークアップには、古いブラウザが含まれています。
  • Box Shadow CSS Generator —カラーピッキング機能も備えており、古いブラウザー用のコードも提供する堅実なオプションです。 クリックするだけでコピーできます。 不透明度を制御できますが、作成できるドロップシャドウは1つだけです。
  • CSS3gen CSS3ボックスシャドウジェネレーター—もう1つのドロップシャドウジェネレーター。 ここでの優れた機能は、xオフセットとyオフセットの代わりに、シャドウの角度と距離を選択でき、ツールが残りを自動的に実行することです。 何らかの理由で、 spread-radiusinsetには独自のメニューがあります。 コピーして貼り付けるだけのCSSには、古い世代のブラウザのマークアップも含まれています。

最終的な考え:CSSボックスシャドウ

box-shadowプロパティは、最初は圧倒される可能性があります。 これは多くの値をとるプロパティの1つであるため、実際よりも複雑に見える可能性があります。 うまくいけば、このCSSボックスシャドウチュートリアルはその気持ちを休ませました。

上記では、CSS box-shadowとは何か、およびそれがどのように機能するかについて説明しました。 構文、値、およびそれらがどのように連携するかについて説明しました。 さらに、すぐに使用できるマークアップなど、CSSボックスシャドウを実際に使用する方法の例をいくつか紹介しました。 最後に、少し助けが必要な人のために、私たちはあなたのために多くの重労働を行うことができるいくつかのCSS box-shadowジェネレーターをリストしました。

これで、このCSS機能をWebサイトで使用できるようになるはずです。 私たちはあなたがそれで何をするかを見るのを楽しみにしています。

WebサイトでCSSボックスシャドウをどのように使用していますか? 上記で取り上げていないエキサイティングなユースケースはありますか? 以下のコメントでお知らせください!