CSS3 Drop Shadow, который вставляется с обеих сторон под элементом

Я пытаюсь создать эффект падающей тени, как на картинке.

Тень с кодом ниже появляется прямо под элементом, но мне нужно, чтобы он начинался примерно с 20 пикселей слева и с 5 пикселей справа.

Кто-нибудь есть какие-либо советы о том, как создать это смещение тени на обеих сторонах?

эффект падающей тени

.myDiv {
  width: 100px;
  height: 100px;
  box-shadow: 10px 0px 5px -2px #999;
}
Источник

3 ответа

Решение

Опираясь на ответ @Ghost Echo, это можно сделать быстро, используя ::afterпсевдоэлемент.

Задание отображения блока псевдоэлемента приводит к тому, что элемент100%ширина относительного родителя, поэтому просто добавивheight:100%заставляет элемент полностью соответствовать родителю. Тогда это был всего лишь случай добавления поля, чтобы уменьшить ::after до необходимой ширины. Относительное расположение и z-index используются для перемещения элемента за основным <div> и пример box-shadow Значения близко соответствуют изображению, о котором идет речь. Возможно, вам придется изменить их в соответствии с вашими требованиями, а также добавить кросс-браузер box-shadow если нужно.

Смотрите демо или код ниже.

CSS

.myDiv {
    width: 100px;
    height: 100px;
    background-color:#fff;
    border:1px solid #eee; /* added for demo */
    position:relative;
}
.myDiv::after {
    content:"";
    display:block;
    margin:0 5px 0 20px;
    position:relative;
    z-index:-1;
    height:100%;
    box-shadow: 0 5px 5px 0 rgba(153, 153, 153, 1);
}

HTML

<div class="myDiv"></div>

Если вам нужно поддержать изменение IE8 ::after в :after так как он поддерживает только старый синтаксис CSS2. Там нет поддержки IE7 и ниже.

Источник

Вот забавное решение с использованием CSS :after класс псевдо.

http://jsfiddle.net/CY2N5/2/

Таким образом, вы положите тень на <div> ниже родительского div, который имеет меньшие размеры. Вам нужно будет настроить тень от окна по своему вкусу. Просто другое решение;-D

.myDiv {
width: 100px;
height: 100px; 
background:red;
position:relative; 
}
.myDiv:after {
content:"";
display:block;
width: 75px;
height: 100px;
margin-left:20px;
position:absolute;
z-index:-1;
-webkit-box-shadow: 0px 10px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 10px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         0px 10px 5px 0px rgba(50, 50, 50, 0.75);
}

Ответное решение можно увидеть здесь: http://jsfiddle.net/CY2N5/4/

Источник

Это должно сделать это или быть близко!

.myDiv {
  width: 100px;
  height: 100px;
  box-shadow: 20px 40px 2px -33px #999;
}

Примечание: последнее число является своего рода отрицательным полем, чтобы уменьшить размер, а 40 толкает его, чтобы оно оставалось видимым

Источник
Другие вопросы по тегам