Пользовательские тени CSS - PullRequest
0 голосов
/ 11 ноября 2019

Здравствуйте, как сделать тень, как на этом изображении ниже, у меня нет никакого изображения, как это сделать.

enter image description here

1 Ответ

1 голос
/ 11 ноября 2019

Один из способов сделать это - стилизовать элементы pesedo ::before и ::after следующим образом:

div {
  width: 300px;
  height: 400px;
  background: #FFF;
  margin: 40px auto;
  position: relative;
}

div::before,
div::after {
  z-index: -1;
  position: absolute;
  content: "";
  width: 50%;
  height: 50%;
  right: 10px;
  top: 10px;
  max-width: 300px;
  background: #777;
  box-shadow: 15px 0px 10px #777;
  transform: rotate(3deg);
}

div::after {
  transform: rotate(-3deg);
  top: calc(50% - 10px);
}
<div></div>

Это см. ручка для более подробной стилизации теней.

...