Сегодня мы поговорим об использовании свойства CSS тени применительно к блокам. Так же, как свойство тени текста создает тень тексту, свойство тени блока создает тень всем остальным объектам. Для него даже используется подобный простой синтаксис с пятью значениями:

box-shadow: horizontal offset  vertical offset  blur  spread  color;

Перевод значений: горизонтальный отступ, вертикальный отступ, размытие, распространение, цвет.

Если использовать свойство тени блока вместе с различными трансформациями и другими свойствами CSS3, можно свести к минимуму обработку изображений в таких программах, как Photoshop, и код CSS, который гораздо проще менять и поддерживать, который имеет малый объем, и обработка которого занимает мало вычислительных ресурсов, может использоваться для создания большей части визуальных эффектов на странице.

Обратите внимание, что в коде HTML все является блоком, даже если его не видно, или если он только подразумевается. Все изображения — блоки:

img#greek-temple {
        width: 400px;
        height: 259px;
        border: 15px solid #ffd;
        box-shadow: 5px 5px 2px rgba(0, 0, 0, 0.3);
}

Если задать значение вертикального или горизонтального отступа как 0 и добавить много размытия, можно создать эффект свечения, а также изобразить эффекты от подразумевающегося освещения. Таким же образом можно создавать эффекты и для свойства тени текста. У свойства тени блока есть также возможность создавать внутренние тени, благодаря которым создается ощущение выпуклости:

h3#inception-logo {
        font-family: "Arial Black", Arial, sans-serif;
        text-align: center;
        letter-spacing: .3em;
        padding: 0 2em;
        font-weight: 900;
        font-size: 55px;
        color: #fff;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.3) inset;
}

Анимация свойства тени блока требует значительных вычислительных ресурсов, у Tobias Ahlin есть несколько интересных идей для плавного анимирования свойства тени блока.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Интересные эффекты с использованием свойства CSS3 тени блока
• Создание эффекта загибающейся бумаги без изображений с использованием CSS3
• Создание нескольких рамок с использованием CSS3