CSS 生成器

上周，我们研究了 CSS 审计工具，本周我们将研究适用于所有 CSS 的有用生成器：从渐变到阴影和贝塞尔曲线到三角形和字体比例。 只需为您的工具带提供一些有用的工具，以保持关闭。

CSS 阴影生成器

正在寻找一种能够自动生成 CSS 代码以实现真正平滑、分层的 box-shadow的工具？ 好吧，你会爱上 SmoothShadow。 受 Tobias Ahlin Bjerrome 撰写的一篇文章的启发，这个漂亮的工具旨在帮助任何人在现场生成他们需要的代码。

一旦你尝试过，很难不使用它。 这个小工具允许您在视觉上设计一个分层的平滑盒子阴影，还可以使用单独的缓动曲线调整 alpha、偏移和模糊。 而且它变得更好：该工具的创建者 Philipp Brumm 还发布了 SmoothShadow 作为 Figma 插件，因此您可以像一直想要的那样优化您的工作流程。

CSS 边框半径生成器

当我们考虑border-radius时，我们通常会考虑一些简单的值——可能是 8px 或 11px，或者可能是 16px。 然而， border-radius可能非常花哨，而 fancy-border-radius 生成器可以让您轻松生成它们。 该工具通过组合使用八个值，不仅可以显示普通圆形，还可以显示有机形状。 本质上，我们正在创建的是构建最终形状的重叠椭圆。 该工具也可用作 CLI 工具，因此您也可以在本地运行它。

三次贝塞尔曲线生成器

有时动画感觉不太对劲，不是吗？ 也许持续时间已经关闭，或者宽松政策很古怪，弄清楚它可能需要相当长的时间。 使用 Lea Verou 的三次贝塞尔曲线，您可以预览和比较动画，减慢它们的速度，甚至在视觉上调整它们。 然后复制粘贴 CSS 片段以立即插入您的项目。

如果您需要基本或复杂的 CSS @keyframe 动画，Keyframes.app 提供了一个类似于视频编辑软件的可视时间线编辑器。 您可以添加步骤、更改大小和位置、应用变换和颜色更改，还可以让 CSS 进行复制粘贴。 啊，不要忘记 Chrome 和 Firefox 中的动画面板也用于调试。

缓动渐变

对于渐变，我们经常依赖线性渐变，从一种颜色过渡到另一种颜色。 然而，线性渐变在它们开始或结束的地方有硬边。 有一种方法可以使渐变稍微好一点，使用缓动函数。 因此 Andreas Larsen 构建了一个小编辑器，Easing Gradients Editor，它允许我们在 CSS 中创建和预览缓动渐变。 该工具也可用作 Sketch 插件和 PostCSS 插件。 您可以使用颜色选择器，但遗憾的是还不能添加实际的 HEX 颜色值。

数据可视化调色板

有时您需要非常特定类型的颜色来完成非常特定的任务。 例如，如果你正在处理一个数据可视化项目——例如饼图、分组条形图、地图——你可能需要一系列视觉上等距的颜色。 那时 LearnUI 数据颜色选择器会变得非常有用。 在这种情况下，最好使用一系列色调，以便用户可以更快地识别差异。 区分黄色和橙色确实比区分蓝色和 blue-but-15%-lighter 更容易。

使用该工具，您可以选择所需的颜色数量以及是否需要浅色或深色背景色，并选择是否需要默认调色板、单一色调调色板或发散色标。 一旦你有了它，你可以复制十六进制值并将它们导出为 SVG，以便在 Sketch、Figma 或 Adob​​e XD 中使用。

LearnUI 还提供了一个可访问的颜色生成器和一个非常漂亮的渐变生成器，具有不同的渐变类型、插值、角度、缓动以及您希望渐变的平滑程度。

从 CSS 颜色阴影到三角形和假数据

