Пиктограммы государственных флагов в спрайте

:-)

Привет! Меня зовут Артём Поликарпов. Я взял флажки Никиты Иванова и собрал их в одном спрайте для более удобного и оптимального использования на сайтах. Мне кажется, то, что получилось, может пригодиться и вам в своей работе.

Слово Никите:

;-)

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

Значок российского флага стал маленькой и чёткой копией нашего триколора. Такими же аккуратными получились флаги, например, Ямайки или Греции . А над флагами Австралии и Британии пришлось чуть-чуть попотеть.

Оригинальный архив с пиктограммами можно скачать в ЖЖ Никиты Иванова, 254 пнг-файла из архива весят всего 66 килобайт. Если вам нужны флажки в графическом редакторе, отдельные файлы — ваш выбор.

На вебе же лучше использовать спрайт, так как он ещё легче — 30 КБ, и за два запроса к серверу (ЦССПНГ) вы получаете все флаги разом.

Как использовать

Сохраните fg.css и fg.png из архива на своём сервере в любой удобной папке, в моём примере эти файлы якобы в одном месте с ХТМЛ.

ЦСС подключается обычным способом, а спрайт упоминается там, где нужна пиктограмма.

Эти летом я был: в Гондурасе
Лихтенштейне,
и Швеции.

Значок флага нужной страны получить очень просто, вставьте её код в названии класса, вот так: b-fg_RU — российский триколор, b-fg_FR — французский.

Я решил пожертвовать компактностью кода и подключил спрайт через <img/>, вместо стандартного background-image. Такой альтернативный подход гарантирует, что пиктограммы не потеряются при печати страницы, сохранении её браузером и будут видны при просмотре сайта в режиме высокой контрастности в Виндоусе.

Вот все 254 флага

По-русски На английском Только коды

ISO_3166-2?

В большинстве случаев коды пиктограмм совпадают с официальными кодами стандарта ISO_3166-2, в исключениях некоторые непризнанные государства и несуверенные регионы:

Cлучайная пиктограммка

При переключении класса у контейнера со спрайтом, используется лёгкая ЦСС-анимация, которую можно отключить классом b-fg_no-transition.

Массив

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

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

Думаю, тот, кому понадобится такой массив, разберётся без меня, как им пользоваться.

Флаги, бесплатно, скачать без СМС :-)

fg.zip
 ↑ Спрайт, ЦСС к нему и fg.js с массивом стран и их кодов.

Заглянуть внутрь исходников, .psd и .sass, можно на Гитхабе.

Набор распостраняется на условиях лицензии CC-BY-SA, то есть, вы можете делать с ним практически всё, что угодно: свободно использовать и модернизировать.