75个用于网页设计师的基于网页的小工具



这些免费的基于网络的应用程序都是在过去一年左右发布的,它们都为你不时需要执行的许多网页设计任务提供了一个省时的解决方案。不需要安装任何东西,你所要做的就是将它们添加到书签中,并保存它们,以备有人调用它们时使用。

其中一些小的时间节省器将帮助您更好地管理SVG图标集合、组织代码片段、随机创建配置文件图片、生成CSS动画,甚至将CSS选择器翻译成纯英语。

无论你在寻找什么样的网页设计节省时间,你都有可能在这里找到它。

目录

CSS布局工具

CSS Layout Generator – Create your ideal layout in seconds with this handy online CSS tool.
CSS Layout Generator

Layoutit Grid – Build your ideal CSS Grid with this online tool.
Layoutit Grid css web-based tool free web design example

Compound Grid Generator – Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid.
css Compound Grid Generator web-based tool free web design example

基于Web的CSS工具

SmoothShadow – Use this online tool to generate incredibly smooth CSS box shadows.
SmoothShadow

CSS Stripes Generator – Use this browser-based tool to create beautiful striped patterns.
CSS Stripes Generator

Neumorphism.io – A tool for creating Soft-UI CSS code.
Neumorphism css web-based tool free web design example

zerodivs.com – Try this experimental UI editor for creating illustrations based applying styles (CSS) on a single HTML element.
css experimental UI editor  web-based tool free web design example

CSS clip-path Editor – This online tool will help you generate an awesome clip path.
CSS clip-path Editor web-based tool free web design example

Glassmorphism CSS Generator – Create a beautiful glass effect with the help of this handy tool.
Glassmorphism CSS Generator

Glassmorphism CSS Effect Generator – Create your own stunning glass effect, copy the code and be on your way.
Glassmorphism CSS Effect Generator

基于Web的模式生成器

CSS Background Patterns – Find your new favorite background with this free CSS generator.
CSS background patterns

Basic Pattern Repository – A collection of simple and seamless SVG patterns that you can copy and paste into projects.
Basic Pattern Repository

patternico – A web-based tool for creating seamless patterns for your projects.
patternico patterns web-based tool free web design example

PatternPad – An app for creating exportable patterns using endless variations.
PatternPad web-based tool free web design example

Beautiful Dingbats Pattern Generator – Create seamless, royalty-free patterns to use in your projects.
Beautiful Dingbats Pattern Generator web-based tool free web design example

CSS Background Patterns – Generate your own seamless background pattern.
CSS Background Patterns web-based tool free web design example

基于Web的颜色和;梯度生成器和;工具

couleur.io – An online generator to help you create “harmonizing” color palettes.
couleur.io

Parametric Color Mixer – Create your own custom color palette and export to CSS or SVG.
Parametric Color Mixer web-based tool free web design example

Advanced CSS Gradient Editor – This free CSS gradient design app is full of useful features.
Advanced CSS Gradient Editor

uiGradients – Find your favorite gradients with this collection of copy-and-paste styles.
uiGradients

conic.css – A collection of copy-and-paste conic gradients to enhance your projects.
conic.css

Gradihunt – Find or generate the perfect CSS gradient for your projects.
Gradihunt CSS gradient web-based tool free web design example

Multicolor CSS Gradients – Free, lightweight, colorful and responsive backgrounds for use in your projects.
Multicolor CSS Gradients web-based tool free web design example

grxdients – A CSS library that makes adding gradients to your projects incredibly simple.
 web-based tool free web design example

基于Web的SVG工具

Faux Code Generator – A tool for turning real code (GitHub Gists) into a faux code SVG.
Faux Code Generator web-based tool free web design example

Convert2Svg – A Simple web-based tool for converting multi-colored images to SVG files.
Convert2Svg web-based tool free web design example

Warp SVG Online – Upload your SVG file and use this online tool to warp it.
Warp SVG Online web-based tool free web design example

SVGBox – This API makes it dead-simple to include SVG icons in your projects.
SVGBox svg api web-based tool free web design example

装载机和;微调器工具

Loader Generator – Build a custom loader for your React app with this tool.
Loader Generator react css web-based tool free web design example

Spinners React – A tool for (you guessed it) generating animated spinners in React.
 web-based tool free web design example

屏幕截图生成器

Limus – Upload your screen shots and this tool will let you view and save them at different angles.
Spinners React css web-based tool free web design example

Snippet Shot – A web-based tool that generates screenshots from you code snippets.
Snippet Shot web-based tool free web design example

图标生成器;工具

Iconify – Upload your image and let this tool generate a custom set of app icons.
Iconify

FaviconCheck – This tool will show you how your site’s favicon looks on various devices.
FaviconCheck

IconKitchen – Create your own custom app icons with this online generator.
IconKitchen

Iconset – An app for better organizing your SVG icons.
Iconset SVG icons web-based tool free web design example