想象一下，您只需要找到元素和伪元素的 CSS 三角形样式。 或者也许通过探索给定颜色的色调和阴影来稍微改进调色板。 或者可能为页面的一部分生成线性和径向 CSS 渐变。 无需手动完成所有操作，也无需尝试在整个网络上查找这些 CSS 片段。 你总能在 Omatsuri 上找到它们。

Omatsuri 在日语中的意思是节日，该网站是一个可爱的小节日，由日常使用的开源浏览器工具组成。 在该站点上，您会找到一个三角形生成器、一个颜色阴影生成器、一个渐变生成器、分页器、SVG 压缩器、 SVG → JSX 转换器、一个假数据生成器、CSS 光标和键盘事件代码。 由 Vitaly Rtishchev 和 Vlad Shilov 设计和建造。 该站点的源代码也可用。

具有高对比度生成器的 CSS 叠加

如果你想让文本在背景图像中更加突出，有一个小技巧：你可以在图像顶部使用具有一定不透明度的 CSS linear-gradient叠加来提高颜色对比度。 例如，Spotify 就使用了这种技术。

虽然所有这些只需要一行代码，但仍有一个问题需要回答：如何确定用于叠加层的不透明度？ Optimal Overlay Finder 可帮助您找出答案。 您上传一张图片，输入您的文本并选择您的叠加层和文本颜色，该工具会向您显示叠加层应用于您的图像时的外观预览，以及最佳的叠加层不透明度。 一个很重要的小细节。

CSS 调色板生成器

有很多很棒的工具可以生成你的调色板，但是 Coolors.co 是一个小巧的工具，它足以生成调色板并探索不同的颜色深浅。 您可以从照片或照片拼贴中创建调色板，测试色盲并快速调整色调、饱和度、亮度和温度。 显然，它还具有流行的调色板。

您还可以在两种颜色之间生成渐变调色板，并创建自己的渐变并将其导出为 CSS。 该工具可作为 iOS 应用程序、Adobe 插件和 Chrome 扩展程序使用。

如果你在你的工具箱中需要一些更复杂的渐变，CSSGradient.io 是另一个满足你所有渐变需求的工具——无论是线性渐变还是径向渐变、颜色阴影或渐变背景。

此外，渐变生成器会从您选择的两种颜色中生成 1 到 40 个阶梯渐变。 每个渐变都会自动以 HEX、HSL 和 RGB 格式呈现——您只需单击该值，它就会立即复制到您的剪贴板。

CSS 颜色渐变生成器

手工挑选颜色来制作颜色渐变需要设计经验和对颜色和谐的良好理解。 如果您需要背景或 UI 元素的渐变，但对自己处理任务没有足够的信心（或者如果您赶时间），My Brand New Logo 的人们创建的颜色渐变生成器有得到你的支持。

由颜色渐变算法提供支持，生成器根据您选择的颜色创建平衡良好的渐变。 有四种不同风格的渐变，从微妙到珍珠母效果和强烈的深色渐变。 您可以使用滑块调整渐变，一旦您对结果感到满意，复制粘贴生成的 CSS 代码以在您的项目中使用它。

CSS 类型比例生成器

那么，如果您想创建一个在移动设备和桌面设备上都运行良好的可靠排版系统怎么办？ 通常，您会依赖已建立的排版比例，它为从段落到标题和标题的所有内容提供排版层次结构。 Jeremy Church 的 Type-Scale 是一个很棒的小工具，可以帮助您构建排版比例并将其导出为 CSS。 小比例尺通常适合移动视图，中等比例尺适合桌面视图，大比例尺适合营销网站。

该工具提供了 8 个预定义的和谐字体比例（但您也可以定义自定义比例），从大三到完美五，并生成具有特定几何增量比的字体大小序列。 您可以调整line-height和正文粗细等设置，优化预览文本并获取生成的 CSS — 或使用 CodePen 上的类型样本对其进行编辑。 或者，您也可以查看 Tim Brown 的优秀 ol' ModularScale.com。

