List of Free Online Tools For Front end Web Development

Liste des outils en ligne gratuits pour le développement Web frontal (2020)

Liste des outils et ressources en ligne gratuits sous forme d'applications Web ou de services Web pour le développement frontal. Chaque outil contient une brève description et un aperçu en tant que capture d'écran de page Web.

• Typographie
  • Collections de polices
• Couleurs, palettes et motifs
  • Générateurs de couleurs
  • Éditeurs de motifs
  • Générateurs de gradient
  • Palettes de couleurs
  • Grabbers de couleur
• Images, illustrations, vidéos
  • Convertisseurs d'images et éditeurs
• CSS
  • Générateurs de gradient CSS
  • Éditeurs d'animation CSS
  • Générateurs de triangle CSS
• SVG
• Expirat
• Autres

Typographie

• loremipsum.io - moyen simple et meilleur de saisir le contenu du texte lorem ipsum

• Gridlover.net/try - Établissez un système typographique à l'échelle modulaire et au rythme vertical

• Pearsonified.com/typographie - calculatrice de typographie du ratio d'or

• pxtoem.com - PX TO EM Conversion

• canva.com/font-combinations - trouver une combinaison de polices

• Fontpair.co - Collection de paires de polices Google

• transfonter.org - Convertisseur de police en ligne

Collections de polices

• Fontstruc.com/gallery - Collection de polices (nécessite un enregistrement)

• Fontts.google.com - Google Fonts

• FONTS2U.com - Collection de polices gratuites

• github.com/lvwzhen/iconpark - Collection de polices d'icônes

Couleurs, palettes et motifs

• Color-hex.com - donne des informations sur les couleurs

• ColorHunt.co - Collection de palettes de couleurs

• colourlovers.com - Collection de palettes, motifs, formes et couleurs

• Colrd.com - Collection de palettes, motifs, gradients et couleurs

• Heropatterns.com - Collection de modèles de fond SVG reproductibles

• toptal.com/designers/subtlepatterns - Collection de motifs

• PatternCooler.com - Collection des arrière-plans de motif

Générateurs de couleurs

• color.hailpixel.com - générateur de couleurs plates

• colourco.de - générateur de couleurs

• Paletton.com - concepteur de couleurs

• galactic.ink/sphere - Générateur de spectre de couleurs

• couleursupplyyy.com/app - générer divers mélanges de couleurs

Éditeurs de motifs

• Patternja.com - éditeur de modèle

• HalfonePro.com/App - éditeur de modèle

• qrohlf.com/trianglify-generator - Triangle Pattern Generator

• kennethcachia.com/plain-phattern - éditeur de modèle SVG

Générateurs de gradient

• Uigradients.com - Collection de gradients

• colinkeany.com/blend - générateur de gradient de fond

Palettes de couleurs

• FlatUicolors.com - Collection de palettes de couleurs

• Colordrop.io - Collection de palettes de couleurs

• color.adobe.com/explore - collection de palettes de couleurs

• FLATUICOLORPICKER.com/Category/all - Collection de couleurs plates

Grabbers de couleur

• lokeshdhakar.com/projects/color-thief - prenez la palette de couleurs d'une image

• www.colorhunter.com - Saisissez les couleurs des images

• Image-Color.com - Un autre capteur de couleurs à partir d'images

• webcolourdata.com - Saisissez les couleurs des sites Web

Images, illustrations, vidéos

• pixabay.com - Collection d'images gratuites

• pexels.com - Collection d'images gratuites

• unsplash.com - Collection d'images gratuites

• Free-images.com - Collection d'images gratuites

• grattisographic.com - Collection d'images gratuites

• freephotos.cc - Collection d'images gratuites

• Kisspng.com - Collection d'images PNG transparentes

• vecEezy.com - Collection d'art vectoriel gratuit

• unstraw.co/illustrations - Collection d'illustrations gratuitement

• iconfinder.com - Icon Finder

• Coverr.co - vidéos de couverture gratuites

• Mazwai.com - vidéos cinématographiques gratuites sous une licence CC par 3.0

Convertisseurs d'images et éditeurs

• JPEG.IO - convertit tout format d'image majeur en un JPEG hautement optimisé

• tinypng.com - Un autre outil de compression qui permet de compresser les images .png et .jpg (permet aux images jusqu'à 5 Mo)

• WebitePlanet.com/webtools/ImageCompressor - .png ou .jpg Compression dans Optimized .png (permet aux images jusqu'à 50 Mo)

• bse64.com - Encoder vos images dans la base64

• Lorempixel.com - Générateur d'images d'espace réservé

• XICONEditor.com - éditeur d'icône en ligne

• Favicon-Generator.org - Générateur Favicon

• toptal.com/developers/css/sprite-generator - Générateur de sprites CSS

• webresizer.com/resizer - éditeur d'images

• picsvg.com - Converties JPEG, JPG, GIF, PNG Photo en SVG

CSS

• westciv.com/tools/3dtransforms - éditeur de gradients / transformations

• CSS3Maker.com - Éditeur et générateurs CSS - Radius de bordure, gradient, transformation, animation, transition, ombre de texte, ombre de boîte, rotation de texte

• CSSMatic.com - Générateurs CSS - Gradient, motifs d'arrière-plan, ombres de boîte, rayon de bordure

• cssmatic.com/box-shadow - Générateur CSS Drop Shadows

• développeur.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator - Générateur d'image de bordure CSS

• cssfilters.co - éditeur de filtres CSS

Générateurs de gradient CSS

• colorzilla.com/gradient-editor - Générateur de gradient CSS

• Gradient CSS - Générateur de gradient CSS

• GradientGenerator.com - Générateur de gradient CSS avec motifs

• Angrytools.com/gradient - Générateur de gradient CSS

Éditeurs d'animation CSS

• theAppguruz.com/tag-tools/web/cssanimations - Collection d'animations CSS

• anicollection.github.io - collection d'animations CSS

• cssanimate.com - Générateur d'animation CSS

• AngryTools.com/css/animation - Générateur d'animation CSS

• animista.net - Générateur d'animation CSS

• Jeremyckahn.github.io/stylie - Générateur d'animation CSS

• waitanimate.wstone.io - Calculez les pourcentages d'images clés afin que vous puissiez insérer un retard entre chaque itération d'animation

Générateurs de triangle CSS

• cssarrowPlease.com - Génère une boîte personnalisée avec une flèche s'étendant du côté

• apps.eky.hk/css --priangle-generator - CSS Triangle Generator

SVG

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

• cssplant.com/clip-path-generator - Générateur de chemins de cheminement à clip

• bennettfeely.com/clippy - Générateur de chemins à clip

• jxnblk.com/paths - Générateur de chemins

• kazzkiq.github.io/svg-color-filter - éditeur de filtre de couleur SVG

• yoksel.github.io/svg-ilters - éditeur d'effets du filtre SVG

• gigacore.github.io/demos/svg-troke-dasharray-generator - Générateur de lignes de tableau de bord

• editor.method.ac - éditeur SVG

Expirat

• regexr.com - construire et tester des expressions régulières

• regex101.com - construire et tester des expressions régulières

Autres

• Developers.google.com/speed/pagespeed/insights - Fournit des informations sur la façon dont une page adhère à un ensemble de meilleures pratiques

• Easings.net - Collection de fonctions d'assouplissement