Самый эффективный способ создания теней с помощью CSS

Я больше всего люблю снимать шкуру с лука.

Пример можно найти в этом статья alistapart.

На данный момент я считаю наиболее эффективным следующий способ:

Правила CSS необходимы:

    .shadow{
      position:relative;
      display:block;
      background-color:#bbb;
      border:1px solid black;
    }

    .shadowed_item{
        position:relative;
        border:1px solid black;
        background-color:white;
        top:-5px;
        left:-5px;
    }

HTML-код, к которому применяется CSS:

<div class='shadow'>
    <div class='shadowed_item'>I have a shadow.</div>
</div&gt

Я нашел его очень простым в реализации, гибким и одинаковым для FF 3, IE 6 и 7.

Теперь этого очень просто добиться:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33);

Первое значение - это горизонтальное смещение. Второе значение - вертикальное смещение. Третье значение - это распространение эффекта размытия. Четвертое значение - цвет.

Кроме того, вы можете добавить другое значение inset, которое заставит тень появляться внутри вашего блочного элемента:

box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;

Сейчас это очень хорошо поддерживается: https://caniuse.com/#feat=css-boxshadow