只今、PHPを学習しております

(CSS)要素に影を落とすbox-shadowプロパティ

トッド

要素に影を付けるには、box-shadowプロパティを使うと表示されます。

まずは、サンプルを見てみましょう。↓

サンプル1
CSS
.box {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  /*ここから*/
  box-shadow: -4px -4px 6px 3px rgba(255, 255, 255, 0.7),
    3px 3px 6px 3px rgba(0, 0, 0, 0.05);
 /*ここまで*/
}

サンプル1で紹介するコードはbox-shadowプロパティで指定する値を、2つ用意して表示したものになります。

こんな事ができるよ。程度に知っておいてください。

box-shadowプロパティの指定方法について

box-shadow プロパティは、水平方向垂直方向ぼかし率広がり固定値、を指定して使います。

  • 水平方向は、正の値を指定した場合は右方向にズラし、負の値を指定した場合は左方向にズレます。

  • 垂直方向は、正の値を指定した場合は下方向にズラし、負の値を指定した場合は上方向にズレます。

  • ぼかし率は、指定した数値が大きいほど、ぼかします。

  • 広がりは、影が行き渡る領域を指定します。

  • は、カラーコードで指定します。

  • 固定値は、insetnone があり、insetを指定した場合は要素の内側に影が付きます。

もう一つサンプルを紹介します。

サンプル2
CSS
.box {
  width: 160px;
  height: 160px;
  border-radius: 10px;
  background-color: #fafafa;
  /*ここから*/
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.1);
  /*ここまで*/
}

こちらの方が一般的な使い方ですね。

サンプル2では、1つの影情報を指定しています。

コメントを残す

メールアドレスが公開されることはありません。