Привет! Меня зовут Артём Поликарпов. Я взял флажки Никиты Иванова и собрал их в одном спрайте для более удобного и оптимального использования на сайтах. Мне кажется, то, что получилось, может пригодиться и вам в своей работе.
Слово Никите:
Однажды мне понадобились маленькие пиктограммы всех государственных флагов на свете. Причём, в них не должно было быть игрушечной веб-два-нольной глянцевости и «весёленьких» искажённых цветов. Как ни странно, мне не удалось найти ничего подходящего — поэтому я взялся за эту работу самостоятельно.
Значок российского флага стал маленькой и чёткой копией нашего триколора. Такими же аккуратными получились флаги, например, Ямайки или Греции . А над флагами Австралии и Британии пришлось чуть-чуть попотеть.
Оригинальный архив с пиктограммами можно скачать в ЖЖ Никиты Иванова, 254 пнг-файла из архива весят всего 66 килобайт. Если вам нужны флажки в графическом редакторе, отдельные файлы — ваш выбор.
На вебе же лучше использовать спрайт, так как он ещё легче — 30КБ, и за два запроса к серверу (ЦСС + ПНГ) вы получаете все флаги разом.
Как использовать
Сохраните fg.css и fg.png из архива на своём сервере в любой удобной папке, в моём примере эти файлы якобы в одном месте с ХТМЛ.
ЦСС подключается обычным способом, а спрайт упоминается там, где нужна пиктограмма.
Эти летом я был: в Гондурасе Лихтенштейне, и Швеции.
Значок флага нужной страны получить очень просто, вставьте её код в названии класса, вот так: b-fg_RU — российский триколор, b-fg_FR — французский.
Я решил пожертвовать компактностью кода и подключил спрайт через <img/>, вместо стандартного background-image. Такой альтернативный подход гарантирует, что пиктограммы не потеряются при печати страницы, сохранении её браузером и будут видны при просмотре сайта в режиме высокой контрастности в Виндоусе.
%%countryNameRu%%
%%countryNameEn%%
%%flagCode%%
Вот все 254 флага
По-русскиНа английскомТолько коды
ISO_3166-2?
В большинстве случаев коды пиктограмм совпадают с официальными кодами стандарта ISO_3166-2, в исключениях некоторые непризнанные государства и несуверенные регионы:
Абхазия ABKHAZIA,
Сеута ES-CE,
Мелилья ES-ML,
Канарские острова IC,
Косово KOSOVO,
Нагорно-Карабахская Республика NKR,
Южная Осетия SOUTH-OSSETIA.
Cлучайная пиктограммка
При переключении класса у контейнера со спрайтом, используется лёгкая ЦСС-анимация, которую можно отключить классом b-fg_no-transition.
Массив
Кстати, в архиве кроме спрайта есть джаваскриптовый массив кодов и наименований стран для удобного перебора флагов в этом спрайте. Он может пригодится, например, если вы задумаете при автодополнении страны тут же подгружать флажок.
Здесь с помощью этого массива я показываю все флаги, по-разному сортирую их, вывожу случайную пиктограмму.
Думаю, тот, кому понадобится такой массив, разберётся без меня, как им пользоваться.
Флаги, бесплатно, скачать без СМС :-)
fg.zip ↑ Спрайт, ЦСС к нему и fg.js с массивом стран и их кодов.
Заглянуть внутрь исходников, .psd и .sass, можно на Гитхабе.
Набор распостраняется на условиях лицензии CC-BY-SA, то есть, вы можете делать с ним практически всё, что угодно: свободно использовать и модернизировать.
