[CSS]box-shadowの面白い使い方！画像にシャドウをこんな感じにつけると立て看板風に見える

box-shadowはボックスの周りにふわりとしたシャドウをつけることができますが、それを少しアレンジして、立て看板風のシャドウをつけるテクニックをBloomから紹介します。

まずは、通常の周りにふわりとシャドウをつけてみます。

HTML

img要素をdivで包みます。

<div class="css-box-shadow">
  <img src="logo.png" alt="" />
</div>

CSS

ボックスの四辺にシャドウを適用します。

.css-box-shadow {
  width:133px;
  position: relative;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.5);
  -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
  box-shadow: 1px 1px 4px rgba(0,0,0,.5);
  padding: 2px;
  background: white;
}

仕上がりはこんな感じ。

まずは、四辺にシャドウを適用

続いて、右側に立て看板風のシャドウを加えます。

HTML

区別するために立て看板用のclass「css-deep-shadow」を加えます。
※加えなくてもできます。

<div class="css-box-shadow css-deep-shadow">
  <img src="logo.png" alt="" />
</div>

CSS

立て看板用のシャドウを設定します。

.css-deep-shadow:after {
  content: '';
  -webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  -moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  position: absolute;
  width: 10%;
  height: 5px;
  bottom: 23px;
  right: 90px;
  z-index: -1;
  -webkit-transform: skew(-50deg);
  -moz-transform: skew(-50deg);
  transform: skew(-50deg);
}

仕上がりはこんな感じ。

立て看板風のシャドウが完成

CSS

CSS全部はこんな感じです。
画像のサイズに応じて、「.css-deep-shadow」内のシャドウのサイズや位置を変更してください。

.css-box-shadow {
  width:133px;
  position: relative;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,.5);
  -moz-box-shadow: 1px 2px 4px rgba(0,0,0,.5);
  box-shadow: 1px 1px 4px rgba(0,0,0,.5);
  padding: 2px;
  background: white;
}

.css-deep-shadow:after {
  content: '';
  -webkit-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  -moz-box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  box-shadow:  100px 0 10px 20px rgba(0,0,0,.2);
  position: absolute;
  width: 10%;
  height: 5px;
  bottom: 23px;
  right: 90px;
  z-index: -1;
  -webkit-transform: skew(-50deg);
  -moz-transform: skew(-50deg);
  transform: skew(-50deg);
}

via: Code Snippet: CSS3 Deep Box Shadow on Elements