Первый способ создания отодвинутой тени, придающей элементу HTML видимость приподнятости от плоскости страницы, реализуется с помощью свойства тени блока с использованием не особо широко известного или как минимум часто упускаемого из виду значения распространения.

Для начала применим обычные значения свойства тени блока, создающие впечатление подсветки сверху:

article {
        box-shadow: 0 10px 9px rgba(0,0,0,0.35);
}

У этой тени элемента статьи нет горизонтального смещения, вертикальное смещение 10 пикселей и размытие 9 пикселей. Проблема в том, что она падает прямо вниз, а нам нужно, чтобы она отступала от краев.

Результат применения обычных значений свойства тени блока, без значения распространения. Обратите внимание, что тень распространяется и до правого, и до левого краев изображения.

Можно применить дополнительное значение распространения, записывающееся после значения размытия. Если у значения распространения положительная величина, оно продлевает тень наружу:

article {
        box-shadow: 0 10px 9px 10px rgba(0,0,0,0.35);
}

В коде CSS выше тень расширится на 10 пикселей в обе стороны. Это было бы удобно, если бы нужно было создать эффект источника света, находящегося невысоко над центром элемента. В нашем случае нужен противоположный эффект: источник света, находящийся довольно высоко над элементом. Чтобы добиться этого, можно использовать отрицательное значение для сжатия тени:

article {
        box-shadow: 0 10px 9px -10px rgba(0,0,0,0.35);
}

Проблема в том, что такое численное значение, используемое в объявлении выше, отменит вертикальный отступ, спрятав тень за элементом. Чтобы компенсировать это, увеличим значение исходного смещения на положительное значение распространения, например, если значение распространения -7 пикселей, а вертикального смещения — 10 пикселей, новое значение вертикального смещения должно быть 17 пикселей:

img {
        box-shadow: 0 17px 9px -7px rgba(0,0,0,0.35);
}

Теперь тень отодвинута. Но она все еще прямая, хотя есть способы скруглить ее, о чем мы расскажем в других уроках.

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

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

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

• Создание всплывающих подсказок с использованием CSS
• Создание трехмерного вытянутого текста с использованием CSS
• Фоновые изображения в стиле поп-арт с помощью SVG и режимов наложения