ボックスシャドウ

このポストでは、我々はどのように滑らかで夢のようなボックスの影を達成することができます見ている.
ボックスシャドウsyntax ( xオフセットYオフセットのぼかし色).
複数の影を層状化することによって、我々はスムーズに作成することができますbox-shadow .

/* Default box-shadow */
  box-shadow:0px 6px 6px rgba(0, 0, 0, 0.11);

/* Multiple layering for smoother box-shadow */
  box-shadow:0px 2px 2px rgba(0, 0, 0, 0.15),
    0px 3px 3px rgba(0, 0, 0, 0.15),
    0px 6px 6px rgba(0, 0, 0, 0.15),
    0px 8px 8px rgba(0, 0, 0, 0.15);
}

この例では、15 %のアルファで4つの影を使用しました.Sharp アルファを減少させる影Diffuse 増加アルファと影.
The blur 半径が0に設定されている場合、影はシャープになります.

ツールhttps://brumm.af/shadows
ハッピーコーディング!😀