Тени

Всего пару лет назад дизайнеры еще могли жить спокойно. Что бы оформить сайт, нужно было всего лишь подобрать цвета, нарисовать текстурку и самое главное – просто откинуть тень. Обычную тень с blur’ом и прозрачностью. Но вскоре появился 5-й фотошоп с эффектами у слоев, и теней стало слишком много (причем одинаковых). Нужно было придумать что-то совершенно новое…

Часть 1. Кривые тени

История

Первое подобие кривой тени я увидел в дизайне сайта Яndex’а. Потом появился дизайн сайта издательства «Питер», но его не приняли. Да и тени там были не совсем кривые. Зато теперь их можно наблюдать где угодно. Лучшие примеры – kempinski, mts, planetproject.

Для чего они вообще нужны?

По-моему, самое лучшее использование кривых теней – это стилизация под кривость и ассиметрию. Например, на сайте kempinski не использовано ни одного правильного прямоугольника.

Кроме того, если нет возможности создать большую картинку с тенью (тень – это, все-таки, градиент, а он требует большого количества цветов), то и тут можно использовать кривую тень, так как она может просто исчезнуть через несколько десятков пикселов. Получается, что вам совсем не обязательно проводить тени по всей странице. Достаточно поместить ее только в нужном месте, а дальше просто убрать.

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

Создание

Для создания кривой тени нужно 2 слоя: первый – верхний, с изображением; второй – слой, повторяющий форму тени, от которого она и откидывается. Форма меняется с помощью transform/scew, а дальше все просто. В принципе, кривой тенью является любая искаженная тень, т е не повторяющая форму объекта.

Правда сначала я думал, что кривые тени создаются просто маской. От объекта откидывается тень, накладывается маска, и, казалось бы, тень становиться кривой. Но на самом деле это совсем не так. Особенность кривой тени в том, что чем она ниже, тем она плотнее и, соответственно, темнее. А с простым использованием маски все получается совсем наоборот. С той стороны, где тень ниже – там она светлее. Поэтому после того как тень стала кривой, по ней надо еще и пропустить градиент (можно просто градиент по маске). Только тогда тень получится по-настоящему кривой и реальной.

Часть 2. Каскадные тени

Другая проблема теней (кроме однообразности) – это то, что на мониторе они не всегда смотрятся тенями.

Обычно тени отбрасывают от какой-либо группы объектов, расположенных рядом друг с другом и никак не соприкасающихся. На первый взгляд все выглядит вполне нормально, и, если все тени отброшены правильно, то вроде бы и говорить больше не о чем. Но, как ни странно, в 90% случаев такие тени никакой реальности не предают: смотря на них, человек не ощущает никакого пространства между нижним и верхним слоем.

Одним из лучших способов создать пространство на странице – увеличить количество слоев. При этом каждый новый слой должен лежать на предыдущем. Иначе получится просто неправильное использование теней – объекты будут «летать» в воздухе на разном расстоянии от фона. Чтобы этого не произошло нужно размещать каждый новый объект на предыдущем и делать его меншим по размеру.

Но особенную реальность таким «башенкам» придают каскадные тени. Если какой-либо слой не умещается на предыдущем, то на определенном участке тень опускается ниже. При этом тень может проходить по нескольким слоям. Надо только правильно подобрать прозрачность и размытость теней…

Кривые тени уже стали стандартом. Что будет дальше?

Владимир Голованов