Liste der kostenlosen Online-Tools für die Front-End-Webentwicklung (2020)
Liste der kostenlosen Online-Tools und -Ressourcen in Form von Webanwendungen oder Webdiensten für die Front-End-Entwicklung. Jedes Tool enthält eine kurze Beschreibung und Vorschau als Webseite Screenshot.
- Typografie
- Farben, Paletten und Muster
- Farbgeneratoren
- Musterredakteure
- Gradientengeneratoren
- Farbpaletten
- Farbgreifer
- Bilder, Illustrationen, Videos
- Bildkonverter und Redakteure
- CSS
- CSS -Gradientengeneratoren
- CSS -Animation Editoren
- CSS -Dreieckgeneratoren
- Svg
- Regex
- Andere
Typografie
- loremipsum.io - Einfacher und besserer Weg, um Lorem Ipsum -Textinhalt zu greifen
- Gridlover.net/try - Erstellen Sie ein typografisches System mit modularer Skala und vertikaler Rhythmus
- Pearsonified.com/typography - Golden Ratio Typografierechner
- pxtoem.com - PX zur EM -Konvertierung
- canva.com/font-combinations - eine Schriftkombination finden
- fontpair.co - Sammlung von Google -Schriftarten Paarungen
- transfonter.org - Online -Schriftwandler
Schriftarten Sammlungen
- fontstruct.com/gallery - Sammlung von Schriftarten (erfordert Registrierung)
- fonts.google.com - Google -Schriftarten
- fonts2u.com - Sammlung kostenloser Schriftarten
- github.com/lvwzhen/iconpark - Sammlung von Icon -Schriftarten
Farben, Paletten und Muster
- Color -Hex.com - gibt Informationen zu Farben
- ColorHunt.co - Sammlung von Farbpaletten
- colourlovers.com - Sammlung von Paletten, Mustern, Formen und Farben
- colrd.com - Sammlung von Paletten, Mustern, Gradienten und Farben
- Heropatterns.com - Sammlung wiederholbarer SVG -Hintergrundmuster
- toptal.com/designers/subtlepatterns - Sammlung von Mustern
- mustercooler.com - Sammlung von Musterhintergründen
Farbgeneratoren
- color.hailpixel.com - Flat Colors Generator
- Colourco.de - Farbgenerator
- paletton.com - Farbschema -Designer
- galactic.ink/Sphere - Farbspektrumgenerator
- Colorsupplyyy.com/app - Erzeugen Sie verschiedene Farbmischungen
Musterredakteure
- musterinja.com - Muster Editor
- HalftonePro.com/app - Muster Editor
- qrohlf.com/trianglify -generator - Dreiecksmustergenerator
- kennethcachia.com/plain -pattern - SVG -Muster Editor
Gradientengeneratoren
- Uigraderients.com - Sammlung von Gradienten
- colinkeany.com/blend - Hintergrundgradientengenerator
Farbpaletten
- flatUicolors.com - Sammlung von Farbpaletten
- ColorDrop.io - Sammlung von Farbpaletten
- color.adobe.com/explore - Sammlung von Farbpaletten
- flatUicolorpicker.com/category/all - Sammlung von flachen Farben
Farbgreifer
- lokeshdhakar.com/projects/color-Tief - Schnapp dir die Farbpalette aus einem Bild
- www.colorhunter.com - Greifen Sie auf Farben aus den Bildern
- Image -Color.com - Ein weiterer Farben Grabber aus den Bildern
- webcolourdata.com - Greifen Sie auf Farben von Websites
Bilder, Illustrationen, Videos
- pixabay.com - Sammlung kostenloser Bilder
- pexels.com - Sammlung kostenloser Bilder
- Unsplash.com - Sammlung kostenloser Bilder
- Free -Images.com - Sammlung kostenloser Bilder
- gratisographie.com - Sammlung kostenloser Bilder
- freephotos.cc - Sammlung kostenloser Bilder
- kisspng.com - Sammlung transparenter PNG -Bilder
- Vectezy.com - Sammlung kostenloser Vektorkunst
- undraw.co/illustrations - Sammlung von Illustrationen kostenlos
- iconfinder.com - Icon Finder
- Coverr.co - kostenlose Cover -Videos
- mazwai.com - Kostenlose filmische Videos unter einer CC von 3.0 Lizenz
Bildkonverter und Redakteure
- JPEG.IO - Umwandelt jedes wichtige Bildformat in einen hoch optimierten JPEG
- Tinypng.com - Ein weiteres Komprimierungswerkzeug, das die Komprimierung von .png- und .jpg -Bildern ermöglicht (ermöglicht Bilder bis zu 5 MB)
- WebSitePlanet.com/Webtools/imageCompressor - .png oder .jpg -Komprimierung in optimierte .png (ermöglicht Bilder bis zu 50 MB)
- BSE64.com - Enkodieren Sie Ihre Bilder in Base64
- lorempixel.com - Platzhalterbilder Generator
- xiconeditor.com - Online -Ikonen -Editor
- Favicon -Generator.org - Favicon -Generator
- toptal.com/developers/css/sprite-generator - CSS Sprites Generator
- webressizer.com/resizer - Image Editor
- picsvg.com - Konvertiert JPEG, JPG, GIF, PNG -Bild in SVG
CSS
- westciv.com/tools/3dtransforms - Gradienten/Transformats Editor
- CSS3Maker.com - CSS -Editor und Generatoren - Grenzradius, Gradienten, Transformation, Animation, Übergang, Textschatten, Boxschatten, Textdrehung
- CSSMatic.com - CSS -Generatoren - Gradient, Hintergrundmuster, Boxschatten, Randradius
- cssmatic.com/box-shadow - CSS Drop Shadows Generator
- Entwickler.mozilla.org/en-us/docs/web/css/css_background_and_borders/border-image_generator-CSS-Grenzbildgenerator
- CSSFilters.co - CSS -Filter -Editor
CSS -Gradientengeneratoren
- Colorzilla.com/gradient-editor - CSS -Gradientengenerator
- CSS -Gradient - CSS -Gradientengenerator
- gradientengenerator.com - CSS -Gradientengenerator mit Mustern
- AngryTools.com/gradient - CSS -Gradientengenerator
CSS -Animation Editoren
- TheAppguruz.com/tag-tools/web/cssanimations - Sammlung von CSS -Animationen
- Anicollection.github.io - Sammlung von CSS -Animationen
- cssanimate.com - CSS -Animationsgenerator
- AngryTools.com/css/animation - CSS -Animationsgenerator
- Animista.net - CSS -Animationsgenerator
- Jeremyckahn.github.io/stylie - CSS -Animationsgenerator
- waitAnimate.wstone.io - Berechnen Sie die Keyframe -Prozentsätze, damit Sie eine Verzögerung zwischen jeder Animations -Iteration einfügen können
CSS -Dreieckgeneratoren
- CSSArrowPease.com - generiert eine benutzerdefinierte Box mit einem Pfeil, der sich von der Seite erstreckt
- Apps.eky.hk/css-Triangle-Generator-CSS-Dreieckgenerator
Svg
- userAgentman.com/tests/textpath/bezier-curve-construction-set-Bézier-Kurvengenerator
- cssplant.com/clip-path-Generator-Clip Path Generator
- Bennettfeely.com/clippy - Clip Path Generator
- jxnblk.com/paths - Pfadgenerator
- kazzkiq.github.io/svg-color-filter-SVG Farbfilter-Editor
- yoksel.github.io/svg -filters - SVG Filter Effect Editor
- gigacore.github.io/demos/svg-Stroke-dasharray-Generator-Dash Line Generator
- Editor.Method.ac - SVG Editor
Regex
- regexr.com - Aufbau und Testen regelmäßiger Ausdrücke
- REGEX101.com - Erstellen und Testen regulärer Ausdrücke
Andere
- Entwickler.google.com/speed/pagespeed/insights - gibt Informationen darüber, wie gut eine Seite an einer Reihe von Best Practices haftet
- SAGEINGS.NET - Sammlung von Lockerungsfunktionen
