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

Question

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

изображение затонувшей кнопки http://gyazo.com/5c3178208bb904b3502a83a7490f7ffc.png

Кто-нибудь знает, как я могу получить этот эффект с помощью CSS?

Answer 1

Ключ здесь несколько теней от ячеек, большая темная вставка сверху слева и очень тонкая тень под ним немного ярче фона.

Обратите внимание, что форма box-shadow "смещение по оси x, смещение по оси y, размытие, цвет"

Научитесь использовать размытие и несколько теней, и вы сможете создавать действительно приятные эффекты.

Пример стиля (для отображения на фоне # 222):

.button {
    display:inline-block;
    padding: 10px 15px;
    color: white;
    border-radius: 20px;
    box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}

Answer 2

Вам уже дан ответ (box-shadow: inset ..), поэтому вот небольшая демонстрация того, как это может работать:

http://jsfiddle.net/L6nJj/

Важная часть box-shadow: inset 2px 2px 3px 0 red.

Для объяснения доступных опций: https://developer.mozilla.org/en/css/box-shadow#Values

Обязательно учитывайте поддержку браузером box-shadow, которая заключается в том, что она не работает в более старых версиях IE, но работает «везде», в противном случае: http://caniuse.com/css-boxshadow

Answer 3

Обратите внимание на свойство CSS3 box-shadow, в частности, на вставные тени.Пример L в этой статье должен обеспечить эффект, который вы ищете.