Maison > Article > interface Web > [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 !
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]
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é
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 !
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
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 : 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
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
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 ~
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
Flèches Unicode : https://unicodearrows .com/
Unicode Arrows est une collection de codes hexadécimaux liés à diverses flèches
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
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
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
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
.
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
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
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
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
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
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!