Использование инструментов CSS и макета браузера может обеспечить потрясающую визуализацию веб-контента. Использование веб-функций, таких как CSS-фильтры, WebGL, HTML5-видео, SVG, Canvas и развивающихся технологий будущего, таких как CSS-регионы, CSS-фигуры и пользовательские фильтры CSS, обещает значительно расширить творческий ландшафт. Adobe имеет долгую историю работы с создателями контента, увлеченными версткой и дизайном, и поэтому активно применяет эти знания в Интернете, внося свой вклад во многие развивающиеся веб-стандарты.
С помощью National Geographic мы использовали контент из их функции под названием «Лесной гигант» для создания прототипа, демонстрирующего, как эти функции могут обеспечить богатую веб-верстку и методы адаптивного реагирования. В этой статье мы покажем, как мы создали некоторые особенно интересные характеристики сайта. Для краткого обзора стоит посмотреть видео ниже , где Кристиан Кантрелл знакомит вас с различными функциями сайта.
Тонкости планировки
То, что представляет собой отличный макет, и стоящие за ним функции могут быть незаметными, поэтому мы создали «редакторское наложение», которое подчеркивает наиболее примечательные функции. Чтобы включить пометки редактора, нажмите на полоску внизу статьи.
Независимый от макета
Сегодня в Интернете макет часто определяется нашим контентом: контейнеры увеличиваются по вертикали, чтобы соответствовать тексту. При создании сложных макетов изменения в копии или другом контенте могут оказать нежелательное влияние на общий макет, что приведет к необходимости перепроектировать контент на основе неожиданных изменений. С помощью регионов мы можем по-настоящему отделить наш контент от макета, определив элемент как наш контент, а затем указав части макета, через которые мы хотим, чтобы этот контент проходил.
В примере с «Лесным великаном» история заключена в одном элементе. Затем по всей странице располагается макет макета, состоящий из фотографий и текстовых областей. С помощью CSS мы определяем элементы, через которые должен проходить контент. Когда копия достигает конца элемента, она переходит к следующему в порядке DOM. Это позволяет нам проявить творческий подход к нашим столбцам, смещая их и адаптируя их высоту в зависимости от дизайна, не беспокоясь о том, будет ли текст соответствовать высоте элемента или превысит ее. Это также позволяет нам иметь элементы внутри нашего макета, например изображения во всю ширину, в то время как история продолжает течь через него.
#storyContent {
flow-into: story;
}
.story {
flow-from: story;
}
В приведенном выше CSS мы создаем именованный поток под названием «story» . Содержимым этого именованного потока является элемент с идентификатором «storyContent» . Затем он проходит через все элементы с именем класса «story» . CSS-регионы — отличный инструмент для адаптивного дизайна, позволяющий использовать такие функции, как несколько столбцов и смещенные столбцы, для богатого макета на больших экранах и приспосабливаться к макету с одним столбцом на экранах меньшего размера. С помощью регионов вы также можете установить размер вашего региона с помощью адаптивных единиц, таких как vw или vh. Это можно использовать для того, чтобы столбцы не превышали высоту области просмотра в вашем макете, не беспокоясь об обрезании контента, поскольку он естественным образом перейдет в следующий элемент в цепочке регионов.
Буквицы
Исключения CSS позволяют нам обертывать текст вокруг или внутри неправильных фигур. Это может быть полезно для дизайнерских завитушек, таких как буквицы. Буквицы — распространенная практика проектирования, когда первая буква истории или главы увеличивается, позволяя остальному тексту обтекать контур персонажа. Этот эффект очень похож на то, как встроенный контент обтекает плавающие элементы, однако, за исключением исключений, мы больше не ограничиваемся прямоугольными блоками. Используя shape-outside для float, мы можем определить геометрию, которая позволит нашему контенту плотно обтекать форму нашего персонажа.
.drop-caps {
height: 100px;
width: 100px;
float: left;
shape-outside: ellipse(50%, 50%, 50%, 50%);
}
Это создаст эллипс, позволяющий содержимому обтекать круглую форму. Кроме того, поскольку мы используем относительные единицы измерения формы, изменение размера элемента будет отражаться на размере фигуры.
Формы
Помимо буквиц, исключения дают возможность переносить текст внутри фигур с помощью shape-inside. Мы используем эту функцию по всему сайту, особенно с большими подписями к изображениям, используя негативное пространство фотографий для обрамления текста. Это также позволяет нам обтекать текст по контуру других изображений и графики, имитируя макеты, которые раньше было очень трудно реализовать в Интернете.
Фигуры также могут работать с адаптивными макетами, используя относительные единицы измерения для определения формы. Таким образом, мы можем создавать фигуры, которые растягиваются в зависимости от контейнера или области просмотра, и даже использовать медиа-запросы, чтобы полностью изменить форму или удалить ее, поскольку все это определено в CSS. Ниже приведен пример одной из многоугольных форм, используемых на сайте, со значениями, определяющими точки:
.shape {
shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}
Сбалансированный текст
Сбалансированный текст — это функция, которая при переносе строк рассматривает весь блок текста внутри элемента, а не переносит слово за словом. Он позволяет избежать ситуаций, когда у нас есть одно или два слова в одной строке, разбивая строки текста для достижения одинакового размера строк внутри элемента. Этот уровень контроля позволяет нам легко создавать эстетически привлекательные блоки текста, особенно для коротких тиражей, таких как цитаты или субтитры.
Именно здесь мы используем сбалансированный текст в статье. Поскольку эта функция является стандартом, который предлагает Adobe, мы используем полифил, созданный Рэнди Эдмундсом, для достижения тех же результатов. Эта функция лучше всего проявляется в адаптивных случаях. Изменяя размер браузера, вы заметите, что блок продолжает балансировать текст, в результате чего появляются строки примерно одинаковой ширины. Использовать сбалансированный текстовый полифил легко, поскольку это плагин jQuery. Все, что нам нужно сделать, это применить «balanceText()» к селектору при изменении макета, и мы получим хорошо сбалансированный текст, который выглядит следующим образом:
$('.balance').balanceText();
Фильтровать переходы
Переходы — это важный способ привлечь внимание пользователя и сообщить о положении вещей на вашем сайте. Что касается непрозрачности, а в последнее время и 3D-преобразований, мы видели, как они используются для создания изящных переходов и анимации, когда пользователи прокручивают или взаимодействуют с частями вашего сайта. Теперь у нас есть фильтры, которые можно использовать для той же цели.
В «Лесном гиганте» мы используем фильтры для перехода от оттенков серого к цвету, когда некоторые изображения появляются в поле зрения. Эти фильтры можно комбинировать с непрозрачностью или другими фильтрами для создания сложных эффектов изображения и переходов. Мы можем использовать возможности пользовательских фильтров, чтобы добавить еще более впечатляющие эффекты.
Пользовательские фильтры написаны с использованием GLSL, того же языка шейдеров, что и WebGL. Они позволяют применять эти шейдеры к элементам DOM через CSS, обеспечивая сложные эффекты смешивания и трехмерные искажения. В нижней части сайта, когда вы нажмете «Изучить дерево президентов», вы увидите, как страница сворачивается, открывая под ней еще один раздел. Это всего лишь один пример того, как пользовательские фильтры могут обеспечить насыщенные переходы между контентом. Анимации можно добиться с помощью CSS-переходов. Однако, если вы хотите использовать более надежную анимацию или взаимодействие, чем позволяют переходы, вы можете передать значения в свой шейдер, установив стиль с помощью JavaScript, как показано ниже. Это может позволить вам иметь более детальный контроль над замедлением или даже позволить методам пользовательского ввода манипулировать шейдером.
function applyCurl(value) {
$("#map").css("webkitFilter",
"custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
+ " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
+ " rotateY(0deg) rotateZ(0deg), curlPosition "
+ value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}
Наш фильтр растрирует содержимое в виде текстуры на графическом процессоре для применения эффекта. По этой причине нам необходимо обязательно удалить его после завершения, иначе наш контент может выглядеть размытым.
$("#map").css("webkitFilter", "none");
Пользовательские фильтры CSS позволяют создавать интересные эффекты, такие как перенос страниц, который выглядит как перелистывание страницы в настоящей книге. Они позволяют веб-разработчику программировать сложные эффекты на языке GLSL и применять его к веб-контенту. Для получения дополнительной информации о деталях пользовательских фильтров, всех этих параметрах и о том, как их использовать, ознакомьтесь с этим замечательным руководством .
Предварительный рендеринг текстур в WebGL
Жемчужиной этой статьи стало первое полное изображение «Президента», которое считается вторым по величине деревом в мире по объему. Это изображение было создано путем фотосшивки сотен фотографий дерева для создания полной картины. Мы хотели смоделировать этот процесс, разбив изображение на несколько маленьких фотографий, которые разлетаются по местам, чтобы создать полную картину. Это было достигнуто с помощью WebGL, в частности с помощью библиотеки Three.js , которая представляет собой API-оболочку более высокого уровня вокруг WebGL.
Рендеринг большого количества текстур может быстро вызвать проблемы с производительностью каждый раз, когда новая текстура пытается отобразиться на экране, не говоря уже о дополнительных сетевых запросах. Чтобы уменьшить это, мы сделали текстуры максимально большими и сместили их для каждого тайла. Эту технику часто называют картографированием спрайтов, и она широко распространена в разработке игр. В результате получилось три большие текстуры для всего дерева. Чтобы избавиться от снижения производительности каждый раз, когда одна из текстур впервые становится видимой на экране, мы визуализируем квадраты размером 1 пиксель с каждой текстурой перед началом анимации, перемещая снижение производительности в начало. Это позволяет нам плавно пролетать и анимировать дерево по всей высоте даже на планшете.
Чтобы компенсировать текстуры, мы изменяем UV, которые сопоставляют текстуру с геометрией. В Three.js это выглядит так:
geometry.faceVertexUvs[0][0] = [
new THREE.Vector2(xOffset, yOffset + 1),
new THREE.Vector2(xOffset, yOffset),
new THREE.Vector2(xOffset + 1, yOffset),
new THREE.Vector2(xOffset + 1, yOffset + 1)
];
Здесь вы можете видеть, что мы используем переменную для смещения текстуры по осям x и y. Того же эффекта можно добиться с помощью специального шейдерного материала GLSL, который смещает нарисованные координаты геометрии.
Экспериментальные возможности
Поскольку некоторые функции, используемые в демонстрационной версии, все еще являются экспериментальными, статью необходимо просмотреть в Chrome Canary и включить все флаги, упомянутые для Chrome Canary на этом веб-сайте .
После того, как Chrome Canary установлен и правильно настроен, посмотрите демо-версию . (Обратите внимание, что весь проект имеет открытый исходный код и доступен на GitHub .)
Заключение
Мы также изучали, как эти функции можно использовать в контексте мобильных приложений, например, в электронной книге. Вы можете увидеть этот прототип в работе и то, как мы используем различные парадигмы взаимодействия и сенсорного управления для демонстрации этих функций на планшете.
Поскольку макет веб-браузера постоянно развивается, мы видим желание сохранить ценность и качество макета, к которым мы привыкли в прошлом, с устаревшим контентом для чтения. Благодаря таким функциям, как регионы CSS, исключения, сбалансированный текст, настраиваемые фильтры и WebGL, создателям контента больше не придется выбирать между охватом и качеством дизайна. «Лесной великан» — явный признак того, что сеть будущего позволит сделать и то, и другое.