[CSS]box-shadowの面白い使い方！画像にシャドウをこんな感じにつけると立て看板風に見える
Post on:2013年7月31日
sponsors
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);
}
sponsors
