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

Question

Мне интересно узнать, какой способ создания теней для блоков с помощью CSS наиболее эффективен. Но это я имею в виду: простота реализации, гибкость и совместимость с различными браузерами.

Answer 1

Луковая кожура - мой личный фаворит.

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

Answer 2

Теперь это очень просто:

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

Answer 3

Способ, который я считаю наиболее эффективным в настоящее время, таков:

Необходимые правила 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.