Внутренняя тень коробки, которая изогнута - PullRequest
Новая
       12

Внутренняя тень коробки, которая изогнута

0 голосов
/ 30 августа 2018

Я пытаюсь создать боковую панель, похожую на показанную здесь: https://www.sketchapp.com/docs/. Я сделал все, что работало нормально, за исключением создания непрозрачности теней для ящиков сверху и снизу, я пробовал тени для ящиков, но не смог сделать так, как показано на странице. что я сделал до сих пор

Заранее спасибо! ^^

изображение, чтобы увидеть

1 Ответ

0 голосов
/ 30 августа 2018

Добро пожаловать на SO. Вы можете использовать псевдоселекторы и добавлять к ним фон с линейным градиентом. например: 

div::before {
  background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
  content: '';
  display: block;
  width: 100%;
  height: 4rem;
  position: absolute;
  z-index: 0;
}

здесь я делаю следующее: Я установил фон с линейным градиентом, затухающий цвет, я поместил блок отображения, чтобы он вел себя как div, наконец, я установил z-index на 0, чтобы поместить его поверх других элементов. Вот рабочая демка: https://jsfiddle.net/hdsma1fv/5/

ссылки:

Edit:

Если вам нужно, чтобы тень скрывалась с помощью свитка, вам нужно прикрепить псевдоселектор ::before к элементу внутри свитка и удалить position: absolute;. Также, если вы хотите, чтобы он также отображался внизу, вам понадобятся две вещи: первая - повернуть угол линейного градиента и вторая - использовать псевдоселектор ::after вместо ::before. проверьте https://jsfiddle.net/hdsma1fv/34/ для обновленного примера с обеими модификациями.

...