Блог

Полигональный стиль в веб-дизайне

Стилистика Windows 8 попала в веб-дизайне и плотно в нем закрепилась практически моментально, быстрому росту популярности стилистики безусловно способствовала массированная рекламная компания, которая предшествовала появлению продукта одиозной корпорации.

Верстать или не верстать

Polygonal Арт, и стиль Metro пришли в мир веб дизайна в прошлом 2013 году.

Poly стиль плотно осел в полиграфической отрасли, представленной как различными иллюстрациями (плакатами, обоями, паттернами, дизайнами для одежды…), так и скинами для мобильных телефонов и т.п. и через некоторое время так же стал использоваться при разработке дизайнов для сайтов.

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

Вот тут он расскрывает себя во всей красоте, превращая привычные взгляду картинки в нечто совершенно новое, как бы переносит зрителя в мир крайностей и протеворечий (прямые линии и острые углы, игра контраста света и тени, плоское и выпуклое, объемное и плоское) и тем не меннее не лишая зрителя полноты восприятия целостного образа.

Смело можно предположить, что основой для «полигонального» стиля, послужил кубизм.

Cпособности и фантазия человека порой поражают. Живопись стала именно той областью, в которой люди развивают свое творчество в различных направлениях. Для того, чтобы удивить общество новыми веяниями в искусстве, художники стараются изобразить окружающее в новом свете. Авангардизм – результат развития некоторых творческих идей.

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

Куби́зм (фр. Cubisme) — модернистское направление в изобразительном искусстве, прежде всего в живописи, зародившееся в начале XX века во Франции и характеризующееся использованием подчёркнуто геометризованных условных форм, стремлением «раздробить» реальные объекты на стереометрические примитивы.

Английский искусствовед Эрнст Гомбрих выводит истоки кубизма из творчества французского художника Поля Сезанна, приводя как пример его работы «Гора Сент-Виктуар со стороны Бельвю» и «Горы в Провансе», а также его ответ на письмо молодого Пабло Пикассо: «В одном из писем Сезанн рекомендует молодому художнику рассматривать натуру как совокупность простых форм — сфер, конусов, цилиндров. Он имел в виду, что эти базисные формы необходимо держать в сознании как организующее начало картины. Однако Пикассо и его друзья восприняли совет буквально».

Возникновение кубизма неотделимо от творческих экспериментов Пабло Пикассо и Жоржа Брака на рубеже 1907—1908 годов. Исходным моментом кубистического периода творчества Пикассо послужила примитивистская африканская скульптура, заинтересовавшая его в эти годы. Правда, и до этого уже было заметно стремление Пикассо к абстрактной обобщенности образа, и геометризация формы в неродном африканском творчестве не могла не импонировать ему. Первым произведением кубистического цикла в творчестве Пикассо явились его «Авиньонские девицы».

Как верстается полигональный стиль

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

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

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

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

Задав нулевую высоту и ширину элемента и установив достаточно широкую границу border-а, мы получим набор из четырёх треугольников. Для большей наглядности раскрасим границы в разные цвета:

Верстаем Polygonal

.border-top-right-bottom-left {
							border-top: 50px solid #FF0000;
							border-right: 50px solid #44CF00;
							border-bottom: 50px solid #ffb82b;
							border-left: 50px solid #4C02CA;
							} 
.border-top-right-bottom-left {
border-top: 50px solid #FF0000;
border-right: 50px solid #44CF00;
border-bottom: 50px solid #ffb82b;
border-left: 50px solid #4C02CA;
} 
.border-top-right-bottom-left-2 {
max-width: 100px;
border-top: 50px solid transparent;
border-right: 100px solid transparent;
border-bottom: 50px solid #ffb82b;
border-left: 50px solid transparent;
transform: rotate(109deg);

}
.border-top-right-bottom-left-2 {
max-width: 100px;
border-top: 50px solid transparent;
border-right: 100px solid transparent;
border-bottom: 50px solid #ffb82b;
border-left: 50px solid transparent;
transform: rotate(109deg);

}

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *