как я могу сделать как этот фон с тенью? - PullRequest
Новая
       26

как я могу сделать как этот фон с тенью?

0 голосов
/ 08 апреля 2019

Привет, у меня есть div с изображением и оверлеем: 

<div class="container">
        <div class="overlay"></div>
        <img src="tablet.png" alt="tablet">
</div>

Как сделать наложение с тенью, как this: https://i.stack.imgur.com/Ls6Il.png

1 Ответ

1 голос
/ 08 апреля 2019

Хотя это, безусловно, можно сделать с помощью CSS или SVG, скорее всего, тень - это просто фоновое изображение, где тень уже нарисована.

Однако, вот пример того, как вы можете думать об этом в CSS: 

.scene {
  position: relative;
  width: 200px;
  height: 200px;
  background: #60c18b;
  overflow: hidden;
}

.object {
  position: absolute;
  width: 40px;
  height: 45px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_121330.png&f=1);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top left;
}

.object:after, .object:before {
  content: '';
  display: block;
  width: 100%;
  height: 100px;
  background: linear-gradient(rgba(0,0,0,0.3), transparent);
  transform: skew(-45deg, 0deg);
  transform-origin: top left;
  position: absolute;
}

.object:before {
  transform: translateY(2px) skew(0deg, -45deg);
  transform-origin: top right;
  width: 100px;
  height: 100%;
  position: absolute;
  right: 0;
   background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}
<div class="scene">
  <div class="object"></div>
</div>

Обратите внимание, что это просто для удовольствия, оно не идеально, и я бы не стал использовать это на производственном сайте.

...