Web 设计的CSS 工具有哪些?

更新日期: 2019-10-03阅读: 1.9k标签: 工具

当涉及到简化 css 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 CSS 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。下面给大家介绍几个CSS工具,它们将通过最大限度的发挥 CSS 的功能来帮助你建立神奇的网站。


1、SpritePad

SpritePad 是另一个创建 CSS 脚本的工具。所有你需要做的仅仅是将图像拖动到网格,你就会得到使用 PNG sprite+CSS 的代码。SpritePad 最大的优势是你不需要手动指定 CSS 样式也不需要使用Adobe Photoshop。


2、Normalize.css

html5 已经准备好了代替 CSS 的今天,Normalize.css 允许浏览器提供各种与今天的 web 设计标准相符的元素。为了让未来的设计者们更容易使用,仅仅盯着这些需要被标准化的样式,Normalize.css 纠正了一系列普通的浏览器不一致的问题,以及附带一些代码注释。


3、Conditional-CSS

Conditional-CSS 是一个出色的样式工具,针对它的特定 CSS 语句,你可使用它的条件逻辑编写易维护的样式。这样做是因为两个原因,一是单独的浏览器,同时也是为了浏览器组。使用 Conditional-CSS 这个免费的开源 CSS 工具,你可以很方便地优化你的 CSS,高效地维护你的 CSS 文件,引入 @import 语句可以灵活地自动扩展。


4、CSS Type Set

对开发者们和设计者们来说,CSS Type Set 作为一款著名的文字设计工具,它允许我们进行交互式的测试和学习风格化 web 内容的方式。在输入文本框内的文本框区域,我们需要输入想要修改的文本,同时你能在旁边查看一个叫“查看 CSS”的文本框查看转换的 CSS 文件。


5、PxtoEM

PXtoEM 是一个优秀的样式工具,让 px 到 em 的转换变得简单而快速。使用该工具,你所需要做仅仅是输入基础字体大小的像素和 PxtoEm 单位,工具会生成一个转换表。这将使你方便快捷地创建弹性的网页设计。


6、Templatr

对于不熟悉 HTML 或者 CSS 的人来说,如果想要制作一个优秀的网站,那么 Templatr 正是你所需要的工具。你可以自由的在其提供的大量布局样式中,批量上传图像和图形元素。用 Templatr 创建的样式可以使用特定的应用快速下载、安装。可被翻译成多种语言是 Templatr 主要优点之一。


7、CSScomb

你可以继续使用 CSScomb 工具来给你的 CSS 属性自动分类。CSScomb 工具最大的好处是它可以有效地与大量流行的文本编辑器一起使用,如Notepad++、Coda。作为一种美化代码的有效工具,CSScomb 的安装配置非常简单,你可以轻松的在线试用 CSScomb,只需简单的复制粘贴代码到所提供的文本框中,然后便可在相邻的窗口中查看整理好的代码。


8、PSD2CSS Online

PSD2CSS Online 是一款可以从 Photoshop 设计图中直接生成网页的高端 CSS 工具。你可以从众多的指南和命名规则中自由的选择如何将 PSD 转换为 (X)HTML 和 CSS。


9、MoreCSS

作为一种面向设计的 JavaScript 库,MoreCSS 允许通过代码创建弹出窗口、选项卡菜单、工具提示、高级列表样式、斑马线表、跨浏览器不透明度样式,并使用自动断字。


10、Prefixr

除了使样式表可以跨浏览器兼容外,Prefixr 是另外一种允许添加浏览器前缀引擎的有趣工具,它可以让你用官方的正式语法代替所有的 CSS3 前缀。这意味着,你不需要记住任何特殊的 CSS3 属性,因为 Prefixr 已经将所有的这些信息构建在程序中了。

11、CSS Menu Maker


使用 CSS Menu Maker 工具可以简单灵活的创建跨浏览器兼容性的定制 CSS 菜单。不管你是否对创建下拉菜单、垂直菜单、折叠菜单、飞出菜单或者其他类型的菜单感兴趣,CSS Menu Maker 都是一个不容错过的好工具。


12、CSS Frame Generator

为了体现 XHTML 的结构,CSS Frame Generator 工具通过一行一行的方式返回 CSS。在开始使用 CSS Frame Generator 工具时,你只需要简单的将 XHTML 代码放在提供的文本框中,然后一名经过培训的CSS Frame Generator 专业人员将把相应的 CSS 框架提供给你。


13、CSS Redundancy Checker

CSS Redundancy Checker是一款可以找到所有 CSS 选择器的工具,而CSS选择器在 HTML 文件中已不再使用,因此可能变得多余。CSS Redundancy Checker 致力于使CSS文件变得简洁,使其最有意义、最精确。


14、Awesome Fontstacks

Awesome Fontstacks 是一款令人印象深刻的CSS工具,它可以批量创建免费的完美匹配 web 的字体。如果你正在寻求 web 排版的创新性,那么 Awesome Fontstacks 不容错过。


15、Wufoo

作为一款卓越的在线表格构建工具,Wufoo 是基于网络的 HTML 表格构建工具,它可以用于创建吸引眼球的基于 XHTML 和 CSS 的表格。无论你是在寻求如何创建在线调查表、联络表或者邀请函,Wufoo 都是一款简单好用的工具。


链接: https://www.fly63.com/article/detial/5626

常用的前端开发者的工具、库和资源

这篇文章简单的分享一套我认为有助于提升开发者工作流的工具集。这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。这个列表包含许多种类的资源,所以这里我将它们分组整理。

web前端程序员代码编辑器推荐

今天给大家分享前端程序员最爱用的代码编辑器,来看看你用哪款?包括:Visual Studio Code、Atom、HBuilder、Sublime Text、Dreamweaver、Brackets、Notepad++

JavaScript常用工具方法封装

Js常用工具方法封装:type 类型判断、Date、Array、String 字符串操作、Number、Http、DOM、Other 其它操作

Node.js 命令行工具的编写

日常开发中,编写 Node.js 命令行工具来完成一些小任务是很常见的操作。其编写也不难,和日常编写 Node.js 代码并无二致。package.json 中的 bin 字段

一百行js代码实现一个校验工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事。规则多,需要校验的字段多,都给我们前端带来巨大的工作量。一个不小心,代码里就出现了不少if else等不可维护的代码。因此,我觉得一个团队或者是一个项目

Licia 支持小程序的 JS 工具库

Licia 是一套在开发中实践积累起来的实用 JavaScript 工具库。该库目前拥有超过 300 个模块,同时支持浏览器、node 及小程序运行环境,提供了包括日期格式化、md5、颜色转换等实用模块,可以极大地提高开发效率。

程序员常用命令行工具

WordGrinder它是一款使用起来很简单,但拥有足够的编写和发布功能的文字编辑器。Proselint:它是一款全能的实时检查工具。GNU Aspell:

Web前端开发工程师常用的工具!

工欲善其身必先利器,作为前端行业的你,如果知道一些好用的软件工具可以帮助他们更好的工作。下面,就给大家分享Web前端开发工程师常用的工具。

用100行代码,完成自己的前端构建工具!

ES2017+,你不再需要纠结于复杂的构建工具技术选型。也不再需要gulp,grunt,yeoman,metalsmith,fis3。以上的这些构建工具,可以脑海中永远划掉。100行代码,你将透视构建工具的本质。

欺骗技术13款开源工具分享

一旦被那些受利益驱使或有政府背景的黑客团伙盯上,在这场不太公平的攻防博弈中,你会明显感到力不从心。他们有充足的时间,有娴熟的技术和丰富的资源,而且只要在无数次的尝试中成功一次就可以大获全胜

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!