1

積み重ねた紙の効果のように、CSS だけで他の複雑な効果が行われているのを見てきました。

http://jsfiddle.net/thefrontender/LwW7g/

<div class="slide expandable-slide">Title</div>
<div class="slide">Title</div>

.slide {
    float: left;
    display: block;
    position: relative;
    background: #FFF;
    height: 10em;
    width: 10em;
    padding: 1em;
    border: solid 2px #000;
    margin-right: 2em;
}

.expandable-slide {
    margin: 2em 2em 0 2em;
    box-shadow: -1em -1em #666,
                -2em -2em #333;
}

私の必要性は非常に似ていますが、2 つの外側のエッジがメインの正面 div に接続する必要があることを除きます。

ここに画像の説明を入力

これを可能にするトリックを知っている人はいますか？

4

4 に答える 4

1

複数のボックス シャドウを積み重ねて、目的の効果を得ることができます。

.slide {
    height: 200px;
    width: 100px;
    padding: 1em;
    border: solid 2px #000;
}
.expandable-slide {
    margin: 10px 10px 0 10px;
    box-shadow: 1px 1px #999, 
        2px 2px #999, 
        3px 3px #999, 
        4px 4px #999, 
        5px 5px #999, 
        6px 6px #999, 
        7px 7px #999, 
        8px 8px #999, 
        9px 9px #999, 
        10px 10px #999;
}

jsFiddle の例

于 2013-09-18T18:59:27.527 に答える
1

このようにすることもできます (最もエレガントではありませんが、魅力的に機能します):

.expandable-slide {
    margin: 2em 2em 0 2em;
    box-shadow: 0.05em 0.05em #555,
                 0.1em 0.1em #555,
                 0.15em 0.15em #555,
                 0.2em 0.2em #555,
                 0.25em 0.25em #555,
                 0.3em 0.3em #555,
                 0.35em 0.35em #555,
                 0.4em 0.4em #555,
                 0.45em 0.45em #555,
                 0.5em 0.5em #555
        ;               
}

フィドル

于 2013-09-18T18:58:13.240 に答える
1 
.expandable-slide {
    position: relative;
    margin: 2em 2em 0 2em;

    box-shadow: 20px 25px 0px 0px #333;

}
.expandable-slide:before {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-right: 15px solid #333;
border-top: 10px solid #333;
border-bottom: 15px solid #fff; /*match background color*/
border-left: 10px solid #fff;/*match background color*/
top: 194px;
left: 0px;
}
.expandable-slide:after {
position: absolute;
content: "";
color: #333;
background: #333;
width: 0px;
height: 0px;
border-bottom: 15px solid #333;
border-left: 10px solid #333;
border-right: 10px solid #fff; /*match background color*/
border-top: 15px solid #fff;/*match background color*/
top: 0px;
left: 194px;    
}
于 2013-09-18T19:03:42.860 に答える