Полезные сервисы для вебмастера
У любого вебмастера есть свой набор полезных сервисов, которые облегчают работу и помогают в веб разработке. Сегодня я поделюсь с вами своей коллекцией этих замечательных помощников.
Иконки
Шрифтовые иконки
https://fontawesome.comФреймворком Font Awesome очень удобно пользоваться, не нужно ничего скачивать, подключаете CSS файл, выбираете иконку и вставляете код иконки в нужном месте в HTML-документе. Посмотрите этот урок.
Самый лучший сервис по иконкам
https://www.flaticon.comТаблица Unicode
https://unicode-table.com/ruВставляем символы вместо простых иконок, если они есть в таблице. На эту тему есть хорошая статья.
Генераторы
Генератор фона из геометрических фигур
https://trianglify.ioГенератор треугольников
http://apps.eky.hk/css-triangle-generatorНа сайтах, маленькие треугольники, любят использовать в качестве стрелок навигации, с данным сервисом можно обойтись без картинки.
Генератор фона
http://bg.siteorigin.com/Background Image Generator позволяет сгенерировать маленькие безшовные текстуры, которые размножаясь, создают на сайте фон.
Генератор префиксов
https://autoprefixer.github.io/ruСервис выдает на выходе готовый код с вендорными префиксами для лучшей кроссбраузерности, используя базу данных Can I Use. Как им пользоваться? Вставляете ваш готовый CSS код в левый бокс, справа вы получаете кроссбраузерный код с автоматически расставленными префиксами. Очень полезный сервис для вебмастеров и верстальщиков.
Быстрое подключение шрифтов
https://transfonter.orgСервис конвертирует загруженную папку со скачанным шрифтом в нужные форматы (WOFF, WOFF2) и готовый к подключению в проект CSS файл через @font-face правило.
Генераторы CSS кода
https://webcode.tools/css-generatorhttps://css3generator.com
Изображения / Графика
Онлайн конвертер изображений конвертирует изображения в разные форматы, в том числе в формат ico, что полезно для создания иконки - favicon.
https://image.online-convert.com/ruКачественные картинки
На этих ресурсах можно бесплатно скачивать фотографии и использовать их на своих коммерческих проектах.
https://unsplash.comhttps://pixabay.com
https://www.pexels.com
https://placeholder.com
Картинки с прозрачным фоном
http://pngimg.comУбирает фон у фотографий
https://www.remove.bgСжатие картинки без потери качества
https://tinyjpg.comСоздание крутых картинок своими руками
https://crello.comСправочники
HTML справочник
https://htmlreference.ioCSS справочник
https://cssreference.ioКомпактные справочники для начинающих вебмастеров, очень легко и быстро можно найти интересующий вас тег или свойство.
Hover эффекты
http://ianlunn.github.io/HoverБиблиотека готовых классов (hover.css) с различными эффектами для наведения. Просто выбираете нужный эффект и прописываете название его класса в теге какого-либо элемента на вашем сайте, обычно это кнопки.
http://imagehover.ioАналогичная библиотека CSS эффектов, но применяется к одиночным картинкам и галереям. Подробности описаны в этой статье.
Для дизайнера
Сетка Bootstrap
https://960.gs960 Grid system – это сетка Bootstrap для Photoshop, скачиваете архив, открываете 12-колоночный PSD файл в программе Photoshop и рисуете ваш макет, выравнивая элементы дизайна по сетке.
Material Palette
https://www.materialpalette.comColor Palettes
https://colorpalettes.netГотовые цветовые палитры, помогают дизайнерам и веб-разработчикам, красиво сочетать цвета с подходящими акцентами на сайте, невольно оберегая глаза пользователей, от цветовой безвкусицы.
Градиенты для сайта
https://uigradients.comВыбираете подходящей цветовой гаммы градиент и получаете готовый CSS код, полезный сервис для фонов и кнопок.
Бесплатные исходники
http://freebbble.comСтилизация Google карты
https://mapstyle.withgoogle.comАнимации
http://animista.nethttps://daneden.github.io/animate.css
http://bouncejs.com
Коллекции готовых CSS анимаций, сделают ваш сайт интерактивным. Смотрите пример.
Библиотека для полноэкранной прокрутки
https://alvarotrigo.com/fullPage/ruРазные сервисы
Оптимизация сайта
https://developers.google.com/speed/pagespeed/insightsСервис Google Page Speed Insights позволяет вам протестировать сайт на адаптивность и подскажет, какие файлы надо оптимизировать, для повышения скорости загрузки сайта.
Менеджер задач
https://trello.comЗаказчик через данные сервис может наблюдать, как продвигается работа по его проекту.
Все эти сервисы помогают ускорить веб-разработку и убирают рутинную работу.
-
Создано 13.05.2019 10:18:50
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.