Список бесплатных онлайн-инструментов для веб-разработки фронт-энда (2020)
Список бесплатных онлайн-инструментов и ресурсов в форме веб-приложений или веб-сервисов для фронтальной разработки. Каждый инструмент содержит краткое описание и предварительный просмотр в виде скриншота веб -страницы.
- Типография
- Цвета, палитры и узоры
- Цветные генераторы
- Редакторы шаблонов
- Градиентные генераторы
- Цветовые палитры
- Цветные захваты
- Изображения, иллюстрации, видео
- Преобразователи и редакторы изображений
- CSS
- Генераторы градиентов CSS
- CSS Animation Editors
- CSS Треугольные генераторы
- Svg
- Регулярно
- Другие
Типография
- loremipsum.io - простой и лучший способ получить текстовый контент Lorem ipsum
- Gridlover.net/try - установить типографскую систему с модульным масштабом и вертикальным ритмом
- Pearsonified.com/typography - Калькулятор типографии золотого соотношения
- pxtoem.com - px в EM Conversion
- canva.com/font -combinations - поиск комбинации шрифтов
- Fontpair.co - Сборку Google Fonts Pairings
- transfonter.org - онлайн -конвертер шрифта
Сборники шрифтов
- fontstruct.com/gallery - Сбор шрифтов (требует регистрации)
- fonts.google.com - Google Fonts
- fonts2u.com - Коллекция бесплатных шрифтов
- github.com/lvwzhen/iconpark - Коллекция шрифтов иконы
Цвета, палитры и узоры
- color -hex.com - дает информацию о цветах
- Colorhunt.co - Коллекция цветовых палитр
- Colourlovers.com - Коллекция палитров, узоров, форм и цветов
- colrd.com - Коллекция палитров, узоров, градиентов и цветов
- heropatterns.com - Сборку повторяемых фоновых моделей SVG
- toptal.com/designers/subtlepatterns - Сбор шаблонов
- PatternCooler.com - Сбор фонов с узором
Цветные генераторы
- color.hailpixel.com - Генератор плоских цветов
- colourco.de - генератор цвета
- paletton.com - дизайнер цветовой схемы
- Galactic.ink/sphere - генератор цветового спектра
- colorsupplyyy.com/app - генерировать различные цветовые смеси
Редакторы шаблонов
- PatternInja.com - Редактор узоров
- halftonepro.com/app - редактор шаблонов
- Qrohlf.com/trianglify -Generator - Генератор шаблонов треугольника
- kennethcachia.com/plain-pattern - редактор рисунков SVG
Градиентные генераторы
- Uigradients.com - Сбор градиентов
- colinkeany.com/blend - Генератор фонового градиента
Цветовые палитры
- flatuicolors.com - коллекция цветовых палитров
- colordrop.io - коллекция цветовых палитров
- color.adobe.com/explore - Коллекция цветовых палитров
- Flatuicolorpicker.com/category/all - Коллекция плоских цветов
Цветные захваты
- lokeshdhakar.com/projects/color-theief - захватить цветовую палитру с изображения
- www.colorhunter.com - захватить цвета с изображений
- Image -color.com - еще один цвет, захватывающий из изображений
- webcolourdata.com - захватить цвета с сайтов
Изображения, иллюстрации, видео
- Pixabay.com - Сборные бесплатные изображения
- pexels.com - Коллекция бесплатных изображений
- Unsplash.com - Коллекция бесплатных изображений
- free-images.com - Сборные бесплатные изображения
- Gratisography.com - Сборные бесплатные изображения
- freephotos.cc - Сбор бесплатных изображений
- Kisspng.com - Коллекция прозрачных изображений PNG
- Vecteezy.com - Коллекция бесплатного векторного искусства
- undraw.co/illustrations - сбор иллюстраций бесплатно
- iconfinder.com - поиск значков
- coverr.co - бесплатное видео на обложке
- mazwai.com - Бесплатные кинематографические видео по лицензии CC по 3.0
Преобразователи и редакторы изображений
- jpeg.io - преобразует любой крупный формат изображения в высоко оптимизированный JPEG
- tinypng.com - еще один инструмент сжатия, который позволяет сжимать изображения .png и .jpg (позволяет изображения до 5 МБ) размером) размером) размером)
- websiteplanet.com/webtools/imagecompressor - .png или .jpg сжатие в оптимизированное .png (позволяет картинки до 50 МБ) размер)
- bse64.com - кодируйте ваши изображения в Base64
- lorempixel.com - Генератор изображений заполнителей
- xiconeditor.com - онлайн -редактор значков
- Favicon -Generator.org - Генератор Favicon
- toptal.com/developers/css/sprite -Generator - CSS Sprite Generator
- webresizer.com/resizer - редактор изображений
- picsvg.com - конвертирует JPEG, JPG, GIF, PNG Picture в SVG
CSS
- westciv.com/tools/3dtransforms - gradients/additor
- CSS3Maker.com - редактор и генераторы CSS - Радиус границы, градиент, преобразование, анимация, переход, текстовая тень, тень коробка, поворот текста
- cssmatic.com - генераторы CSS - градиент, фоновые узоры, тени коробки, радиус границы
- cssmatic.com/box-shadow - CSS Drop Thadows Generator
- Developer.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator-генератор границ CSS
- cssfilters.co - редактор фильтров CSS
Генераторы градиентов CSS
- Colorzilla.com/gradient-editor - Генератор градиента CSS
- CSS -Gradient - Генератор градиента CSS
- GradientGenerator.com - Генератор градиентов CSS с шаблонами
- gridytools.com/gradient - Генератор градиента CSS
CSS Animation Editors
- theappguruz.com/tag-tools/web/cssanimations - Коллекция анимации CSS
- anicollection.github.io - Коллекция анимации CSS
- cssanimate.com - генератор анимации CSS
- MindTools.com/css/animation - Генератор анимации CSS
- Animista.net - генератор анимации CSS
- jeremyckahn.github.io/stylie - генератор анимации CSS
- waitAnimate.wstone.io - вычислить проценты ключевых кадров, чтобы вы могли вставить задержку между каждой итерацией анимации
CSS Треугольные генераторы
- cssarrowplease.com - генерирует пользовательскую коробку со стрелкой, простирающейся со стороны
- apps.eky.hk/css-triangle-генератор-генератор треугольника CSS
Svg
- userAgentman.com/tests/textpath/bezier-curve-set-set-bézier-генератор
- cssplant.com/clip-path-Generator-Генератор пути клипа
- bennettfeely.com/clippy - генератор пути клипа
- jxnblk.com/paths - генератор пути
- kazzkiq.github.io/svg-color-filter-редактор цветовых фильтров SVG
- yoksel.github.io/svg-filters - редактор эффектов фильтра SVG
- gigacore.github.io/demos/svg-stroke-dasharray-Generator-генератор линии приборной линии
- editor.method.ac - редактор SVG
Регулярно
- regexr.com - Создание и тестирование регулярных выражений
- regex101.com - Создание и тестирование регулярных выражений
Другие
- Developers.google.com/speed/pagespeed/insights - предоставляет информацию о том, насколько хорошо страница придерживается набора лучших практик
- Eastings.net - Сбор функций смягчения
