Как воспроизвести этот эффект тени?

Это мой первый год в CSS, и я пытаюсь воспроизвести этот эффект тени, который я нашел на Udemy:

#1 Наглядное пособие

Я изо всех сил стараюсь воспроизвести этот эффект, и вот шкаф, который у меня получился:

#box {
  -webkit-box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
-moz-box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
box-shadow: 3px 14px 14px -11px rgba(245,245,245,1);
  width: 50px;
  height: 50px;
  background: white;
  }

body {
  background: black;
  
  }
<div id='box'> Hi </div>

Как бы вы добились такого эффекта тени?

Спасибо! Я решил проблему. Постфактум я узнал, как Udemy решает эту проблему:

#A_16 {
    bottom: 0px;
    box-sizing: border-box;
    color: rgb(73, 133, 184);
    display: block;
    height: 34px;
    position: absolute;
    text-decoration: none;
    width: 358px;
    column-rule-color: rgb(73, 133, 184);
    perspective-origin: 179px 17px;
    transform-origin: 179px 17px;
    background: rgba(0, 0, 0, 0) linear-gradient(rgba(244, 244, 244, 0), rgba(244, 244, 244, 0.952941), rgb(244, 244, 244)) repeat scroll 0% 0% / auto padding-box border-box;
    border: 0px none rgb(73, 133, 184);
    font: normal normal bold normal 15px / 24px 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    outline: rgb(73, 133, 184) none 0px;
    padding: 0px 0px 10px 20px;
}

css box-shadow
person Jack Man    schedule 21.05.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Свойство box-shadow поддерживает ключевое слово "inset" для тени внутри блока. Например. box-shadow: inset 0 -10px 5px 5px hsl(0, 0%, 90%);

(кстати, префиксы не нужны, см. http://caniuse.com/#feat=css-boxshadow )

ОДНАКО, эффект, скорее всего, представляет собой фоновый эффект линейного градиента с элементом, расположенным абсолютно внизу, но перекрывающим обрезанное содержимое.

.box {
    position: relative;
    height: 5.5em;
    overflow: hidden;
    border: 1px solid #222;
}

.box footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 0.5em;
    background: linear-gradient(0deg, #eee 80%, transparent 100%);
}
<div class="box">
    Lorem<br>
    pork<br>
    ipsum<br>
    bacon
    <footer>READ MORE</footer>
</div>

person Nexii Malthus    schedule 21.05.2016
comment
Работал отлично. Если вам интересно, я отредактировал свой пост, чтобы показать, что на самом деле сделал Удеми... - person Jack Man; 22.05.2016