[Résumé sur l'hématémèse] Plus de 20 outils pratiques front-end, ajoutez-les à vos favoris !

Cet article partagera avec vous plus de 20 outils pratiques front-end pour vous aider à améliorer l'efficacité du développement lors du développement de projets. Venez les collecter et les utiliser. J'espère qu'il sera utile à tout le monde !

1. Générateur de mise en page CSS

Mise en page : https://layout.bradwoods.io/customize

Il s'agit d'un générateur CSS et JSX complet pour utiliser la mise en page CSS Grid. La syntaxe génère différents types de mises en page, modifie arbitrairement les propriétés de la grille, affiche l'écran en temps réel et génère le code correspondant. Bien sûr, il existe une disposition Flex (mais elle n'est pas encore parfaite). [Apprentissage recommandé : Tutoriel vidéo CSS]

2. Riju

Riju : https://riju.codes/

Riju est une plateforme d'exécution de code en ligne qui hérite de 224 langues Très simple. , pas de publicité, fortement recommandé

3. Whirl

Whirl : https://whirl.netlify.app/

Whirl est une bibliothèque d'animation CSS, différente des autres bibliothèques d'animation, qui collecte 108 animations de chargement, est simple et unique, vaut la peine d'être appris, et tous les codes sources sont également disponibles !

4. Pikaday

Pikaday : https://pikaday.com/

Pikaday est un sélecteur de date, sans dépendances, léger (5k), modulaire CSS, et le style est également très simple. , Je l'aime particulièrement. Étonnamment, il a gagné plus de 7 000 étoiles sur Github. Il s'agit d'un kit d'interface utilisateur Tailwind. Ce site Web est une collection de divers composants Tailwind fournis par la communauté. . Il contient plus de 250 composants open source et est compatible avec React, Vue et Angular : https://pbeshai.github.io/tidy/

tidy.js est une bibliothèque JavaScript pour le traitement des données. 70 fonctions de catégories différentes (collage, regroupement, mathématiques, tri, etc.)

8. party.js

party.js : https://party.js.org/

party .js est assez intéressant. Vous devriez avoir vu de nombreux sites de blog. Cliquez avec la souris. Ou il y aura de nombreux effets d'animation sympas lorsque vous faites glisser cette bibliothèque. Vous pouvez facilement obtenir ces effets

9. suppression de l'arrière-plan

baseline : https://baseline.is/tools/background-remover/

baseline est un outil Web gratuit qui utilise l'IA pour supprimer l'arrière-plan des images. Il prend en charge les formats JPEG et PNG, et le fera éventuellement. vous renvoie une image PNG avec un arrière-plan transparent

十, Modèles de mise en page

Modèles de mise en page : https://web.dev/patterns/layout/

Modèles de mise en page est une nouvelle section dans le ressources de développement de Google Developers, qui répertorient l'utilisation de CSS pour créer l'interface utilisateur de mise en page. Maintenant, 11 mises en page sont répertoriées ~ Le nombre continuera d'augmenter à l'avenir, explorez plus de possibilités, il est recommandé de collecter

Onze, Lowdefy

Lowdefy : https://lowdefy.com/

Lowdefy est un framework open source low-code qui utilise YAML pour créer facilement des applications Web, des panneaux de gestion, des tableaux de bord BI, des workflows et des applications CRUD

Twelve, uncut

uncut : https://uncut.wtf/

uncut est un site Web de répertoire de polices moderne, axé sur l'open source, gratuit pour un usage personnel et commercial, j'ai jeté un œil à le total Il contient 90 polices à choisir ~

Treize, fetoolkit

fetoolkit : https://www.fetoolkit.io/

fetoolkit est une boîte à outils de développement frontal qui contient 20 Une variété d'outils de codage et liés aux images, notamment CSS, JSON, icônes, SVG, compression d'image, npm, regex et d'autres outils

Quatorze, flèches Unicode

Flèches Unicode : https://unicodearrows .com/

Unicode Arrows est une collection de codes hexadécimaux liés à diverses flèches

Quinze composants AI

components AI : https://components.ai/

components AI est un générateur de thèmes, comprenant un générateur de coloration syntaxique, un dégradé, un outil d'ombre, un générateur de motifs SVG, un arrière-plan animé, etc., tous peuvent être débogués en ligne, très faciles à utiliser

Sixteen , Glitter

Glitter : https : //wh0.github.io/glitter/

Glitter est un générateur de polices fluorescentes. Le projet n'est pas compliqué, mais ça a l'air bien On peut modifier le texte à volonté et enfin l'exporter en SVG

. Dix-sept, Iconduck

Iconduck : https://iconduck.com/

Iconduck est un site Web d'icônes open source avec plus de 100 000 icônes qui peuvent être recherchées par mots-clés et peuvent toutes être utilisées dans des projets commerciaux Utilisé dans

18, pattern-generator

pattern-generator : https://doodad.dev/pattern-generator/

pattern-generator est un site Web qui vous aide à générer des images d'arrière-plan. Il existe des dizaines de motifs. à choisir, et les éléments de chaque motif peuvent être modifiés à volonté via des boutons interactifs. Enfin, les codes d'arrière-plan JPEG, PNG, SVG et CSS peuvent être exportés. Il prend également en charge la restauration du contenu de la dernière opération après la sortie

.

Dix-neuf, boutons-generator

buttons-generator : https://markodenic.com/tools/buttons-generator/

buttons-generator est un site Web qui contient des boutons avec de nombreuses formes et styles interactifs, là il y a environ **120+** types, pour ceux qui ont besoin de boutons personnalisés, vous pouvez les utiliser comme référence

Vingt polices de codage

Polices de codage : https://coding-fonts.css -tricks.com/fonts/hack/?langage=html&theme=dark

Coding Fonts est un site Web qui collecte 45 polices de codage. La plupart d'entre elles sont gratuites. Bien sûr, il existe également des polices payantes. aimez et mettez-le vous-même. Allez dans l'éditeur (tranquillement bb, je l'aime toujours le plus, gratuit et beau) svgrepo est une bibliothèque d'icônes SVG avec plus de 300 000 icônes SVG gratuites, dont la plupart sont également disponibles dans le commerce. . Le site Web prend en charge la recherche et peut être collecté sans se connecter (peut être enregistré dans le stockage local) ~ JetBrains Mono

Vingt-deux, maplibre

maplibre : https://maplibre.org/

maplibre est un Monde JavaScript La bibliothèque de cartes est disponible immédiatement et prend également en charge les SDK IOS et Android

Vingt-trois, Dopefolio

Dopefolio : https://github.com/rammcodes/Dopefolio

Dopefolio est un générateur de pages de site officiel prêt à l'emploi qui ne repose pas sur un un groupe d'open source tiers La bibliothèque est entièrement composée de HTML et CSS purs, donc le référencement est très bon, le score Lighthouse est également très élevé et prend en charge la réactivité des pages. Les amis qui ont besoin d'une page de site Web officiel peuvent essayer d'utiliser

Vingt-quatre, animista

animista : https://animista.net/

Ensemble d'animation CSS, qui peut s'ajuster librement paramètres d'animation, générer des extraits de code, facile à utiliser

Vingt-cinq, CSS Inspiration

CSS Inspiration -- CSS inspiration

https://csscoco.com/inspiration/

Le patron s'en chargera pour vous à chaque fois Vous pouvez l'utiliser ici comme référence lorsque vous recherchez toutes sortes de styles fantaisistes

end

(Partage de vidéos d'apprentissage : front-end web)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!