Skip to content

CSS3, веб-шрифты и иконки

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

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

Тем не менее, современность диктует нам новые условия. Мы стали разрабатывать для бо́льшего числа пользователей, устройств, браузеров и технологий, чем когда-либо прежде. Сегодня что только не подключено к интернету: от смартфона до холодильника. Раньше был только один способ доступа к сети: через обычный настольный компьютер. И самым распространенным разрешением экрана в то время были 640x480px или 800x600px!

Сегодня существуют тысячи различных устройств, размеров экранов и контекстов о которых нам стоит задуматься во время разработки. У нас есть тысячи мобильных устройств (мобильные телефоны, смартфоны, планшеты, нетбуки и т.д.), экраны Retina, стандартные экраны, экраны высокой четкости, большие и малые экраны, и так далее.

Не хочу запугивать кого-либо, но количество вещей, о которых мы должны заботиться при разработке, собирается только увеличиваться. Так что мы должны адаптироваться и учиться.

Наш процесс должен адаптироваться

И что это означает для нашего процесса? Проверить свой сайт на каждом устройстве, с которого можно его просмотреть? Нет, это невозможно. Вместо этого, мы должны эффективно изменить наш процесс к лучшему. Я уверен, что как разработчику вам не раз приходилось это делать, тоже самое если вы являетесь дизайнером.

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

CSS3

Может показаться, что CSS3 появился совсем недавно, адаптация популярных техник CSS3 активно использовалась за последнюю пару лет, тем не менее ранние черновики спецификаций CSS3 датируются началом 1999; четырнадцать лет назад!

В отличие от предыдущих спецификаций CSS (например, CSS2), CSS3 был разделен на несколько модулей. И в середине 2012 года насчитывалось более пятидесяти опубликованных модулей. Четыре из них, которые прошли огромное число тестов и обзоров, были рекомендованы W3C, это:

  • Media Queries (медиа запросы)
  • Namespaces (пространства имён)
  • Selectors (селекторы уровень 3)
  • Colour (цвет)

Другие модули, такие как «Background and Borders», «Multi-Column Layout», «Flexible Box Layout» в настоящее время находятся на уровне “Candidate Recommendation” (кандидаты к рекомендации), где W3C доволен существенной частью особенностей этого модуля. На этом уровне должны убрать префиксы браузеров, которые они обладают на текущий момент.

Такие модули, как “CSS Animations”, “CSS Transforms” и “CSS Filter Effects” на стадии рабочего черновика (“Working Draft”), как и многие, многие другие модули! И, следовательно, не настолько готовы, по-сравнению с модулями в статусе CR.

Однако, наряду с четырьмя основными, рекомендованными W3C модулями, есть много популярных методов CSS3, которые мы часто видим в дизайне наших веб-сайтов сегодня. К ним относятся:

  • CSS Градиенты — CSS Gradients
  • Скругленные границы — Border-radius
  • Тени  — Box-shadow и Text-shadow
  • Множественные фоны — Multiple Backgrounds
  • Прозрачность — Opacity (rgba)
  • Анимации и Трансформации — Animations & Transforms

Давайте рассмотрим их по-подробнее!

CSS Градиенты

Появление CSS градиентов означает что мы можем вместо фонового изображения придать соответствующий внешний вид нашему веб-сайту с помощью CSS3, если речь идёт о современных браузерах.

css3-gradients

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

Border Radius

Как и с CSS градиентами, border radius позволяет добавить скругленные уголки для элемента, не прибегая к использованию фонового изображения. Сложно представить, что раньше использовали фоновое изображение для достижения эффекта закругленных углов, градиентов и теней. Хорошо, что этот кошмар в прошлом, в то время как теперь легче реализовать этот эффект для браузеров, которые их поддерживают.

css3-border-radius

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

Тени (Box-shadow)

С введением в CSS3 свойства box-shadow, теперь мы можем добавить тени для наших элементов. Также есть вариант тени для текста, так что мы можем использовать их для нашего контента (text-shadow, если вы не догадались).

css3-box-shadow

Помимо этого, у нас также есть выбор между внутренней и стандартной тенью. А это означает, что мы можем — да, вы угадали — отказаться от использования изображений и для этих стилей.

Множественные фоны — Multiple Backgrounds

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

Прозрачность (rgba)

Наконец-то, от IE9 и старше и во всех других современных браузерах, нам больше не придется создавать небольшое, повторяемое, прозрачное фоновое изображение!

