CSS3：めくれているような影の入れ方
CSS3導入後に増えたデザイン。画像や見出しなどに影を入れる際に、より立体感を演出する方法としてよく活用されているので覚えておいて損はないですよね。
KEY SENTENCE
[1] 使用例
[2] 実装方法
[1] 使用例
example01.) 見出しでの使用例
example02.) 画像での使用例
[2] 実装方法
疑似要素とbox-shadowを使って影をいれていきます。
HTMLとCSSをそれぞれ以下のように記述していきましょう。
<!-- 見出し -->
<div class="label-shadow">Basic example</div>
<!-- 画像 -->
<div class="image-shadow"><img src="../images/sample.jpg" alt="shadow"></div>
/*見出し用*/
.label-shadow {
position: relative;
margin: 0;
padding: 10px 0;
background-color: #455765;
text-align: center;
text-shadow:1px 1px 2px rgba(255,255,255,.3);
}
.label-shadow::before, .label-shadow::after {
position: absolute;
bottom: 6px;
z-index: -1;
content: '';
width: 30%;
height: 50%;
box-shadow: 0 10px 15px rgba(69,87,101,.3);
}
.label-shadow:before {
left: 4px;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.label-shadow:after {
right: 4px;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
/*画像用*/
.image-shadow {
position: relative;
margin: 0;
padding:0;
border:solid 10px #f6f6f6;
background-color: #455765;
}
.image-shadow::before, .image-shadow::after {
position: absolute;
bottom: 6px;
z-index: -1;
content: '';
width: 30%;
height: 50%;
box-shadow: 0 10px 15px rgba(69,87,101,.3);
}
.image-shadow:before {
left: 4px;
-webkit-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.image-shadow:after {
right: 4px;
-webkit-transform: rotate(3deg);
transform: rotate(3deg);
}
ボックス要素に対して使うことが多いですが、使いどころはかなり自由がきくので、実装の際は参考までにどうぞ。
