1

CSS3でそのような影を作成することはほぼ確実ではありませんが、誰かがそれを試し、方法を見つけた場合に備えて、私は尋ねています。

ここに画像の説明を入力してください

右側にサイドバーがあり（高さが制限されています）、左側に長いコンテンツがあります。影は最初にフェードインし、最後にフェードアウトします。この影を純粋に手続き型にすることはできますか（ラスターイメージはまったくありません）？

4

5 に答える 5

5

次のように放射状グラデーションを使用できます。

#leftshadow
{
    margin-left: 10px;
    height: 200px;
    width: 20px;
    border-left:1px solid #ebebeb;
    border-left:1px solid rgba(0,0,0,0.4);
    background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.3)),to(rgba(0,0,0,0)));
    -webkit-mask-box-image:-webkit-gradient(linear,left top,right bottom,color-stop(0.0,rgba(0,0,0,0)),color-stop(0.5,rgba(0,0,0,.8)),color-stop(1.0,rgba(0,0,0,0)));
    background-image:-moz-radial-gradient(left,ellipse farthest-side,rgba(0,0,0,.3),rgba(0,0,0,0));
}​

ここにjsFiddle

別の微調整がここにあります

元の回答

「単純な」はめ込み影が必要な場合は、次のようにすることもできます。

#leftshadow
{
    -webkit-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 5px 0px 5px -2px rgba(0,0,0,0.4);
    box-shadow: inset inset 5px 0px 5px -2px rgba(0,0,0,0.4);
}​

ここにjsFiddle

于 2012-07-27T09:59:33.137 に答える
0

これを試してください http://jsfiddle.net/6QSEc/1/

div{
    height:200px;
    width:100px;
    background-color:white;
    border:1px solid #f1f1f2;
    box-shadow:10px 0px 20px -10px rgba(0,0,0,0.5) inset;
}
于 2012-07-27T10:07:37.220 に答える
0 
.box {
    z-index: 100;
    border: none;
    padding: 0 0 0 10px;    
    background-image: url("images/topShadow"), url('images/bottomShadow'), url('images/shadow');
    background-position: 0 top, left top, 0 bottom;
    background-repeat: no-repeat, repeat-x, no-repeat;
}

これはテストされていませんが、現時点では時間がない微調整で機能するはずです。上、中、下の3つの画像があります。CSS3の複数の背景画像を使用して、これを左側の境界線として使用します。ボックスの左側にパディングを追加するだけです。画像のレイヤリングを処理するため、順序は重要です。最初のものは他のすべての上になります。順序は、画像のz-indexとして機能します。

于 2012-07-27T10:03:04.050 に答える
0

これが私が話したトリックです。つまり、白い影でセカンダリdivをレイヤー化します。

http://jsfiddle.net/dmezK/

完璧ではありませんが、ニーズに合わせて調整できると思います。

HTMLは次のとおりです。

<div id="main">
<div id="cheat"></div>

</div>​

これがCSSです：

#main
{
    width: 100px;
    height: 300px;
    -webkit-box-shadow: inset 10px 0px 5px -2px #888 ;
    position: relative;
}

#cheat {
    width: 300px;
    height: 300px;
    -webkit-box-shadow: inset 10px 0px 5px -50px white ;
    position: absolute;
    left: -100px;
}

注：複数のボックスシャドウを使用できる場合もありますが、それほど広くサポートされていません。

于 2012-07-27T10:06:00.787 に答える
0

これは私が作ることができる最も近いものです：

div {
  width: 300px;
  height: 600px;
  border: solid 1px;
  box-shadow:
    inset 0px 10px 10px #fff,  
    inset 0px -10px 10px #fff,
    inset 10px 0px 20px rgba(0, 0, 0, .3);
}

ライブデモ：Tinkerbin

于 2012-07-27T10:06:07.537 に答える