深圳市府.TCL.芯海科技.联通国际供应商

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


相关资讯

10个高效且实用的网站设计技巧

  • 2017-07-20

网站设计中经常会遇到一些问题,那是因为你在设计的时没... 查看详情

深圳小程序网站开发

  • 2021-07-02

跟着互联网技能的打开,直播作为一种新的营销推广方法逐... 查看详情

高端网页设计中恰当的留白有哪些好处

  • 2017-07-20

在过去的几年中,留白在网页设计中被低估了。尽管许多人... 查看详情

电子商务网站设计的UI灵感

  • 2017-07-20

今天分享一下电子商务网站设计的UI。灵感UI灵感的新领... 查看详情

东莞网站建设分享—CALEM高端网站设计

  • 2017-07-20

【维仆品牌网络】专注高端网站设计定制,服务包含高端网... 查看详情

深圳网站建设公司分享精美的网页设计

  • 2017-07-20

精美的网页设计通常需要更多的灵感和创意,如果您正准备... 查看详情

8个网页设计神话破灭:旧观念和现代思想的碰撞

  • 2017-07-20

关于网页设计的一些想法似乎永远不会消失,即使它们不再... 查看详情

服装品牌网站设计分享

  • 2017-07-20

时尚、大气、创意、精细等是服装服饰行业网站设计的重... 查看详情

深圳网站建设公司分享网站设计技巧

  • 2017-07-20

从事网站设计工作16年的我们非常清楚,好的网站设计除了... 查看详情

门户网站建设需要哪些功能呢?

  • 2017-07-20

门户网站建设需要哪些功能呢?门户网站是联接一些互联网... 查看详情


联系

  • 地址:深圳市南山区粤海街道华大科技大厦北座502
  • 热线:0755-8672-1169
  • 直线:137-2893-6255
  • Email: 2503595831@qq.com
  • 周一 - 周五:10:00 am - 7:30 pm
    周六 - 周日:休整
  • 服务城市: 深圳   广州   香港   成都   台湾   珠海   汕头    甘肃   中山   佛山   长沙    东莞
  • 深圳区域: 罗湖   福田   南山   盐田   宝安   龙岗   龙华   光明   大鹏   坂田   西乡   科技园