В этом уроке мы расскажем, как создать видимость приподнятой тени на изогнутом фоне с помощью 32-битного изображения в формате png, созданного в программе Photoshop. Следующий код CSS можно применить к любому элементу HTML, имеющему дочерние элементы. В нашем примере это элемент статьи: 

<article>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

Возможно, Вы предположили, что далее изображение в формате png будет применено как фоновое изображение, например, с помощью записи свойства множественных фоновых изображений. Но если попробовать такой способ, Вы заметите, что фоновое изображение может находиться только внутри элемента, к которому оно применяется. Вместо этого применим изображение тени с помощью псевдоэлементов ::before (до) и ::after (после).

Обратите внимание на этот способ, так как в следующем уроке мы расскажем о создании изогнутых теней с помощью CSS без изображений.

Сначала давайте зададим базовый код CSS:

article {
        width: 768px;
        margin: 2em auto;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 2em;
        background: #ffc;
        position: relative;
}

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

Для первой тени используем 32-битное изображение, созданное ранее:

article:before {
        content: url('shadow.png');
        position: absolute; z-index: -2;
        bottom: -15px; left: 8px;
}

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

У псевдоэлемента ::after будет много тех же свойств, так что сгруппируем псевдоэлементы вместе:

article:before, article:after {
        content: url('shadow.png');
        position: absolute;
        z-index: -2; bottom: -15px;
}

У правой тени есть только два отличия. Первое — ей задается отступ справа, а не слева, и второе — у нее изменено направление, она отображена горизонтально. Вместо того, чтобы создавать и загружать отдельное изображение тени, воспользуемся способом отображения изображений с использованием CCS:

article:left { left: 3%;  }
article:after {
        transform: scaleX(-1);
        right: 3%;
}

Вот и все! Теперь под элементом статьи есть небольшая изогнутая приподнятая тень. В отличие от многих других решений, это решение гибкое: если нужно будет задать ширину статей в процентах, тени передвинутся в соответствии с увеличением или уменьшением ширины статьи из-за изменения размера окна браузера или устройства.

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

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

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

• Создание изогнутых теней с использованием только CSS 
• Эффект накатывания изображения с использованием SVG и режимов наложения 
• Создание эффекта выцветшей фотографии с использованием CSS