От автора: в основе любого веб-сайта лежит простой прямоугольник. Такая форма была выбрана неспроста. Как и глиняные таблички, папирус и книги, сайты в основном состоят из строк с буквами, словами и предложениями. Подобно книгам наши камеры делают прямоугольные снимки. Все мы понимаем, что из прямоугольных кирпичиков, как правило, складываются прямоугольные стены.
Большинство блоков, из которых состоит сайт, прямоугольные по умолчанию. Это сделано для разработчиков. Мы говорим о тегах div, article, sections и т.д.
До появления CSS3 для того, чтобы вставить на страницу элемент непрямоугольной формы, нам приходилось прибегать к изображениям. Нынешние же веб-стандарты (к примеру, поддержка SVG) дают нам больше гибкости в этом отношении.
Давайте разберем несколько сайтов, которые использовали современные веб-стандарты для создания макетов нестандартных форм. Еще более важно для нас понять, как такие сайты повлияли на пользователей.
Easee: простой пример SVG
SVG расшифровывается как Scalable Vector Graphic или масштабируемая векторная графика. Современный и довольно зрелый формат файлов, которые можно масштабировать в обе стороны без потери качества. SVG отличается от стандартной «сетки из пикселей» (PNG, JPG и т.д.) и больше похож на «рецепт к изображению». Это как приготовить пирог в два раза большего размера, просто добавив в него в два раза больше ингредиентов.
За последнее время современные браузеры подтянули поддержку SVG, что не может не радовать, так как SVG позволяет создавать предметы уникальной формы и не влияет на скорость загрузки страницы. Давайте поближе познакомимся с первым примером.
Если взглянуть на футер Easee, сразу заметен волнистый фон. Фон адаптируется под любой размер экрана мгновенно, так как это инлайновый SVG, а размер файла совсем небольшой, меньше 1Кб. Растровое изображение весило бы в 4 или 5 раз больше. Ниже я представил вам весь SVG код, в том числе и легкую тень, которую вы могли и не заметить.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<svg width="1440px" height="204px" viewBox="0 0 1440 204" version="1.1" class="homepage__features__wave"> <defs> <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-1"> <feoffset dx="0" dy="-4" in="SourceAlpha" result="shadowOffsetOuter1"></feoffset> <fegaussianblur stdDeviation="0" in="shadowOffsetOuter1" result="shadowBlurOuter1"></fegaussianblur> <fecolormatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.056 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1"></fecolormatrix> <femerge> <femergenode in="shadowMatrixOuter1"></femergenode> <femergenode in="SourceGraphic"></femergenode> </femerge> </filter> </defs> <path d="M6.05022984e-08,204 C0.00535896441,203.997351 356.00274,28.000572 720,104 C1084,180 1440,4 1440,4 L0,4 L0,204 L0,4 L1440,4 L1440,204 L0,204 Z" fill="#F9F9F9" filter="url(#filter-1)"></path> </svg> |
SVG фон не просто предлагает что-то «другое», отличающееся от стандартных решений, он добавляет в дизайн дружелюбия, радости и персонализации. Со стандартным квадратом такого эффекта бы не было. Я говорил, что SVG изображения легко анимировать? Обновите страницу и присмотритесь!
Aardvark Brigade: стандартный пример на растровых изображениях
Разберем еще один пример, который оказывает тот же эффект на пользователя, но при помощи растровых изображений. С помощью панели разработчика в Google Chrome я проинспектировал самое верхнее фоновое изображение (под меню). Оказалось, что оно весит целых 197Кб.
SVG файлы – это набор геометрических фигур. В SVG крайне сложно создать текстуру. Так как растровые изображения не умеют увеличиваться без потерь качества, то изображение в этом примере очень широкое (2300px). Это сделано для того, чтобы оно могло подстроиться под любой размер экрана – еще одна причина большого веса.
Стоит ли оно того?
Что-то говорило мне, что нет. Однако проведенные мной тесты сказали да.
Я проверил сайт через tools.pingdom.com, и оказалось, что страница загружается за невероятные 1.26 секунды. В дизайне полно текстур из растровых изображений, и я ожидал большего времени загрузки. Но тест показал, что сайт был сильно оптимизирован. Этот пример подтверждает, что растровые изображения могут сослужить хорошую службу, если заранее подойти к вопросам производительности и оптимизации (и найти достаточно мощные серверы).
Обратите внимание: в SVG можно вставить растровое изображение. Получится некий гибрид, который будет хорошо подходить в отдельных случаях.
Built By Buffalo: пример CSS трансформаций
До сих пор наши примеры были довольно сложные. Для более простых форм (шестиугольник, треугольник или ромб) можно использовать простые HTML и CSS.
Для создания шестиугольников Built By Buffalo использует несколько повернутых треугольников. Современные веб-стандарты поддерживают трансформации типа вращения, искажения и масштабирования, что позволяет вообще не использовать изображения. Созданные фигуры можно стилизовать и анимировать при помощи родного кода.
Сайт Джойс Вёрк – мой самый любимый пример. Ее стиль работы с простыми фигурами – это больше чем просто визуальный стиль, это неотъемлемая часть ее бренда.
Джойс также использовала современные веб-стандарты для искажения обычных блочных элементов. Если вы давно искали легковесный способ создания таких форм в веб-дизайне с хорошей поддержкой в современных браузерах, то этот способ для вас. Единственный минус в том, что можно создавать только простые фигуры.
Наклонные секции стали крайне популярны в веб-дизайне. Если вы все думали, как сделать что-то подобное, теперь вы знаете.
Если прокрутить сайт Джойс вниз, вы заметите, что она использовала не только разные подходы к созданию данных форм, но и те, что мы уже упомянули в статье. Это приводит нас к мысли, что нет правильного или неправильного способа. Все зависит от ситуации.
CSS маска
С помощью свойства clip-path мы можем создать маску на объекте. Однако поддержка данного свойства до сих пор оставляет желать лучшего. По этой причине вы не найдете много примеров использования данного метода в сети. На CodePen есть несколько примеров, которые могут показать нам принцип работы маски.
Как видно из примера Карен Менезес, идея в том, чтобы создать форму и использовать ее в качестве трафарета, после чего просто обрезать края. В CSS есть стандартные фигуры, но по желанию можно использовать и свои собственные на SVG. Взглянем на что-то посложнее.
Я влюбился в этот замечательный пример, как только увидел его. Анимированная gif’ка внутри SVG фигуры. Кто мог подумать, что такое будет возможно? Зак Сосье даже использовал тут новомодный трюк с режимами наложения. Именно поэтому треугольник с анимацией имеет голубой оттенок. Режимы наложения имеют плохую поддержку.
У масок множество способов применения. Во-первых, с масками больше не нужно создавать простые фигуры, чтобы потом сложить их в более сложные. Во-вторых, маски делают формат SVG более полезным.
Маски позволяют создавать полностью уникальные фигуры (так как мы можем подключить SVG) из обычных квадратов без последствий. Маски – самый нативный способ. Браузеры стремятся как можно быстрее увеличить его поддержку, так как тогда фигуры можно будет настраивать через код.
Вы можете резонно задуматься: «Эти новые свойства плохо поддерживаются. Зачем мне вообще тратить на них время?».
Основная проблема заключается в том, что с новыми свойствами не бывает так, что в одно мгновение они обретают хорошую поддержку. Как было с SVG, процесс поддержки будет постепенным на протяжении нескольких лет. Если вы все будете ждать идеального момента, вы упустите возможность. Если коротко – не упускайте возможности.
Заключение
Как и со всеми трендами, есть большая разница между использованием метода на высоком эмоциональном подъеме и просто следованием тенденции.
Как мы убедились из наших примеров, простые фигуры могут повысить уникальность сайта или бренда. Однако нужно быть аккуратным и уделить должное внимание вопросу производительности.
Выбранный вами методу будет зависеть от сложности фигуры. А вы использовали простые формы в веб-дизайне? Что, по-вашему, было самым сложным, и стоило ли оно того?
Автор: Daniel Schwarz
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
