ボックスシャドウの基本
box-shadow:
0 0 4px 0 #777 （横 縦 ぼかし 範囲 色）
基本
基本
|
1 |
<div class="demo shadow">基本</div> |
|
1 2 3 |
.shadow { box-shadow: 0 0 4px 0 #777; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.demo { width:90%; height:200px; margin-top: 40px; margin-right: auto; margin-bottom: 40px; margin-left: auto; padding-top: 20px; padding-left: 20px; background-image: url(bg001.jpg); background-position: bottom; background-color: #FFF; } |
下にシャドウ
下にシャドウ
|
1 2 3 |
.shadow2 { box-shadow: 0 10px 6px -6px #777; } |
内側にシャドウ（inset）
内側にシャドウ（inset）
|
1 2 3 |
.shadow3 { box-shadow: inset 3px 3px 5px 0 #777; } |
左下にシャドウ
左下にシャドウ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.shadow4 { position: relative; } .shadow4:before { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } |
右下にシャドウ
右下にシャドウ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.shadow5 { position: relative; } .shadow5:after { z-index: -1; position: absolute; content: ""; bottom: 15px; right: 10px; left: auto; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); } |
左右の下にシャドウ
左右の下にシャドウ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.shadow6 { position: relative; } .shadow6:before, .shadow6:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 15px 10px #777; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } .shadow6:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } |
左右の下にシャドウ2
左右の下にシャドウ2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.shadow7 { position: relative; } .shadow7:before, .shadow7:after { z-index: -1; position: absolute; content: ""; bottom: 25px; left: 10px; width: 50%; top: 80%; max-width:300px; background: #777; box-shadow: 0 35px 20px #777; -webkit-transform: rotate(-8deg); -moz-transform: rotate(-8deg); -o-transform: rotate(-8deg); -ms-transform: rotate(-8deg); transform: rotate(-8deg); } .shadow7:after { -webkit-transform: rotate(8deg); -moz-transform: rotate(8deg); -o-transform: rotate(8deg); -ms-transform: rotate(8deg); transform: rotate(8deg); right: 10px; left: auto; } |
上下+内側にシャドウ（inset）
上下+内側にシャドウ（inset）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.shadow8 { position:relative; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .shadow8:before, .shadow8:after { content:""; position:absolute; z-index:-1; box-shadow:0 0 20px rgba(0, 0, 0, 0.8); top:0; bottom:0; left:10px; right:10px; border-radius:100px / 10px; } .shadow8:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); } |
左右+内側にシャドウ（inset）
左右+内側にシャドウ（inset）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.shadow9 { position:relative; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .shadow9:before, .shadow9:after { content:""; position:absolute; z-index:-1; box-shadow:0 0 20px rgba(0, 0, 0, 0.8); top:10px; bottom:10px; left:0; right:0; border-radius:100px / 10px; } .shadow9:after { right:10px; left:auto; -webkit-transform:skew(8deg) rotate(3deg); -moz-transform:skew(8deg) rotate(3deg); -ms-transform:skew(8deg) rotate(3deg); -o-transform:skew(8deg) rotate(3deg); transform:skew(8deg) rotate(3deg); } |
コメントを残す