css样式的自动化测试_CSSMatic –使Web设计人员容易使用CSS的自动化工具

CSS是一种非常强大的样式表语言，可让您控制网站的外观。 它提高了设计和更新的效率。 但是从头开始编码总是很困难 。 值得庆幸的是，您可以找到许多小助手，它们通常包含一些使CSS编码更容易的功能。

今天，我想向您介绍CSSMatic ，这是一项完整的服务，可以自动创建一些CSS3功能。

CSSMatic由Freepik的创始人AlejandroSánchezBlanes和JoaquínCuenca（Panoramio） 共同开发，CSSMatic允许您生成通常由人工编写的复杂代码。 我们将研究CSSMatic可以帮助我们实现自动化的四个方面：渐变，边界半径，噪声纹理和框阴影。

1.梯度发生器

Gradient Generator是CSSMatic中最复杂，最完整，可能也是最常用的工具。 它用于从多个可用预设或完全从零开始生成多个颜色渐变，就此而言，您可能对以下有关如何进行的教程感兴趣：

• 使用CSS3创建线性渐变
• 使用CSS3创建圆形和椭圆形渐变
• 使用CSS3创建重复渐变

自定义您的渐变

对于输入选项，有26个随时可用的预设供您使用。 单击任何这些预设时，它将自动加载到颜色滑块中并进行预览。 保存后，您的自定义渐变将存储为新的预设。

在预设下，您可以找到带有多个控制停止的颜色滑块。 单击任何这些点以激活滑块以更改不透明度。 单击任何免费的顶部边框以创建一个新的停止点。 黑色停止点位于顶部，可控制不透明度和渐变位置 。 最低点用于更改渐变颜色和位置 。

（请注意，还有一些静态滑块可让您更改滑块下的不透明度和位置 。）

单击任何停止点将显示一个对话框。 在这里，您可以使用这些点更改第一种或第二种颜色，甚至可以添加另一种或两种颜色。 要添加颜色，请单击底部边框，然后会出现一个新的停止点。

在颜色滑块上，您可以看到“ 反色”按钮，该按钮可用于交换渐变的第一和第二颜色。

渐变方向也有多种选择：从左到右，从上到下，对角向上，对角向下和圆形方向。

还有一些设置可通过滑块或输入精确值来更改色相，饱和度或亮度。 重置按钮可让您从头开始。 以所需方式自定义渐变后，可以将其另存为预设。

梯度输出

使用CSSMatic，您可以选择如何在代码中生成渐变：在CSS或SASS中。 您可以为生成的代码更改几种颜色格式，例如： hex ， hsl ， hsla ， rgb和rgba 。 hsla和rgba使用alpha通道。

如果切换“注释”选项，它将在代码中添加一些注释，以指示哪个浏览器支持渐变。

为了使渐变在IE9中正常工作，可以使用一条指令来切换IE9支持选项。 该指令将让您将“ gradient”类添加到所有相关元素，以下内容将覆盖您HTML规则。

<!--[if gte IE 9]
	<style type="text/css">
		.gradient {
			filter: none;
		}
	</style>
<![endif]-->

2.边界半径

第二个功能是“ 边界半径 ”（ Border Radius） ，可让您轻松操纵形状的角 。 您可以使用滑块或输入一个值。 0px的值表示一个正方形。 px越高，您的角越圆。 角可以一次全部更改（“所有角”），也可以一次更改一个角。

如果要添加边框，只需定义边框宽度或拖动条 。 边框有多种样式，包括：实心，虚线，虚线，双线，凹槽，山脊，插入，起始，继承，隐藏或无。 边框和背景色也可以轻松更改。

3.噪声纹理

噪波纹理可帮助您在Web布局中创建噪波样式。 您可以控制噪声的不透明度，密度以及背景和噪声的颜色。 切换“导出噪声透明”选项将使噪声背景透明。

如果要将噪声下载为图像，请单击“ 下载噪声纹理”按钮。 您还可以在下载之前指定所需的图像尺寸。

4.盒子阴影

最后一个工具是Box Shadow 。 要将模糊的方向更改为水平或垂直，可以使用左侧边栏上的滑块。 模糊的密度和大小由“ 模糊”和“ 扩展半径”工具控制。 您可以选择框的颜色及其阴影。

要轻松更改阴影的透明度或Alpha通道，请使用“颜色”滑块。 而且，如果要制作阴影插图或轮廓，只需切换最下面的工具即可。

对于Border Radius ， Noise Texture和Box Shadow ，创建所需的最终结果后，将代码复制出来以供使用。

最终思想

CSSMatic是一个很好的省时应用程序，在CSS编码方面使您的工作更加轻松。 无论您是CSS的新手还是熟悉CSS的人，它也是一种适合您的工具。 到目前为止，CSSMatic 缺乏文档和说明 ，尤其是Gradient Generator。 第一次偶然发现它时，您可能需要使用工具来解决它们。 让我们知道您是否喜欢它。

翻译自: https://www.hongkiat.com/blog/css-automation-tool-cssmatic/