CSS Sprite生成器 - 图片合并与定位代码生成
上传多张小图标,自动合并成一张Sprite图,并生成对应CSS背景定位代码,提升加载性能。
UD5工具箱
ANSI 16色是终端模拟器中最基础的颜色标准,包含8种标准色(黑、红、绿、黄、蓝、品红、青、白)和8种对应的高亮版本。几乎所有终端应用都支持这16种颜色,是终端配色的核心。
Xresources:将内容添加到 ~/.Xresources 并运行 xrdb -merge ~/.Xresources。Kitty:复制到 ~/.config/kitty/kitty.conf。iTerm2:在 Preferences > Profiles > Colors 中导入 .itermcolors 文件。
Background 是终端窗口的实际背景色,Color0 是 ANSI "黑色"的显示颜色。许多方案将它们设为相同值,但也可以分别设置以创建更丰富的视觉效果。两者独立可调。
我们使用 WCAG 标准计算前景色与背景色的对比度比率。≥7:1 为优秀(AAA级),≥4.5:1 为良好(AA级),低于4.5:1 可能影响可读性。深色背景配浅色文字通常能达到较好的对比度。
本工具导出的配色方案兼容主流终端:iTerm2、Kitty、Alacritty、Windows Terminal、GNOME Terminal、Konsole、rxvt-unicode、st 等。选择对应的导出格式即可直接使用。
优质终端配色应保证:①足够的对比度确保代码可读性;②颜色之间区分明显(避免红绿混淆);③避免过于饱和的颜色以减少视觉疲劳;④保持整体色调和谐统一。可参考 Nord、Dracula 等经典方案。
上传多张小图标,自动合并成一张Sprite图,并生成对应CSS背景定位代码,提升加载性能。
添加本地视频和SRT字幕文件,预览并生成带硬字幕的新视频文件。
输入Proto定义和Base64编码的protobuf数据,在线解码为JSON,辅助分析二进制通信内容。
给定一个边长或对角线,根据常见比例计算另一边长或分辨率。
输入URL提取OG标签,模拟Facebook/Twitter/LinkedIn卡片显示效果,优化链接分享。
通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。
粘贴HTML和CSS,工具将尝试分析并为你抽取首屏内联样式,辅助性能优化。
通过滑块调节LCP、FID、CLS等指标值,实时显示对应的谷歌核心网页指标评分与颜色。
将上传的小文件或文本转换为可直接嵌入HTML/CSS的data: URI格式。
选择模板,调节颜色与动画,生成美观的单选/复选框样式代码。
在等轴测网格上绘制建筑或场景,支持多图层及调色板,导出等轴测像素艺术作品。
选择卡片、列表或表格布局,生成对应的灰色闪烁骨架屏HTML/CSS代码。
拖放小图片或文本文件,转换为可嵌入HTML/CSS的Data URI,设置MIME类型。
输入进程列表,同时对比先来先服务、短作业优先和轮转调度算法的甘特图和平均等待时间。
添加楼层请求,观察电梯在不同调度算法下的移动轨迹和等待时间。
浏览数十种纯CSS加载旋转器,点击复制代码或自定义颜色尺寸,节省开发时间。
粘贴以data:开头的链接,自动判断MIME类型并预览内容,或提供下载按钮。
添加进程(到达时间、运行时间),并行动画演示先来先服务、短作业优先、轮转等调度算法的执行。
动画展示滑动窗口和令牌桶算法如何限制API请求速率,对比两者差异。
为按钮或卡片配置悬停时的边框、阴影、缩放、颜色等动画,自动生成CSS transition代码。
加载测试页面,实时显示Largest Contentful Paint等核心指标,了解加载体验。
输入LaTeX命令如 \alpha 或 \sum,即时渲染为高清可下载的SVG或PNG图片。
利用浏览器原生API录制屏幕共享或窗口,选择音频源,导出为WebM视频。
拖拽改变容器宽度,观察使用container-type和@container规则的元素如何自适应样式。
点击节点添加路径权重,运行Dijkstra算法高亮从起点到所有节点的最短距离和路径。
粘贴SVG代码,压缩并编码为data URI,用于background-image或img。
应用Sobel或其他卷积核实施边缘检测,提取图像轮廓线条,可设置阈值,导出黑白线稿。
输入第三方域名,生成<link rel='preconnect'>或dns-prefetch等资源提示标签。
计算Whirlpool算法哈希值,输出512位高强度摘要,用于数据完整性校验和密码学实践。
拖拽构建阶段与任务,配置触发条件,生成对应的GitLab CI或GitHub Actions YAML代码。