CSS3 "Поднятые углы" Капля-тень с непрозрачностью

Я играл с некоторыми эффектами drop-shadow CSS3. Я очень люблю эффект "поднятых углов", но я столкнулся с проблемой при попытке добавить непрозрачность элемента. Мой вопрос: есть ли способ создать эффект "поднятых углов" на элемент с непрозрачностью?

http://jsfiddle.net/WAvZu/

.drop-shadow{
    position:relative;
    float:left;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -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;
}
.drop-shadow:before,
.drop-shadow:after{
    content:"";
    position:absolute;
    z-index:-2;
}
.lifted{
    -moz-border-radius:4px;
    border-radius:4px;
}
.lifted:before,
.lifted:after{
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    max-height:100px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);
}
.lifted:after{
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
    -moz-transform:rotate(3deg);
    -ms-transform:rotate(3deg);
    -o-transform:rotate(3deg);
    transform:rotate(3deg);
}

Ответы

Ответ 1

Проблема заключается в понимании стековых контекстов и способах их отображения в браузере.

  • корневой элемент (HTML),
  • позиционируется (абсолютно или относительно) с значением z-index, отличным от "auto",
  • с значением непрозрачности менее 1.
  • на мобильных WebKit и Chrome 22+, позиция: фиксированная всегда создает новый контекст стекирования, даже когда z-index является "авто"

9.9.1 Определение уровня стека: свойство "z-index"

  • фон и границы элемента, образующего укладку контекст.
  • контексты дочерних стеков с отрицательными уровнями стека (большинство сначала отрицательный).
  • входящие, не-встроенные, не-позиционные потомки.
  • непозиционированные поплавки.
  • входящие, входящие в систему, не-позиционные потомки, в том числе встроенные таблицы и встроенные блоки.
  • контексты дочерних стеков с уровнем стека 0 и позиционированными потомки с уровнем стека 0.
  • контексты стека дочерних элементов с положительными уровнями стека (наименьший сначала положительный).

Фон #test отображается первым, так как это элемент, к которому применяется непрозрачность. После этого тени идут сверху, так как они находятся в новом контексте стекирования (position: absolute). И, наконец, текст div.

Простое решение: Было бы обернуть div в другой div и применить непрозрачность к этому div вместо #test.

http://jsfiddle.net/WAvZu/3/

Еще одно хорошее: Что никто не сказал вам о Z-индексе

Ответ 2

После обсуждения я не настолько уверен в этом, чтобы быть честным, но я нашел эту статью: Контекст стекирования.

Насколько я знаю, трюк с z-index: -2 в вашем примере работает только потому, что вы не установили z-index на .drop-shadow, что означает, что он не имеет контекста стекирования. Обычно дочерний элемент (:before и :after - это какой-то ребенок) не может иметь более низкий z-index, чем родительский, но он может быть ниже, если родитель не имеет контекста стекирования.

Проблема с opacity заключается в том, что она создает контекст укладки:

Контекст укладки формируется в любом месте документа любым элементом, который является либо

  • корневой элемент (HTML),
  • позиционируется (абсолютно или относительно) с значением z-index, отличным от "auto",
  • элементы со значением непрозрачности меньше 1. (...),
  • ...

С учетом сказанного вы можете работать с помощью обертки

<div class="wrapper">
    <div class="drop-shadow lifted">This is correct with opacity.</div>
</div>

и установите там opacity.

.wrapper {
    opacity: .5;
}

Ответ 3

Я смог подделать это решение, добавив div внутри контейнера с "поднятыми углами". Это взломать, и я полагаю, что кто-то другой может придумать лучшее решение, но я думал, что опубликую свои результаты на случай, если кому-то будет интересно.

http://jsfiddle.net/WAvZu/2/