网页设计师的神奇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”按钮了。我抓了一个随机的文件,我只是为了测试它并收到以下输出。

标签: none

联系我们期待您的来信!我们会认真诚实的对待每一位客户,有来信必将得到我们的回复!

谢谢您能联系我们!
嘿,我来帮您!