Вредоносное ПО (malware) - это назойливые или опасные программы,...
Влад Мержевич
Кодировка UTF-8 позволяет не только одновременно вставлять текст на нескольких языках, но и добавлять разные символы, которые с успехом могут применяться как элементы дизайна, а также вместо некоторых изображений. Вот какие плюсы это сулит:
- меньше пересылаемый объём данных по сравнению с изображениями;
- к текстовому символу можно легко применить любое стилевое оформление;
- опять же легко изменить стиль символа при наведении на него курсора мыши;
- допустимо увеличивать размер без потери качества.
К минусам можно отнести малый набор символов для оформления, они могут чуть отличаться по своему виду в разных операционных системах, их нельзя отредактировать и они одноцветные.
Вставка символов
Поскольку мы имеем дело с UTF-8, то копирование и вставка символа в код весьма упрощается. Достаточно найти программу, которая отображает нужные символы, скопировать понравившийся и напрямую вставить его в текстовый редактор. В Windows можно использовать программу «Таблица символов», окно которой показано на рис. 1.
Рис. 1. Таблица символов
Вид символов сильно зависит от выбранного шрифта, поэтому ставьте тот, который будете использовать в дальнейшем на странице. На рис. 1, в частности, показан шрифт Arial.
В редакторе Libre Office, как и в Open Office вставка символа делается через меню Вставка > Специальные символы (рис. 2).
Рис. 2. Специальные символы в Libre Office
В окне следует выбрать символ и нажать кнопку ОК, тогда символ вставится в редактируемый текст, откуда его можно будет скопировать и вставить уже в HTML-код.
Также существуют специальные сайты, предоставляющие набор символов. Мне понравился сайт www.utf8icons.com (рис. 3), ничего лишнего, символы сгруппированы по темам, каждый символ показан в трёх размерах и приводится вид для разных шрифтов (рис. 4).
Рис. 3. Главная страница utf8icons.com
Рис. 4. Описание выбранного символа
Чтобы заполучить себе символ, нажимаем кнопку «Copy», либо просто выделяем его и копируем через Ctrl +C . Иконки Для начала сделаем верхнее меню, содержащее иконки и подписи к нему, а затем поэкспериментируем с его дизайном (пример 1). В самом меню ничего необычного нет, за исключением того, что вместо картинок вставлены символы.
Пример 1. Верхнее меню
Результат данного примера показан на рис. 5.
Рис. 5. Меню с иконками
Дизайн иконок
Что можно сделать для дизайна самих иконок и при наведении на них курсора мыши? Да то же самое, что и с рядовым текстом - менять цвет текста, фона, параметры шрифта, в общем, всё что позволяют стили. Так, для изменения цвета фона под пунктом меню и, соответственно, иконкой, достаточно к стилю ссылки добавить background , и для контрастности ещё и color (пример 2).
Пример 2. Стиль для смены цвета фона и текста
Menu a:hover { background: #ffe71a; color: #000; }
Также можно сделать дизайн в олдскульной манере, добавив свечение вокруг иконок при наведении. Это делается с помощью свойства text-shadow , как показано в примере 3.
Пример 3. Свечение вокруг текста
Menu a:hover .icon { text-shadow: 0 0 15px #ff7900, 0 0 15px #ff7900, 0 0 15px #ff7900; }
Чтобы свечение было более заметным, мне пришлось три раза повторить параметры тени.
Ну, и не забываем про модную нынче анимацию и заставляем наши иконки весело вращаться и плавно менять цвет (пример 4).
Пример 4. Анимация при наведении
Icon { transition: 1s; } .menu a:hover .icon { color: #ffe71a; -webkit-transform: rotate(360deg); transform: rotate(360deg); }
В общем, поведение и дизайн таких иконок зависит практически только от вашей фантазии.
Сейчас многие современные сайты имеют в своей вёрстке CSS иконки. Они подгружаются с внешних ресурсов или из локальной папки, если специальные шрифты предварительно скачены.
Есть много популярных сборников иконок, например: FontAwesome , Genericons , Material и другие. Я задался целью понять, что же лучше для сайта, загружать подобные иконки с помощью CSS или всё-таки воспользоваться старым и добрым методом — изображениями.
Преимущество CSS иконок в том, что во-первых их очень много на любой вкус, во-вторых они масштабируются без потери качества и в-третьих их легко вывести.
Из минусов CSS иконок. На различных устройствах они могут отображаться по-разному. Более существенный минус: дополнительно тянется несколько других файлов (шрифтов, css).
Для того чтобы определиться, что лучше, я сначала я вывел иконку с помощью CSS, а затем нашел такое же изображение и вывел его рядом. В результате получил абсолютно одинаковые иконки, скриншот которых можно увидеть ниже:
Первая иконка подключается следующей командой через файл functions.php в теме WordPress:
add_action ("wp_enqueue_scripts" , "enqueue_load_fa" ) ; function enqueue_load_fa () { wp_enqueue_style ("load-fa" , "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" ) ; |
Entry - meta . category : before { content : "\f115" ; font : normal 14px / 1 FontAwesome ; padding : 0 3px 0 ; |
Вторая иконка на изображении это обычное jpg изображение, у которого были следующие стили:
Img _ folder{ height : 16px ; opacity : . 6 ; vertical - align : text - top ; width : 16px ; |
В итоге они заимели одинаковые цвета и приняли равное вертикальное расположение относительно текста.
В своём выборе я остановился на изображениях.
Для изображения в стилях CSS иконку сделал в 16 пикселей. Однако она сама имеет размер в 96 пикселей. На всякий случай. Вдруг плотность пикселей какого-нибудь монитора увеличиться в 6 раз. Не хочу чтобы картинки на сайте имели неподобающий вид.
И что мы получаем в результате вывода изображения, которое в 6 раз больше необходимого? Всего 3 кб и те загружаются только на определенной странице, где выведено это изображение. В то же самое время, чтобы вывести иконку с помощью CSS придется загрузить порядка 100 кб и больше. Вроде это и не много, но сейчас каждый сайт имеет столько скриптов, что лишние 100 кб, тоже значительный вес.
На мой взгляд имеет смысл грузить CSS иконки, если они предварительно скачены к себе на сайт и на сайте их выводится очень много. В противном случае, на мой взгляд изображения предпочтительны.
Адаптивный дизайн - популярная тема. Экраны давно вышли за пределы стандартных разрешений, и сайты могут смотреть и на девайсах размером с ладонь, и на больших мониторах. Сайт должен одинаково хорошо выглядеть вне зависимости от размера устройства и плотности пикселей. Для адаптации дизайна и контента существует много разных методик и технологий. Векторная графика, SVG, по-моему, одна из самых интересных тем в этом направлении.
SVG-графику удобно использовать для иконок, при этом они не будут выглядеть мыльными на устройствах с ретиной и их можно растягивать без потери качества.
Вот, например, один SVG-спрайт в 4-х разных размерах, исходный - 32px:
SVG отлично справляется с этой задачей и хорошо подойдет для использования в адаптивных раскладках.
Иконки для дизайна можно взять из готовых наборов или нарисовать свои.
Наборы готовых иконок
iconmelon.com
Большая коллекция иконок на разные темы. Загруженные иконки предлагается вставлять в HTML с помощью use .
icomoon.io
Удобнейший инструмент. Можно не только выбрать и скачать готовые иконки, но также можно загрузить свои и получить их в виде шрифта и/или спрайта. Вместе со спрайтом предлагается загрузить его PNG-версию.
flaticon.com
Большая коллекция, иконки удобно поделены на категории . Выбранные иконки можно скачать в отдельных форматах (шрифт, SVG, PNG) или во всех сразу.
Рисуем сами
Для создания своего набора иконок потребуется векторный редактор:
- Adobe Illustrator - по-моему, лучший. 599 руб./месяц в составе подписки на Creative Cloud;
- Inkscape - бесплатный и не очень удобный;
- Sketch - для Mac OS, $79.99. Имеет некоторые проблемы с векторизацией обводок, но вообще довольно удобный.
Снижение веса
Готовый SVG-файл обычно содержит много лишнего, но при этом хорошо поддается оптимизации. Из кода удаляются ненужные атрибуты, пробелы и переносы, а в числах уменьшается количество знаков после точки. Вес файла уменьшается на 30-50%. Инструменты для оптимизации:
grunt-svgmin - задача для Grunt с использованием svgo . При этом файлы сами будут браться из папки с исходниками, оптимизироваться и складываться в папку с результатами. Очень удобно.
Спрайт или иконочный шрифт?
Шрифт - удобная альтернатива спрайту. Не надо заморачиваться сеткой и расположением иконок, удобно добавлять новые символы, хотя для этого требуются дополнительные инструменты.
С помощью шрифта можно делать не только однотонные иконки, но и разноцветные .
Свой шрифт можно сделать, например, на сайте icomoon.io/app/ . Примерная последовательность действий:
- Выберите иконки из набора и/или загрузите свои.
- Кликните внизу кнопку Font.
- На этом шаге можно переназначить символы для иконок или сразу загрузить получившийся шрифт.
Вместе со шрифтом в четырех форматах (.woff, .svg, .ttf, .eot) загружается CSS и демо-файл.
Встраиваемые шрифты работают даже в 8-м IE, но при этом имеют неожиданные проблемы с поддержкой в некоторых современных браузерах. Opera Mini вообще не поддерживает кастомные шрифты, Firefox’у требуются заклинания для сервера, где лежит шрифт (решается с помощью base64), Chrome может выгрузить шрифт, если вы надолго оставили вкладку открытой:
также в Chrome на Windows7 страница со встраиваемыми шрифтами может зависать при открытии , а в некоторых других браузерах вместо иконок может оказаться всё что угодно:
Картинка из статьи Криса Коэра Icon System with SVG Sprites . Я на этом же месте как-то видела иероглифы, но сейчас там SVG, так что скрин сделать не получится. CSS-tricks , кстати, очень активно использует SVG в своем новом дизайне, а разработчики Codepen в новом дизайне редактора отказались от использования иконочных шрифтов в пользу SVG.
Несмотря на удобство использования, проблемы поддержки шрифтов в данный момент заставляют сделать выбор в пользу иконок на SVG.
Хочется надеятся, чтоб в будущем встраиваемые шрифты будут лучше поддерживаться.
Как существуют способы вставки SVG на страницу?
Спрайт
.icon { background-image: url(your.svg); }Плюсы:
- короткий читабельный код;
- картинка кешируется;
Минусы:
- запрос к серверу;
- в старых Операх фоновый SVG поддерживается странно: могут возникать проблемы при добавлении рамки элементу с SVG-фоном, а в Opera Mini работают только фоны без viewBox;
- иконки в спрайте недоступны для стилей страницы;
- большие спрайты могут вызывать проблемы с производительностью.
Base64 в data URI
.icon { background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL...); }Плюсы:
- нет запроса к серверу.
- хорошая поддержка браузерами: все, кроме Оперы на Presto и старых IE.
Минусы:
- картинка не кешируется и каждый раз рендерится заново;
- длинная строка в CSS;
- не читабельно: по коду непонятно что он содержит;
- закодированная картинка может весить больше исходной;
- для закодирования/раскодирования нужны дополнительные инструменты;
- иконки недоступны для стилей страницы.
