Введение

Недавно мы столкнулись с проблемой создания фотореалистичных теней для нового проекта, который мы делаем с Little Thai. После обширных исследований мы обнаружили, что доступной информации не так много. Мы решили разработать собственную технику с использованием команды drop-shadow в CSS, и результаты оказались впечатляющими. Сегодня мы хотим поделиться с сообществом тем, как мы этого добились, чтобы каждый мог извлечь выгоду из этого улучшения.

Требования к этой части разработки были ясны; нам нужны были фотореалистичные тени для товаров в магазине Little Thai. Почему? Идея заключалась в том, чтобы создать цифровую витрину, чтобы пользователи могли покупать продукцию, предлагаемую этой компанией. Идея предложения заключалась в том, чтобы показать продукты сверху, как если бы они были размещены на столе. Чтобы сделать его более реалистичным, нам нужно было, чтобы эти ингредиенты имели фотореалистичные тени. На данный момент было два варианта. С одной стороны, это можно сделать с помощью Photoshop. В этом видео объясняется, как это сделать. С другой стороны, это можно сделать с помощью CSS, используя новую команду drop-shadow.

Это было непросто, потому что, как мы уже упоминали, не было информации о том, как создавать реалистичные тени в Photoshop. Однако это избавило нас от редактирования десятков товаров в магазине в Photoshop и тем более от необходимости редактировать каждый раз при добавлении нового товара. Как это было сделано тогда?

Техника

Команда drop-shadow в CSS — мощный инструмент для добавления теней к графическим элементам. Однако его использование не всегда просто для достижения фотореалистичного эффекта. Наше решение основано на применении нескольких теней с разными параметрами для достижения более глубокого и реалистичного эффекта.

Используемый CSS-код

Вот код CSS, который мы использовали для создания фотореалистичных теней:

фильтр: drop-shadow(17px 17px 13px rgba(0, 0, 0, 0.3)) drop-shadow(7px 7px 4.5px rgba(0, 0, 0, 0.3));

Объяснение кода

Первая тень: 17px 17px 13px rgba(0, 0, 0, 0.3): эта тень самая большая и рассеянная. Параметры указывают тень, смещенную на 17 пикселей по осям X и Y, с размытием 13 пикселей и непрозрачностью 30%.

Вторая тень: 7px 7px 4.5px rgba(0, 0, 0, 0.3): эта тень меньше и менее размыта, чем первая. Параметры указывают тень, смещенную на 7 пикселей по осям X и Y, с размытием 4,5 пикселя и непрозрачностью 30%.

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

Визуальный пример Вот визуальный пример того, как выглядит конечный результат с использованием нашей фотореалистичной техники теней:

Важно подчеркнуть два момента:

— Тень лучше всего смотрится на мягких серых тонах, а не на чисто белом.

— в этом случае тени рассчитаны на вид сверху. В других ракурсах это не получится.

Практическое применение

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

Онлайн-генератор фотореалистичных теней на CSS

Вы можете найти онлайн-генератор на веб-сайте MandarinaWebs.

Заключение

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