css3-opacity

Этого самого по себе было достаточно, чтобы заставить меня полюбить CSS3. Это означает, что мы можем свободно использовать прозрачность в нашем дизайне, где чувствуем в этом необходимость.

Анимации и Трансформации

Анимации и трансформации великолепны! Наряду с переходами (transition), они помогают нам добавить гораздо больше интерактивности в наш интерфейс. Хотя их довольно трудно выразить в PSD-макете. Но данные свойства действительно являются преимуществом CSS3, которые позволят оживить страницы.

Веб шрифты (@font-face)

Включение @font-face правила в CSS3 — бальзам на сердце дизайнера. Теперь мы можем экспериментировать со шрифтами, что мы используем в наших дизайн-проектах. В сущности, веб-шрифты дали дизайнерам больше свободы для выражения творчества в рамках своей работы.

Почему веб шрифты — это здорово

Веб-шрифты предлагают нам новый способ создания визуально ошеломляющих веб-сайтов. Существует такое большое разнообразие выбора шрифтов, которые теперь мы можем использовать на наших веб-сайтах. Не все из них великолепны, но можно найти очень много, если можно так выразиться, драгоценных камней, чтобы использовать в своих проектах. Они будут выглядеть гораздо интереснее, чем обычные, старые безопасные (web safe fonts) веб шрифты.

webfonts-coastalconservationleague

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

Как использовать веб шрифты

С введением веб шрифтов и @font-face, появились сервисы, которые помогают использовать веб шрифты на сайтах. Наиболее популярные из них:

  • Typekit
  • H&FJ cloud.typography
  • Fontdeck
  • Fonts.com
  • Google Fonts

И хотя таких сервисов не так много, есть много способов реализации веб шрифтов в веб-дизайне. Некоторые способы используют JavaScript, некоторые используют чистый CSS для загрузки шрифтов.

Но как насчет дизайнерского процесса: как можно работать с веб шрифтами в статических макетах? Здесь не так много способов интеграции веб шрифтов в графические редакторы. Typekit объявила о своих планах интеграции с Adobe Creative Cloud. Благодаря тому, что Typekit был приобретен Adobe, теперь есть этот способ использовать веб шрифты в Photoshop, Illustrator и других продуктах Adobe. И это хорошая новость для дизайнеров.

webfonts-edenspiekermann

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

Иконки

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

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

PNG

Прекрасный PNG (в котором можно использовать прозрачный фон) — верный способ работать с иконками в вашем дизайне.

icons-symbolicons

Работа с PNG обычно не меняет что-либо в рабочем процессе. Вы можете просто сохранить любые изображения, что вы создали в графическом редакторе, в требуемом размере.

PNG файлы также хорошо ведут себя при уменьшении размеров. Но не при масштабировании, которое может потребоваться для больших размеров экрана… В таком случае PNG часто выглядят пикселизированно (зашакалено :-D) и размыто. Такая же проблема с Retina-дисплеями и дисплеями с высокой плотностью пикселей, и чтобы сохранить красоту иконки вам нужно будет использовать специальный CSS или JavaScript.

SVG

Последний пункт из PNG приводит нас к варианту использования SVG в иконках. Если у вас есть векторное изображение (созданное в Adobe Illustrator, к примеру), не растровое, в случае с Adobe Photoshop — тогда вы можете сохранить данное изображение в формате SVG.

icons-sachagrief

Если вы еще не знаете о SVG и не использовали его в своих проектах, тогда введу вас кратко в курс дела. В отличии от растровой графики(JPG, PNG), которая состоит только из точек, векторная графика(SVG) состоит из элементарных геометрических объектов: точек, линий, сплайнов и многоугольников. Таким образом вы можете масштабировать графику без потери качества.

SVG отлично подходит для логотипов, иконок, да и всего, что может требовать масштабирования. При проектировании и сохранении ваших SVG изображений, я всегда рекомендую вам работать в оптимальном размере, иначе браузер должен будет сделать некоторую дополнительную работу, чтобы менять размер и масштаб в конкретных обстоятельствах.

Веб-шрифты

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

webfonts-symbolset

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

Итак, у вас есть три варианта, чтобы использовать иконки в своих проектах: теперь выбор за вами! Некоторые техники немного изменят рабочий процесс, но от вас зависит, какой способ лучше впишется в ваш рабочий процесс.

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Тренды веб-дизайна и все о них

Видео в веб-дизайне