另一个可爱的工具是 Jean-Lou Desire 的 Typographic Sc​​ale Calculator，它与 Tim 和 Jeremy 的工具不同，它使用三个定义属性（初始项、增量比率和比例尺中的尺寸数量）生成一个模块化比例尺，类似于音阶。 结果是为设计师提供了更平滑的尺寸，有更多选项可以从中组合更多值 - 例如，对于较小的旁注或大块引用。

行高计算器

如果您正在基于基线网格构建类型比例，则需要回答一个棘手的问题：比例上每个文本大小的正确行高是多少？ Fran Perez 的 Good Line-Height 计算器为您计算。

计算结果只需要输入三个参数：字体大小、乘数和网格行高。 字体大小是确保您的文本很好地位于基线网格上的关键，无论文本大小如何，乘数都可以让您控制行之间的距离，并且网格行高定义了基线网格中每一行的高度。

流体航向发生器

多亏了clamp() ，您可以设置一个随视口增长但不会低于或高于您定义的最小和最大字体大小的字体大小。 为了帮助您为流体标题找到完美的 CSS 值并控制它在不同视口中的缩放方式，Erik Andre Jakobsen 构建了流体排版工具。

您输入最小和最大字体大小以及最小和最大视口宽度，该工具不仅会为您计算clamp()规则，还会向您展示将规范应用于实际标题时的样子。

另一个有用的生成器可以帮助您找出项目的clamp()规则来自Maxime Roudier。 它的工作方式与 Erik 的工具类似，但也允许您选择字体系列和范围，您可以使用滑块进行调整，而不是输入具体的最小值和最大值。

CSS 倾覆生成器

为了在加载过程中尽量减少迷失方向和昂贵的布局变化，我们需要将后备字体与网络字体相匹配。 Monica Dinculescu 的 font-style-matcher 允许我们通过匹配备用字体和预期的 webfont 的 x 高度和宽度来最小化不和谐的变化，我们可以利用 f-mods 对新的 CSS 属性做同样的事情。

默认情况下，许多字体带有预定义的边距和前导，因此如果后备字体和 Web 字体不同，整个布局将发生显着变化。 Capsize 调整字体大小，使大写字母的高度是网格的倍数。 它通过修剪大写字母上方和基线下方的空间来实现。 因此，通过在备用字体和网络字体中保持相同的行高，该工具会生成“幻数”以确保切换是无缝的。

CSS 复杂选择器生成器

想象一下，您需要创建一个项目表。 如果有 3 个或更少的项目，您可能希望将它们保持在同一行，然后跨越两行完整的 6 个和 8 个项目，而只是一个包含 10 个或更多项目的卡片列表。 你会如何建造它？ 虽然这些情况中的许多情况都可以通过 CSS Grid 和 Flexbox 解决，但有时您可能会遇到非常复杂的情况，需要非常复杂的 CSS 选择器。

为此，Drew Minns 为 Quantity Selectors 构建了一个生成器——复杂的 CSS 选择器，它允许根据兄弟元素的数量将样式应用于元素。 例如，当您想要将样式应用于所有元素时，至少有5 个项目和兄弟项目，或者最多 10 个，或者可能介于 3 到 5 个项目之间。

最后的选择器可能并不容易理解，因此有必要确保您在代码中提供正确的解释，说明它的目标是什么。

CSS clip-path生成器

由于clip-path属性，我们可以在 CSS 中通过将元素裁剪为基本形状来创建复杂的形状，无论是简单的圆形、精美的多边形，甚至是 SVG 源。 CSS clip-path器 Clippy 是一个可视化工具，可帮助您直接在浏览器中创建和自定义剪辑路径。

首先，您从 Clippy 的菜单中选择一个形状和一个演示背景。 然后，您可以拖动形状的点来创建您喜欢的任何形状 - 颜色编码的 CSS 不仅会立即反映您的更改，还会突出显示它们，以帮助您了解您的选择如何影响代码。

