Как использовать CSS для воспроизведения тени под устройством - PullRequest
Новая
       44

Как использовать CSS для воспроизведения тени под устройством

2 голосов
/ 20 января 2020

Можно ли использовать CSS для воспроизведения тени под устройством, изображенным ниже?

Следующие CSS и различные варианты не работают: 

filter: drop-shadow(rgba(22, 22, 22, 0.25) 0px 12px 15px);

Проблема заключается в концентрации тени под устройством и ее выравнивании. CSS выше не может заставить тень выглядеть так, как будто она проецируется на землю.

Codepen: https://codepen.io/Crashalot/pen/MWYzoJV

Smartphone with shadow

1 Ответ

3 голосов
/ 20 января 2020

Псевдоэлемент лучше подходит для этого, см. Пример ниже:

Bottom shadow with pseudo element

.object {
  margin: 20px;
  width: 70px;
  height: 140px;
  position: relative;
  border-style: solid;
  background: #E6E6FA;
}
.object:before {
  content:"";
  z-index: -1;
  position: absolute;
  bottom: -50%;
  width: inherit;
  height: inherit;
  border-radius: 40%;
  background: rgba(0,0,0,.55);  
  transform:  scaleX(1.3) scaleY(0.12);
  filter: blur(5px);
}
<div class="object"></div>

В качестве альтернативы вы можете использовать box-shadow: 

.object {
  margin: 20px;
  width: 70px;
  height: 140px;
  position: relative;
  border-style: solid;
  background: #E6E6FA;
  /* This is .shadow-lg from tailwindCSS */
  /* See https://tailwindcss.com/docs/box-shadow/ */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
<div class="object"></div>
...