html - CSS3 の影効果による 3D 効果

Question

css3を使ってこの3D効果を実現しようとしていますが、

これは私がこれまでに試したことです:

    border-radius: 12px;
    box-shadow: 0px 0px 11px #000000;

Answer 1

上の画像のような影を作るには、after before before CSS3 タグを使用し、div に適用する必要があります。

.effect
{
     position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.effect:before, .effect:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
} 
.effect: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);
}

その他の例については、 sutilcodes.comにアクセスしてください...

Answer 2

.shadow-bottom {
    -webkit-box-shadow: 0 8px 6px -6px black;
       -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}