如果整个clip-path对您来说仍然有点抽象，或者如果您正在寻找如何在实际项目中使用它的酷示例，请务必查看 Mikael Ainalem 使用clip-path创建的弹出效果clip-path 。

CSS 网格布局生成器

CSS 网格布局可能非常简单，但有时您可能想使用 Grid 属性来找出适合您的布局的正确行为。 首先，我们可以使用 Sarah Drasner 的 CSS Grid Generator、Drew Minns 的 Griddy、Ali Alaa 的 CSS Grid Cheat Sheet Generator 和 LenioLabs 的 LayoutIt——它们都允许您定义网格和网格上的容器，以及间隙，以及它会立即生成 CSS。 如果您需要更多有关 Flexbox 的指导，Flexbox Patterns 包含大量示例供您参考。

或者您可以使用单行 CSS 解决方案。 Una Kravets 构建了 1-Line Layouts，它是十种现代 CSS 布局和大小调整技术的集合。 从所有最大的谜团（居中）开始，涵盖从经典的圣杯布局和“解构煎饼”到应用clamp()和尊重纵横比的所有内容，Una 的系列充满了一定会让你的生活变得美好的小花絮作为开发人员更容易。

每种技术都附带一个演示、一个可供修改的 CodePen 以及有关浏览器支持的信息。 Una 还录制了一段视频，在视频中她更详细地解释了每一个奇迹。 无论您是初学者还是专业人士，此资源肯定会派上用场。

CSS 复合网格生成器

复合网格提供了巨大的灵活性和很大的创造力空间。 在一页上由两个或多个任何类型（列、模块化、对称和不对称）的网格组成，它们可以占据单独的区域或重叠。

现在，Michelle Barker 提供了一个小工具，可以帮助您生成复合网格并节省绘制无尽变化的时间：复合网格生成器。 您需要做的就是输入每个网格的列数，它们将被合并到一个复合网格中。 对您的数字工具箱的一个很好的补充。 如果您需要为您的打印项目创建模块化网格、多列网格或手稿网格，模块化网格计算器提供了在 InDesign 中实现它的详尽说明。

CSS 过滤器和混合模式生成器

CSS drop-shadow过滤器有很好的支持，但被低估了——考虑到它可以节省你大量使用box-shadow的时间，这真是太可惜了。

正如 Michelle Barker 在一篇博文中解释的那样， drop-shadow让您可以使用 x-offset、y-offset、模糊半径和颜色的值——就像它更突出的兄弟box-shadow一样。 但是，有一个很大的优势：阴影不对应于元素的边界框（这通常是使用box-shadow时黑客开始的地方），而是对应于图像的不透明部分。 例如，如果您想将投影应用到透明的 PNG 或 SVG 徽标，甚至是剪裁的形状，则是完美的选择。

那里有大量的 CSS 过滤器，所以如果您需要为您的项目找到合适的过滤器集，可以使用 Mads Stoumann 的 CSS 过滤器编辑器来测试所有支持的过滤器，以及 Mads 提供的一些礼物。 显然，CSS 也是动态生成的。

除了过滤器，CSS 混合模式还有很多选项。 如果您想预览一些视觉效果如何协同工作，您可以使用 Rick Metzger 的 CSS Duotone Generator。 该工具包括缩放、间距、模糊和图像不透明度选项，还包括前景和背景图像的所有混合模式。 当然，该工具还可以生成 HTML 和 CSS。

模糊图像占位符生成器

图片占位符是一种在加载图片时提高网站感知性能的有效方法。 在为网络寻找最快、最好看的图像占位符的过程中，Joe Bell 决定自己想出一个解决方案。 结果：占位符。

