3个适合网页设计师的神奇新鲜工具

我喜欢关注每个不断发展的单一用途网络应用程序世界，这些应用程序专门用于使您作为网页设计师的工作更轻松一些。今天我们将看看我最近发现的有趣和有用的三种工具。我们首先来看看Colllor，这是将单一颜色变成许多颜色的好方法。接下来我们将跳转到Warp CSS并创建一些令人惊讶的CSS排版，你可能甚至认为不可能。最后，我们将查看Bear CSS，这是一种基于HTML快速生成入门样式表的方法。让我们开始吧！

我们要看的第一个新工具是Colllor，一个有趣的应用程序，可以帮助您为调色板添加一些变化。这里的概念很简单：“将一种颜色变成另一种颜色。”让我们看看它是如何工作的。

怎么运行的

第一步只是选择一种颜色。获取该起始颜色，输入并点击“选择颜色”按钮。您可以输入十六进制代码甚至标准命名颜色。或者，您可以点击随机颜色按钮，只是为了给它一个试驾。从这里输出相当令人印象深刻。你会得到四个水平条，里面装有新颜色样本可供选择：阴影/色调，色调，混合等。您的原始颜色明确突出显示以供参考。您将看到超过50个相关样本，每个样本都有很好的标签，具有很酷的3D悬停效果，只需单击一下即可复制到剪贴板。

我对Colllor的看法

我是色彩应用程序的傻瓜，这个吸引我立刻。它的设计和互动性非常好，足以让寻找色彩成为一种非常愉快的体验。我一开始有点困惑，为什么没有包括生成互补色板等标准选项，但是有很多应用程序都有这个功能，我喜欢Colllor寻求独特的方法。一般来说，为了找到单一颜色的不同色调，我使用0到255，但是，该网站往往非常缓慢。 Colllor既快又多功能。特别独特的是“混合”选项，它允许您选择两种颜色，以查看两者之间的各种颜色的渐变。另一个效果很好的是“复制到剪贴板”功能。许多颜色实用程序感觉需要在复制颜色时包含“＃”，这对CSS很有用，但对Photoshop不好（CS6解决了这个问题）。现在，我更喜欢遗漏符号，这是Colllor采取的路线。


CSS Warp

CSS Warp是一个疯狂的工具，允许您创建遵循复杂路径的实时Web类型。该工具与Illustrator中的路径类型功能非常相似，因此工作流程应该足够熟悉，以便您快速获取它。

怎么运行的

让我们通过一个测试来看看它是如何工作的。你要做的第一件事是输入一些文字。因为最终生成的代码可能非常庞大（我们将在一分钟内讨论这个问题），所以我建议您保持简短而甜蜜的文本。完成后，单击“扭曲”按钮。下一步是定义您的类型将遵循的曲线。这里的选项非常灵活，您可以定义自己的贝塞尔风格路径或选择一个圆圈。这些点默认创建圆形曲线，但应用程序底部有一个选项可将其更改为锐角。您可以在所有这些控件旁边的小预览窗口中进行成型。这会根据您所做的任何更改进行更新，因此您可以随时准确地确定最终产品的外观。您还可以定义有关字体的几个选项，包括设置大小，行高，字距*和字体的功能。我喜欢您可以在此处选择Google Web字体库。您还可以选择文本如何与路径对齐。我在这里使用术语“字距调整”，因为这是实际应用程序中控件的名称。它实际上是贴错标签，这个滑块确实控制了类型的跟踪。差异很重要。阅读本文以获取更多信息。

完成所有操作并按照您希望的方式输入类型后，单击预览上方的“生成HTML”按钮，以获取要复制并粘贴到代码中的文本片段。

关于CSS Warp的思考

我可以诚实地说，我从未见过使用实时网络文本将这一技巧搞得很好的另一种工具。结果令人印象深刻，根本不是您想要手工完成的事情。我喜欢它，当开发人员主动突破网络上的可能性并自由分配他们的工作时。我唯一真正的问题是完全脱离了开发人员的控制。 CSS和HTML实际上没有用于沿路径键入的内置功能，因此唯一的方法是将每个字母包裹在一个范围内，然后独立定位和旋转字母。这会导致大量代码难以理解。正如我所说，开发人员实在无法帮助，其他针对单个字母的工具（如Kern.js）也被迫以相同的方式工作。总的来说，我对整个应用程序的开发程度感到震惊。获得您想要的效果非常容易，并且在此过程中有很多选项可供调整。还有一个JavaScript版本，你应该检查。

Bear CSS

Bear CSS只做一件事：当你上传HTML文件时，它会提供一个入门样式表。它不能完成网页样式的工作，它只是让你开始为你输入明显的样式钩子。

怎么运行的

Bear CSS并不需要您的任何思考或努力。事实上，您所做的就是上传HTML文档。上传HTML文档后，就可以点击“下载CSS”按钮了。我抓了一个随机的文件，我只是为了测试它并收到以下输出。