Favicon generator

-

В процессе создания сайта столкнулся с тем, что необходимо было создать иконку для сайта. Казалось бы, чего проще, создал иконку в PNG, конвертнул в ICO и радуйся… Но когда я наткнулся на этот сервис я увидел, что процесс много интереснее). Мало того, что сервис поддерживает SVG (то есть потери качества практически минимальные), так он еще создает отдельные иконки для Android, iOS и Windows, иными словами полный комплект иконок для сайта. Впрочем, не только для сайта, если посмотреть возможности сервиса, то думаю, что он также подойдет для создания иконок мобильных приложений, как нативных, так и гибридных.

Кроме того, в процессе генерации иконка настраивается, ее цвет, размеры, и так далее. Интересная особенность в том, можно выбрать отдельные иконки для разных операционных систем, и все это сопровождается предпросмотром в режиме реального времени. Так что рекомендую)). С момента нахождения этот сервис в моем инструментарии

Комментарии

Отправить комментарий

Популярные сообщения из этого блога

Анимация курсора в Атоме

-
Изображение
Оказывается в Атоме это сделать совсем нетрудно, а эффект получается очень даже зачетный). Для этого достаточно в стили (меню atom->Stylesheets) добавить следующую строку: .cursor, atom-text-editor::shadow .cursor { transition: 150ms; } Можно добавить небольшой Bounce-эффект за счет использования функции cubic-bezier , тогда год будет выглядеть так: .cursor, atom-text-editor::shadow .cursor { transition: 150ms cubic-bezier(.31,.16,.12,1.24); } (UPDATED) Не так давно Atom начал выдавать уведомление об устаревшем селекторе .cursor, atom-text-editor::shadow .cursor. Для того, чтобы можно было дальше продолжить использовать анимированный курсор необходимо заменить данный селектор на .cursor, atom-text-editor.editor .cursor
Далее...

Подключение тяжелых библиотек

-
Изображение
В процессе верстки столкнулся вот с какой проблемой: необходимо подключить карту на сайт, однако, ее нужно подключить до подключения основного скрипта, поскольку процедура инициализации карт происходит именно там. Вылилось это вот в какую проблему. До полной прогрузки библиотеки с картой не подключались прописанные эвенты. Менять порядок загрузки нельзя, но немного погуглив, получилось найти достаточно простое и эффективное решение: подключать карту «на лету» непосредственно из самого скрипта, а инициализацию производить уже в коллбэке функции. В результате получилось что-то такое: //Вызов функции $('document').ready(() => { loadScript("https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js", () => { mapInit(); } }) //Функция подключения loadScript = (url, callback) => { var script = document.createElement("script") script.type = "text/javascript"; if (script.readyState){ /...
Далее...

Fontello

-
Изображение
Не могу пройти мимо такого интересного сервиса, как Fontello . В одном из своих постов я рассказывал за символьный шрифт FontAwesome , содержащий множество символов. Но тут я наткнулся на сервис Fontello. FontAwesome содержит множество символов (2 481, если быть совсем точным), но здесь вчерашнее преимущество оборачивается неприятностями. Во-первых, все эти 2 481 символов нужно загрузить. Во-вторых, может случится, что нужного символа таки не окажется в наборе FontAwesome, а окажется в другом наборе. Подключать еще один символьный шрифт? И вот тут приходит на выручку Fontello. Это генератор символьных шрифтов, который позволяет создать новый шрифт на основе нескольких символьных шрифтов (Fontelico, FontAwesome, Entypo, Typico, Iconic, Modern Pictograms, Meteoicons, MFG Labs, Maki, Zocial, Brandico, Elusive, Linecons, Web Symbols), в который Вы можете включить только те иконки, которые Вам действительно нужны. На выходе вы получаете архив со всеми стилями, файлом шрифта в неск...
Далее...