отобразить поле тени над текстом

Question

Допустим, у меня есть простой div с несколькими абзацами внутри.

Я хочу добиться эффекта затухания в нижней части div.

---

Я пытался настроить белую тень

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

но, очевидно, это не сработало, так как box-shadow всегда появляется под текстом.

Как я могу сделать это в чистом CSS?

Спасибо.

Answer 1

Как насчет использования "после" 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 2

Мне удалось воспроизвести эффект только с помощью CSS, но он немного хакерский:

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

Я положил два 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 3

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;
}

Answer 4

создайте div под всеми вашими другими div и установите отрицательный нижний край для этого div и верхнюю тень. Вы можете сделать это или вы можете сделать то, что я сделал. Сохраните изображение в формате png с этим затуханием и установите его в абсолютно позиционированный div, расположенный в нижней части вашего относительно позиционированного div, содержащего текст.