Как добавить 3d обьем в шапку сайта?

Question

При верстке сайта возникла проблема. Не могу создать 3d эффект одной из сторон блока в шапке сайта (выделено красным цветом). Перечитал в сети про 3d и свойство perspektive , но так и не понял, как это использовать в моем случае, и подходит ли это вообще для решения моей задачи.

Вопрос: как можно решить данную проблему и как её решали вы, если сталкивались с таким?

Просьба тапками не кидать если что, я новичок, пока еще не понимаю всех нюансов верстки и веб-разработки) Заранее спасибо!

Answer 1

Здесь вы можете посмотреть как сделать трапецию на CSS:
https://ru.stackoverflow.com/questions/485419/Как-сделать-фигуру-трапецию-на-css

Здесь посмотрите как задаётся нужный вам градиент:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear

Пример похожий на ваш случай:

<div class="header-shadow"></div>
    
<style>
  .header-shadow {
    width: 640px;
    height: 40px;
    transform: perspective(360px) rotateX(45deg);
    background-image: linear-gradient(black, silver);
  }
</style>

UPD
Так же вы можете взять из макета картинку с градиентом,
и в стилях установить background-image для этого блока

Я бы поступил именно так, тк в случае с трапецией, блок будет неправильно смотреться при ресайзе страницы

А если ширина статическая, то подогнать значения из кода выше

Answer 2

Есть много способов сделать это. Но добрые люди подарили нам CSS 3D Transforms.
Нам нужно:

Установить перспективу (perspective)
Задать точку, откуда мы смотрим (perspective-origin)
Для элемента задать точку относительно которой будут производится трансформации (transform-origin)
Выполнить трансформации (transform)
Поиграть с тенями и светом

Пример:

body {
  background: black;
}

.cards {
  width: 500px;
  /* без перпесктивы никак */
  perspective: 500px;
  perspective-origin: 50% 200px;
  /* откуда смотрим */
  transform-style: preserve-3d;
}

.block {
  position: relative;
  transform-style: preserve-3d;
  margin-top: -20px;
}


/* Верхняя грань */
.topface {
  height: 50px;
  /* поворот относительно нижней грани: */
  transform-origin: 50% 100%;
  transform: rotateX(55deg);
}

.card {
  background: white;
  padding: 10px;
}

.content {
  background: linear-gradient(to top, #3b6fd8, #2d55a4);
  height: 200px;
}

.block:nth-child(1)~.block {
  box-shadow: 0px 45px 20px -30px rgba(0, 0, 0, 0.3);
}


/* верхняя грань каждого следующего блока светлее */
.block:nth-child(1) .topface {
  background: linear-gradient(to top, #808080, #80808030);
}

.block:nth-child(2) .topface {
  background: linear-gradient(to top, #b0b0b0, #b0b0b030);
}

.block:nth-child(3) .topface {
  background: linear-gradient(to top, #e0e0e0, #e0e0e030);
}

<div class="cards">
  <div class="block">
    <div class="topface"></div>
    <div class="card">
      <div class="content">
      </div>
    </div>
  </div>
  <div class="block">
    <div class="topface"></div>
    <div class="card">
      <div class="content">
      </div>
    </div>
  </div>
  <div class="block">
    <div class="topface"></div>
    <div class="card">
      <div class="content">
      </div>
    </div>
  </div>
</div>

Преимущество подхода в том, что все блоки являются объектами одной сцены, и нам не надо переживать как трансформировать каждый элемент.

БЛОГ НА HUSL

Как добавить 3d обьем в шапку сайта?

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