Lista de ferramentas on-line gratuitas para desenvolvimento da web front-end (2020)
Lista de ferramentas e recursos on-line gratuitos na forma de aplicativos ou serviços da Web para desenvolvimento de front-end. Cada ferramenta contém uma descrição curta e visualização como uma captura de tela da página da web.
- Tipografia
- Cores, paletas e padrões
- Geradores de cores
- Editores de padrões
- Geradores de gradiente
- Paletas de cores
- Grabadores de cores
- Imagens, ilustrações, vídeos
- Conversores de imagem e editores
- CSS
- Geradores de gradiente CSS
- Editores de animação CSS
- Geradores de triângulo CSS
- Svg
- Regex
- Outros
Tipografia
- Loremipsum.io - Maneira simples e melhor de pegar o conteúdo de texto de Lorem ipsum
- gridlover.net/try - estabeleça um sistema tipográfico com escala modular e ritmo vertical
- Pearsonified.com/typography - calculadora de tipografia com razão dourada
- pxtoem.com - px para conversão EM
- Canva.com/font-combinações - Encontrando uma combinação de fontes
- Fontpair.co - Coleção de pares do Google Fontes
- transfonter.org - conversor de fonte online
Coleções de fontes
- Fontstruct.com/gallery - Coleção de fontes (requer registro)
- fonts.google.com - Fontes do Google
- fonts2u.com - coleção de fontes grátis
- github.com/lvwzhen/iconpark - coleção de fontes de ícone
Cores, paletas e padrões
- color-hex.com - fornece informações sobre cores
- colorhunt.co - Coleção de paletas de cores
- Colourlovers.com - Coleção de paletas, padrões, formas e cores
- Colrd.com - Coleção de paletas, padrões, gradientes e cores
- Heropatterns.com - Coleção de padrões de fundo repetíveis SVG
- toptal.com/designers/subtlepatterns - Coleção de padrões
- PatternCooler.com - Coleção de fundos de padrões
Geradores de cores
- color.hailpixel.com - gerador de cores planas
- colourco.de - gerador de cores
- Paletton.com - Designer de esquema de cores
- galactic.ink/sphere - gerador de espectro de cores
- Colorsupplyyy.com/app - Gere várias misturas de cores
Editores de padrões
- Patterninja.com - Editor de padrões
- halftonepro.com/app - editor de padrões
- qrohlf.com/trianglify-generator - gerador de padrões de triângulo
- Kennethcachia.com/plain-pattern - Editor de padrões SVG
Geradores de gradiente
- UigRadients.com - Coleção de gradientes
- Colinkeany.com/blend - Gerador de gradiente de fundo
Paletas de cores
- flatuicolors.com - Coleção de paletas de cores
- Colordrop.io - Coleção de paletas de cores
- color.adobe.com/explore - coleção de paletas de cores
- flatuicolorpicker.com/category/all - coleção de cores planas
Grabadores de cores
- Lokeshdhakar.com/projects/color-thief - pegue a paleta de cores de uma imagem
- www.colorhunter.com - Pegue cores das imagens
- Image-Color.com - Outra coloração de imagens de imagens
- webcolourdata.com - Pegue cores de sites
Imagens, ilustrações, vídeos
- Pixabay.com - Coleção de imagens gratuitas
- pexels.com - coleção de imagens gratuitas
- Unsplash.com - Coleção de imagens gratuitas
- Free-Images.com - Coleção de imagens gratuitas
- gratisography.com - Coleção de imagens gratuitas
- Freephotos.cc - Coleção de imagens gratuitas
- Kisspng.com - Coleção de imagens PNG transparentes
- vecteezy.com - coleção de arte vetorial gratuita
- undraw.co/illustrações - Coleção de ilustrações gratuitamente
- iconfinder.com - Icon Finder
- CoverR.co - Vídeos de capa gratuitos
- Mazwai.com - Vídeos cinematográficos gratuitos sob uma licença CC por 3.0
Conversores de imagem e editores
- jpeg.io - converte qualquer formato de imagem principal em um JPEG altamente otimizado
- tinypng.com - Outra ferramenta de compressão que permite a compactação de imagens .png e .jpg (permite imagens de até 5 MB de tamanho)
- websiteplanet.com/webtools/imagecompressor - .png ou .jpg compactação em .png otimizado (permite imagens de até 50 MB de tamanho)
- bse64.com - codifique suas imagens em base64
- Lorempixel.com - Generador de imagens de espaço reservado
- xiconeditor.com - Editor de ícones online
- favicon-generator.org - gerador favicon
- toptal.com/developers/css/sprite-generator - gerador de sprites css sprites
- webresizer.com/resizer - editor de imagens
- picsvg.com - converte jpeg, jpg, gif, png imagem para svg
CSS
- westciv.com/tools/3dtransforms - editor de gradientes/transformados
- CSS3maker.com - Editor e geradores do CSS - raio de borda, gradiente, transformação, animação, transição, sombra de texto, sombra de caixa, rotação de texto
- cssmatic.com - geradores CSS - gradiente, padrões de fundo, sombras de caixa, raio de borda
- cssmatic.com/box-shadow - CSS Drop Shadows Gerator
- Developer.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator-gerador de imagem de borda CSS
- cssfilters.co - editor de filtros CSS
Geradores de gradiente CSS
- colorzilla.com/gradiente-editor - gerador de gradiente CSS
- CSS -gradiente - Gerador de gradiente CSS
- GradientGenerator.com - Gerador de gradiente CSS com padrões
- Angrytools.com/gradiente - Gerador de gradiente CSS
Editores de animação CSS
- theappguruz.com/tag-tools/web/cssanimations - coleção de animações CSS
- anicollection.github.io - Coleção de animações CSS
- cssanimate.com - gerador de animação CSS
- Angrytools.com/css/animation - CSS Animation Generator
- Animista.net - CSS Animation Gerator
- jeremyckahn.github.io/stylie - gerador de animação CSS
- waitanimate.wstone.io - Calcule as porcentagens do quadro -chave para que você possa inserir um atraso entre cada iteração de animação
Geradores de triângulo CSS
- CSSARROWPLEASE.COM - Gera uma caixa personalizada com uma seta que se estende por parte do lado
- apps.eky.hk/css-riânghe-generator-gerador de triângulo CSS
Svg
- userAgentman.com/tests/textpath/bezier-curve-construction-set-gerador de curva bézier
- cssplant.com/clip-path-generator-gerador de caminho de clipe
- Bennettfeely.com/clippy - Gerador de Caminho de Clip
- jxnblk.com/paths - gerador de caminho
- kazzkiq.github.io/svg-color-filter-editor de filtro colorido SVG
- yoksel.github.io/svg-filters - Editor de efeitos de filtro SVG
- gigacore.github.io/demos/svg-stroke-carray-generator-gerador de linha de traço
- editor.method.ac - editor SVG
Regex
- regexr.com - Construindo e testando expressões regulares
- regex101.com - Construindo e testando expressões regulares
Outros
- desenvolvedores.google.com/speed/pagespeed/insights - fornece informações sobre o quão bem uma página adere a um conjunto de melhores práticas
- easings.net - Coleção de funções de flexibilização