SVG Favicon Maker – Create your own, scalable SVG favicon with this online tool.
SVG Favicon Maker web-based tool free web design example

Motion – Create animated icons with this app, available for Mac OS and Windows.
Motion animated icons web-based tool free web design example

Iconsizer – Generate the right icon resolutions for all devices.
Iconsizer web-based tool free web design example

基于Web的排版;字体工具

Fluid Typography – Create text that scales with the window size, so that your headings look great on any screen.
Fluid typography

3DPop – This online tool will help you generate awesome 3D text effects using CSS.
3DPop

Type Scale Clamp Generator – Use this tool to create the perfect responsive typographic scale with CSS.
Type Scale Clamp Generator

A Variable Fonts Primer – Learn everything you need to take advantage of this typographic phenomenon.
A Variable Fonts Primer web-based tool free web design example

Capsize – An online tool for defining typography in CSS.
Capsize web-based tool free web design example

useFonts – Try out this design tool to help designers and developers select their perfect fonts.
useFonts web-based tool free web design example

The good line-height – Use this tool to easily calculate the perfect CSS line height for each text size in your scale.
line-height css typography web-based tool free web design example

Whitespaces – A handy copy & paste resource for various space types.
Whitespaces web-based tool free web design example

图像过滤器应用程序;工具

CSS Filters Generator – Add compelling filter effects to your images with this online tool.
CSS Filters Generator

CSS Photo Filters – Upload your image and this tool provides a whopping 36 CSS filters you can use.
CSS Photo Filters

Tail Blend – Use this online tool to create beautiful photo blend modes for Tailwind CSS.
Tail Blend

基于Web的动画工具

Animockup – Use this tool to create free animated mockups of popular devices.
Animockup free animated mockups web-based tool free web design example

Keyframes.app – Generate awesome CSS animations with this web-based tool.
Keyframes CSS animations web-based tool free web design example

Easings – Test and create Cubic Bezier easing curves with this generator.
Easings Cubic Bezier easing curves web-based tool free web design example

配置文件图片(&P);化身生成器

Big Heads – A library that randomly generates characters for your apps and games.
Big Heads characters web-based tool free web design example

Multiavatar – Generate your own custom avatar with this tool.
Multiavatar custom avatar web-based tool free web design example

基于Web的学习工具

Learn CSS Positioning – An interactive article to help you learn how to position elements.
Learn CSS Positioning web-based tool free web design example

iHateRegex – A regular expression cheat sheet for haters.
regular expression cheat sheet web-based tool free web design example

Learn Box Alignment – Get the lowdown on how alignment works for both CSS Grid and Flexbox.
Learn Box Alignment web-based tool free web design example

Grid Cheatsheet – A handy reference for learning the intricacies of CSS Grid.
css Grid Cheatsheet web-based tool free web design example

Git Command Explorer – A handy resource to help you find just the right Git command.
Git Command Explorer web-based tool free web design example

Host Rider – Use this fun CSS game to learn more about the justify-content property.
Host Rider web-based tool free web design example

记笔记(&A);文本编辑器工具

Writty – A free, open-source text editor with multiple styles and export options.
Writty web-based tool free web design example

Markably – Try out this an elegant rich text editor with full markdown support. Available as both browser-based and native apps.
Markably web-based tool free web design example

Scribbble – A writing tool that focuses on simplicity, so that you can focus on your work.
Scribbble web-based tool free web design example

有用的基于Web的工具

Quick & Simple Image Placeholder – Use this tool to generate colorful image placeholders.
Image Placeholder web-based tool free web design example

Image Speed Test – A tool that analyzes your site’s images and offers suggestions to improve performance.
Image Speed Test web-based tool free web design example

SocialSizes.io – A resource for social media image and video sizes – complete with downloadable templates.
SocialSizes social media image and video sizes web-based tool free web design example

共享(&A);显示代码段

Snapcode – An online tool for storing and organizing code snippets.
Snapcode

Ray.so – Use this tool to create beautiful images of your code snippets.
Ray.so

Indiepen – Share embedded code snippets with this privacy-friendly code example solution.
Indiepen

GitHub工具和;应用程序

Repobeats – Add highly-visual insights to your GitHub repositories with this tool.
Repobeats

README Gen – Use this tool to generate a professional README file for your GitHub projects.
README Gen

GitHub Profile README Generator – Use this tool to build your personal GitHub profile.
GitHub Profile README Generator

GitHub Socialify – Showcase your project to the world by generating a beautiful project image with this tool.
GitHub Socialify web-based tool free web design example

Memo App – Write notes in a GitHub Gist.
Memo App web-based tool free web design example

…最后…

Dev Dad Jokes – A silly little app that adds a little extra humour into the world of developers.
Dev Dad Jokes


The Useless Web – Have some free time? Why not use this resource to find some useless websites to visit?
The Useless Web web-based tool free web design example

来源:https://speckyboy.com/tiny-little-tools-web-design/

0