List of Free Online Tools For Front end Web Development

Lista de herramientas en línea gratuitas para el desarrollo web front-end (2020)

Lista de herramientas y recursos en línea gratuitos en forma de aplicaciones web o servicios web para el desarrollo frontal. Cada herramienta contiene una breve descripción y vista previa como una captura de pantalla de la página web.

• Tipografía
  • Colecciones de fuentes
• Colores, paletas y patrones
  • Generadores de color
  • Editores de patrones
  • Generadores de gradiente
  • Paletas de colores
  • Agarradores de color
• Imágenes, ilustraciones, videos
  • Convertidores de imágenes y editores
• CSS
  • Generadores de gradiente CSS
  • Editores de animación CSS
  • Generadores de triángulos CSS
• SVG
• Regular
• Otros

Tipografía

• Loremipsum.io - Simple y mejor forma de agarrar el contenido de texto de Lorem Ipsum

• Gridlover.net/try: establezca un sistema tipográfico con escala modular y ritmo vertical

• Pearsonified.com/typography - Calculadora de tipografía de dorado

• PXTOEM.com - conversión de PX a EM

• Canva.com/font -Combinations - Encontrar una combinación de fuentes

• Fontpair.co - Colección de parejas de fuentes de Google

• transfonter.org - convertidor de fuentes en línea

Colecciones de fuentes

• fontstruct.com/gallery - Colección de fuentes (requiere registro)

• fonts.google.com - Google Fonts

• Fonts2u.com - Colección de fuentes gratis

• github.com/lvwzhen/iconpark - Colección de fuentes de iconos

Colores, paletas y patrones

• color-hex.com: proporciona información sobre los colores

• colorhunt.co - colección de paletas de colores

• colourlovers.com - Colección de paletas, patrones, formas y colores

• Colrd.com - Colección de paletas, patrones, gradientes y colores

• heropatterns.com - Colección de patrones de fondo SVG repetibles

• toptal.com/designers/subtlepatterns - Colección de patrones

• PatternCooler.com - Colección de fondos de patrones

Generadores de color

• color.hailpixel.com - Generador de colores planos

• Colourco.de - Generador de colores

• Paletton.com - Diseñador de esquema de color

• Galactic.ink/Sphere - Generador de espectro de color

• ColorSupplyyy.com/app - Generar varias mezclas de color

Editores de patrones

• PatternInja.com - Editor de patrones

• halftonepro.com/app - Editor de patrones

• qrohlf.com/trianglify -Generator - Generador de patrones de triángulo

• kennethcachia.com/lain-pattern - editor de patrones de SVG

Generadores de gradiente

• uigradients.com - Colección de gradientes

• colinkeany.com/blend - Generador de gradiente de fondo

Paletas de colores

• Flatuicolors.com - Colección de paletas de colores

• Colordrop.io - Colección de paletas de colores

• color.adobe.com/explore - colección de paletas de colores

• Flatuicolorpicker.com/category/all - Colección de colores planos

Agarradores de color

• lokeshdhakar.com/projects/color-thief - Tome la paleta de colores de una imagen

• www.colorhunter.com - agarrar colores de las imágenes

• Image -Color.com - Otro Colors Aadber de Images

• webcolourdata.com - agarrar colores de los sitios web

Imágenes, ilustraciones, videos

• Pixabay.com - Colección de imágenes gratuitas

• Pexels.com - Colección de imágenes gratuitas

• Unsplash.com - Colección de imágenes gratuitas

• Free-Images.com - Colección de imágenes gratuitas

• Gratisography.com - Colección de imágenes gratuitas

• Freephotos.cc - Colección de imágenes gratuitas

• Kisspng.com - Colección de imágenes PNG transparentes

• VECTEEZY.com - Colección de arte vectorial gratuito

• undraw.co/illustrations - colección de ilustraciones gratis

• iconfinder.com - Finder de iconos

• Cubro.co - Videos de portada gratis

• Mazwai.com - Videos cinematográficos gratuitos bajo una licencia CC por 3.0

Convertidores de imágenes y editores

• JPEG.IO: convierte cualquier formato de imagen importante en un JPEG altamente optimizado

• tinypng.com: otra herramienta de compresión que permite la compresión de imágenes .png y .jpg (permite imágenes de hasta 5 MB)

• WebsiteSePlanet.com/webitools/imageCompressor - .png o .jpg compresión en .png optimizado (permite imágenes de hasta 50 MB)

• BSE64.com - Codifique sus imágenes en Base64

• lorempixel.com - Generador de imágenes de marcador de posición

• xiconeditor.com - editor de iconos en línea

• favicon-generator.org - generador de favicon

• toptal.com/developers/css/sprite-generator - generador de sprites CSS

• webresizer.com/resizer - editor de imágenes

• Picsvg.com - Convierte JPEG, JPG, GIF, PNG Imagen a SVG

CSS

• westciv.com/tools/3dtransforms - editor de gradientes/transformaciones

• css3maker.com - Editor y generadores de CSS - Radio de borde, gradiente, transformación, animación, transición, sombra de texto, sombra de cuadro, rotación de texto

• cssmatic.com - Generadores CSS - Gradiente, patrones de fondo, sombras de caja, radio de borde

• cssmatic.com/box-shadow - generador de sombras de caída de CSS

• desarrollador.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator-Generador de imágenes de borde de CSS

• cssfilters.co - editor de filtros CSS

Generadores de gradiente CSS

• colorzilla.com/gradient-editor - Generador de gradiente CSS

• CSS -Gradiente - Generador de gradiente CSS

• GradientGenerator.com - Generador de gradiente CSS con patrones

• Angrytools.com/gradient - Generador de gradiente CSS

Editores de animación CSS

• theapguruz.com/tag-tools/web/cssanimations - colección de animaciones CSS

• anicollection.github.io - Colección de animaciones CSS

• cssanimate.com - Generador de animación CSS

• Angrytools.com/css/animation - Generador de animación CSS

• animista.net - Generador de animación CSS

• jeremyckahn.github.io/stylie - generador de animación CSS

• waitanimate.wstone.io: calcule los porcentajes de fotograma clave para que pueda insertar un retraso entre cada iteración de animación

Generadores de triángulos CSS

• cssarrowplase.com: genera una caja personalizada con una flecha que se extiende desde un lado

• aplicaciones

SVG

• useragentman.com/tests/textpath/bezier-curve-construction-set-Bézier Curve Generator

• cssplant.com/clip-path-Generator-Generador de ruta de clip

• bennettfeely.com/clippy - Generador de ruta de clip

• jxnblk.com/paths - Generador de ruta

• kazzkiq.github.io/svg-color-filter-editor de filtro de color svg

• Yoksel.github.io/svg -Filters - Editor de efectos de filtro SVG

• gigacore.github.io/demos/svg-stroke-doasharray-generador-generador de línea de tablero

• editor.method.ac - editor de SVG

Regular

• Regexr.com - Construir y probar expresiones regulares

• regex101.com - construyendo y pruebas de expresiones regulares

Otros

• desarrolladores.google.com/speed/pagespeed/insights: proporciona información sobre qué tan bien se adhiere una página a un conjunto de mejores prácticas

• Easings.net - Colección de funciones de facilidad