テキストの上のボックスの影を表示

Question

私はいくつかの段落を内部に持つ単純なdivを持っているとしましょう。

私はdiv要素の底面にフェージング効果を実現したいです。

---

私は

box-shadow: inset 0 -15px 10px white; 

白い影を設定するのではなくbox-shadowは常にテキストの下に表示されますので、明らかにこれは、動作しませんでした試してみました。

これを純粋なCSSでどのように達成できますか？

ありがとうございました。

Answer 1

私はCSSで効果を再現することができたが、それは少しハックです：

http://jsfiddle.net/EaXTB/1/

私は兄弟のような2つのdivを置く：

<div class="container"> 
    <div class="shadow"></div> 
    <div class="copy"> 
    <p>Lorem ipsum dolor sit amet, ...</p> 
    </div> 
</div> 

を絶対にそれらを配置：

.container { position:relative; } 

.shadow { 
    -webkit-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1); 
    -moz-box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1); 
    box-shadow: inset 0px -15px 10px 0px rgba(255, 255, 255, 1); 
    height: 200px; 
    width: 300px; 
    z-index: 100; 
    position:absolute; 
} 

.copy { 
    max-height: 200px; 
    width: 300px; 
    overflow: hidden; 
    z-index: 0; 
    position: absolute; 
} 

唯一の問題は、このためですあなたは.shadowクラスの高さを指定する必要があります。常に同じサイズであれば、これを使うことができます。それ以外の場合は、PNGオーバーレイを使用する方が効果的です。

のような何か：

.shadow { 
    background: url(overlay.png) repeat-x bottom; 
} 

Answer 2

divの下にdivを作成し、そのdivと上のドロップシャドウに負の下マージンを設定します。あなたはそれを行うことができますか、または私がやったことをすることができます。そのフェードを持つpng画像を保存し、テキストを含む相対配置されたdivの下部にある絶対配置されたdivに設定します。

Answer 3

何 "の後に" CSSセレクタを使用してはどうですか？それもIE8で動作：http://caniuse.com/#search=after

.container{ 
    position: relative; 
    height: 100px; 
    overflow: hidden; 
} 

.container:after{ 
    content: ""; 
    position: absolute; top: 0; bottom: 0; left: -15px; right: -15px; 
    box-shadow: inset white 0 -15px 10px; 
} 

私は両側に影を避けるために、メインボックスの外側内側ボックスを置くために、負の左と右を使用しています。

Answer 4

div { 
    height:300px; 
    color:red; 
    overflow-y: scroll; 
} 

div:after { 
    content: ""; 
    box-shadow: 0px -50px 50px -50px #000 inset; 
    position:fixed; 
    top: 250px; 
    left:0; 
    width:100%; 
    height:50px; 
    overflow: hidden; 
}