Тень элемента с использованием CSS2

Question

Как можно сделать тень элемента без использования box-shadow?

Answer 1

В CSS2 не было возможности создавать тени. Можно сделать обычный блок с тенью, заскринить его, и целиком поставить как background-image внешнего блока, внутри которого будет основной - ровно попадать внутри тени.

.pseudo-shadow {
  position: relative;
  margin-top: -4px;
  background-image: url('https://gyazo.com/e64c54f87f9d29d9f6302e5524d27ef7.png');
  width: 212px;
  height: 112px;
}

.box {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 200px;
  height: 100px;
  background-color: orange;
}

/***/

.control {
  margin: 4px;
  width: 200px;
  height: 100px;
  background-color: orange;
  box-shadow: 1px 1px 5px #000;
}

<div class="pseudo-shadow">
  <div class="box">картинка</div>
</div>

<div class="control">box-shadow</div>

Для блоков разного размера, можно было заморочиться и сделать 8 скринов: тени 4-х углов и 4-х сторон, расположить их в сетку + background-repeat: repeat-x / repeat-y;

https://caniuse.com/#search=CSS3%20Box-shadow - box-shadow поддерживается почти везде...

БЛОГ НА HUSL

Тень элемента с использованием CSS2

Ответы (1 шт):