Plaiceholder 由一组 Node.js 助手提供支持，可将您的图像转换为轻量级、模糊的占位符图像。 有几种方法可供选择：CSS（推荐）、SVG、Base 64、Blurhash 和实验性的 Blurhash 到 CSS。

英雄生成器

您是否厌倦了一遍又一遍地实施同一个英雄？ Sarah Drasner 的英雄生成器可为您提供帮助。 它可以让您根据自己的喜好只需点击几下即可生成响应式英雄。

您可以决定要对主图像应用哪种渐变、渐变减少和标题间距。 如果您希望包含一个按钮，生成器也可以为您提供帮助，包括自定义按钮颜色（包括悬停和渐变颜色）和按钮半径的选项。 一旦您对结果感到满意，您可以复制并粘贴代码并立即在您的项目中使用它。 真正的节省时间！

图像地图生成器

图像地图可让您在图像上创建可点击区域。 如果您想创建图像地图但又不想摆弄坐标来定义可点击区域，imagemaps.net 可以为您提供帮助。

该站点具有图形用户界面，使该过程更加简单。 上传图像后，您可以使用钢笔、矩形和多边形工具来绘制可点击区域。 要自定义它们，最重要的是赋予它们功能，您可以命名每个区域，为其分配链接，并调整其颜色、高度和宽度。 单击“导出”按钮为您提供 HTML 地图和 React 代码，您可以将其复制并粘贴到您的项目中。

CSS 动画生成器

很容易区分一个看起来有点偏离的动画和一个做得很好的动画。 但是手动调整关键帧动画或过渡可能非常耗时。 Animista 提供了一个开箱即用的动画和过渡库。 入口和出口、文本高亮、按钮动作和背景效果有很多预设。 定义动画后，您可以复制粘贴动画的 CSS 片段以及 Autoprefixer 生成的代码。

CSS Wand 提供悬停和加载动画，但您也可以使用 Ladda 动画（带有内置加载指示器的按钮）和 Eric Spinners（与 Vue.js 集成）。 也许你想用 Boop 为悬停过渡添加一个异想天开的转折！ - 请记住使用伪元素进行缩放并尊重选择减少运动的用户的运动偏好。

3D CSS 长方体生成器

Jhey Tompkins 以其有趣的 3D CSS 创作而闻名。 也许您已经看到他的直升机在您移动鼠标时会神奇地变换？ 直升机和其他类似实验的基础是响应式 CSS 长方体，可通过范围 CSS 自定义属性进行控制。

现在，如果您也想将您的 3D 创意变为现实，Jhey 的 3D CSS Cuboid Generator 可以为您提供帮助。 只需调整滑块以确定长方体的高度、宽度、深度和色调，您就已经获得了让物体滚动、扭曲、滑动或任何其他计划所需的代码。 玩得开心！

CSS 涂鸦生成器

我们可以使用 CSS 将最复杂的布局变为现实，但我们也可以生成有趣的艺术品和涂鸦。 元川建了, 一个使用 CSS 绘制图案的 Web 组件。 该组件包括大量实用功能和速记属性。 结果，该组件生成了一个div网格以及纯 CSS。 源代码也可以在 GitHub 上找到。

有用的小 Web 开发助手

如果您在生活中需要更多工具，幸运的是，有很多优秀的 Web 开发人员将他们最喜欢的有用工具收集在一个名为 Tiny Helpers 的地方。 由 Stefan Judis 维护，您一定会找到各种工具：从 API、可访问性和颜色，到字体、性能、正则表达式、SVG 和 Unicode。

当然，在其他平台上分享的内容还有很多，例如 Josh W. Comeau 和 Stefan Judis 本人非常有用的 Twitter 帖子。 无论您一直渴望找到什么可以帮助您更好更快地完成工作，您一定会在那里找到它！

包起来

实际上有数百种资源，我们希望这里列出的一些资源将证明对您的日常工作有用 - 最重要的是帮助您避免一些耗时的日常任务。 快乐生成！