От автора: со временем веб-дизайн становится все более инновационным. Вместо того, чтобы просто отображать информацию, веб-сайты представляют собой произведения искусства со сложной анимацией, уникальными макетами и микро-взаимодействиями. Многие из этих вещей возможны через CSS.
CSS придает стиль обычным, скучным веб-страницам и дает шанс создавать красивые взаимодействия. Текущий год открывает множество новых возможностей веб-дизайна, и именно эти 7 трендов CSS 2019 будут определять год.
CSS Grid
Преобладающим стандартом для макетов на основе сетки был Flexbox. На самом деле, в конце 2018 года почти 83% загружаемых в Chrome страниц использовали Flexbox. Но на ринг вышел новый соперник.
Этот новый претендент — Grid. Все еще молодой и использующийся только на приблизительно 2,25% загружаемых страниц, он все равно стремительно набирает популярность, в начале 2018 года он использовался только на 0,25% загружаемых страницы.
Провозглашается, что Grid лучше, чем Flexbox. Flexbox дает вам контроль над вертикальным или горизонтальным выравниванием, но не обоими одновременно. Grid дает именно это.
Эксперты CSS объясняют отсутствие популярности тем, что большинство крупных веб-сайтов не используют его. В конце концов, эти данные основаны на просмотрах страниц, а не на количестве страниц, использующих Grid. Лишь совсем недавно крупные сайты приняли Flexbox, поэтому имеет смысл то, что они пока не хотят его менять.
Однако в 2019 году популярность Grid определенно возрастет, поскольку он открывает определенную степень творческой свободы, которую не предлагают другие варианты.
Режим написания CSS
Не все языки пишутся и читаются слева направо. Для языков, которые пишутся в других направлениях, вы можете использовать свойство CSS writing-mode.
Передайте текст сверху вниз или справа налево и настройте горизонтальные и вертикальные значения. Вы можете даже отображать текст вертикально, поворачивать текст для определенных дизайнов и смешивать сценарии.
Мобильные анимации
Анимации, как инструмент вовлечения, становятся все более популярными. Веб-сайты будут использовать все больше и больше анимированных иконок загрузки, страниц загрузки с ограниченным дизайном и т. д., чтобы удерживать внимание пользователя.
Примером этого является популярный сайт YouTube. Откройте мобильное приложение YouTube и прокрутите видео. Если вы остановитесь на секунду, видео будет воспроизводиться автоматически с отключенным звуком и отображаемым заголовком.
Анимации также используются в качестве индикаторов для действия или задач. Анимированные кнопки и списки тоже становятся обычным явлением.
Популярные фреймворки (Bulma, Tailwind, Bootstrap 4 и т. д.)
Фреймворки CSS существуют уже давно, но в последние годы их популярность только растет. Awwwards определяет фреймворк как: «Фреймворк — это стандартизированный набор концепций, практик и критериев для решения общих проблем, которые могут использоваться в качестве справочного материала, чтобы помочь нам решить новые проблемы аналогичного характера».
По мере того как мы переходим к более мобильному вебу, фреймворки корректируются, чтобы соответствовать этому. Стиль и дизайн меняются, анимация и действия становятся все более распространенными, а упор на простоту и удобство работы с конечными пользователями важнее, чем когда-либо!
В 2019 году многие фреймворки стали лидерами отрасли и помогли разработчикам и дизайнерам работать быстрее, чем когда-либо. Вот некоторые из наиболее популярных фреймворков, используемых в Интернете в 2019 году:
Foundation — гибкая, ориентированная на мобильные устройства среда, используемая в качестве корпоративного решения;
Bootstrap 4 — Bootstrap — один из крупнейших в мире CSS-фреймворков, версия 4 поставляется с новыми функциями для цветовых схем и служебных классов;
Materialize — популярный фреймворк, ориентированный на material design стили;
Отдельные страницы, экспериментальная навигация
Поскольку собственный веб-сайт становится почти синонимом личного профиля в социальных сетях, все больше пользователей обращаются к более простым решениям и вариантам с одной страницей для перенаправления трафика в другие места.
Общие примеры:
Linktree — простая страница со ссылками на социальные сети, продукты и т. д .;
Carrd — простые, бесплатные, полностью адаптивные одностраничные сайты для чего угодно;
About.me — более профессионально ориентированный сайт-портфолио, похожий на LinkedIn, но допускающий творчество;
Instapage — популярный конструктор целевых страниц для бизнеса и стартапов;
Подобные одностраничные веб-сайты получают дальнейшее развитие благодаря креативному использованию CSS и стилей для повышения удобства работы. Next Web выделил «большие и экспериментальные системы навигации» как одну из «10 захватывающих тенденций веб-дизайна, которых вы не сможете избежать в 2019 году». Так почему же люди переходят на эти интересные макеты?
Из-за действий. Благодаря целенаправленным большим кнопкам и навигации пользователи сразу попадают в нужное место. Будь то магазин, информационная страница с часами работы / информацией или просто новое видео / песня.
Все больше и больше веб-сайтов выбирают подобные решения, которые направляют трафик, а затем распределяют его. Музыканты используют Linktree и другие сервисы, чтобы делиться своими новыми песнями на всех потоковых платформах и параллельно получать доход от партнерской программы.
Переменные шрифты
Кэрри Казинс (Carrie Cousins) в «ТОП-17 трендов в веб-дизайне и UI 2019 года» определяет переменные шрифты как «набор мастер-стилей, с одним центральным «мастером» по умолчанию (обычно стиль стандартного шрифта) и несколькими зарегистрированными«осями» которые связывают центрального мастера с другими. Например, ось «Толщина» может связать мастер стиль Light со стилем по умолчанию и мастер стилем Bold. Отдельные стили, которые могут быть расположены вдоль этой оси, называются «экземплярами».
Это означает, что шрифты становятся более гибкими на всех устройствах и платформах. Вы можете легче масштабировать толщину, размер и другие аспекты шрифта, не переходя от одной ширины шрифта к другой или полностью не переключая шрифты.
Посмотрите пример переменной гарнитуры «Amstelvar» на GitHub. Также ознакомьтесь с полным анализом переменных шрифтов и узнайте от Google, как они изменят Веб.
Привязка прокрутки
Наконец, что не менее важно, привязка прокрутки является относительно новой техникой, используемой для привязки пользователей к определенным точкам прокрутки. Вместо плавного движения вниз по странице или слева направо можно прокручивать страницу с определенным шагом. Популярное использование этого — перелистывание товаров на странице, прокрутка / чтение книги и перемещение по странице с выделенными блоками информации.
На CSS Tricks есть отличное руководство по практической реализации CSS привязки прокрутки.
Оно содержит информацию о поддержке браузерами, рекомендациях и свойствах, которые вы должны использовать для обеспечения правильной привязки прокрутки. Хотите узнать, как работает привязка прокрутки? Посмотрите эти примеры на Webkit.
Настоящее и будущее CSS
Это 7 основных трендов CSS в 2019 году. Какой ваш любимый?
Автор: Mike Moloney
Источник: https://1stwebdesigner.com
Редакция: Команда webformyself.