Pages

Saturday, 23 March 2013

50+个网页开发者必备之CSS工具

CSS工具,对于网页开发人员来说,就像是一盏神奇的灯,能够照亮他们前进的道路——使得他们的开发设计工作变得更加简单和高效。大多数CSS工具使用起来都是十分节约时间的,往往通过点击几个快捷键就能够创建风格独特、功能强大及利于SEO的网站或博客来。这里为大家推荐50多个主要针对网页开发人员的CSS工具(我认为非开发者其实也都可以使用的),它们的功能各有各的特色,涉及的范围也相当的广泛,包括布局、取色、网格设计、图形或文本效果等等。

CSS 布局工具

templatr

这是一个CSS模板生成工具,能够让你不一定要懂得HTML和CSS代码即可自己制作外观十分漂亮的博客或网站模板来。

Free CSS Template Code Generator

一款免费的HTML – CSS模板生成工具,能够帮助你非常快速地生成非表格的三栏式网页布局,这对于我们无论是想学习或者是自己制作网页来说都非常的有用,入手很简单,只需填写几个数值,一个三栏式的网页模板就出来了,然后我们还可以对此模板进行一些个性化的修改。

Firdamatic: 傻瓜式的网页布局开发工具

一个无表格的网页布局生成工具,所谓“傻瓜式”,就是只需要你填写一个表单即可生成你想要的网页布局。

CSS Layout Generator – CSS Portal

CSS Portal也是一个网页布局生成工具,能够制作出可变宽度和固定宽度两种布局,其中还包括头部、页脚和导航栏。

CSS Layout Generator

通过使用 HTML 和 CSS,创建包括头部和页脚在内的一至三栏式网页布局。

Layout Generator

采用CSS 2.0技术,通过使用像素、百分比和em这些单位,创建多栏或网格式的网页布局。

CSS Layout Generator

使用这款工具,我们可以十分方便地对网页模板的整体宽度、头部、页脚等进行调整,调整范围包括固定宽度或可变宽度、头部和页脚高度及是否需要侧边栏等,我们还可以选择文档格式的类型,如XHTML 、HTML strict 或者,效果可以从右边的预览图中观察。

YAML Builder

YAML Builder是一款强大的可视化布局创建工具,只需要简单的设置一下参数和拖拽模块就能快速创建基于YAML的布局。

CSS取色工具

Color Scheme Designer

这款工具以一个轮状的方式来显示颜色, 颜色模式又分为几种,包括complement, traid, tetrad, analogic 以及 accented analogic 等。

Ultimate CSS Gradient Generator

这是一个功能十分强大的CSS过渡颜色编辑及生成工具,能够生成跨浏览器兼容的色彩。

CSS Color Codes

这个工具为我们提供两种取色的方法,第一种可以直接从取色器中选择某种颜色,然后再将从下方显示出来的颜色十六进制值或RGB值复制使用;第二种方法是使用网页安全色,共有216种,直接复制代码就可以使用。

Colors Pallete Generator

Colors Pallete Generator 是一个在线图片配色查看工具,只需要上传图片,或输入图片网址,便可分析出此图片应用的配色方案。图片大小限制在1M以内,支持的格式包括png, .gif, .jpg 和 .jpeg。

CSS Colors

初看此颜色表一点也不起眼,但是当你真正使用之时,你会发现这竟然是一个能提供超过16,000,000种颜色的工具,分为十六进制颜色和RGB颜色两大类。

Gradient Image Maker

这是一个专门用来制作具有渐显色彩效果图片的工具,颜色布局有三种方案(从下图可以看出),包括从上向下过渡、从左向右过渡以及对角相向过渡。允许设定过渡颜色的宽度和高度,开始颜色和结尾颜色,操作简单、直观。

CSS 网格工具

The 1KB CSS Grid

“1KB”其实没别的意思,也就是“轻量级”的意思罢了!要将你的博客或网站设计成一个基于网格的CMS型的内容管理系统吗?这款工具就是专为此而生的。

Variable Grid System

一款 960 CSS 网格布局在线生成工具,以快速著称。

Gridinator

这款工具可以为你生成几种风网格布局,包括 960.gs, Golden Grid, 或 1KB Grid。

Blueprint Grid CSS Generator

一款可生成十分灵活的网格布局的工具。

CSS Grid Calculator

使用 CSS Grid Calculator 可以非常快速地创建一个可视化网页布局。

Grid Designer

Grid Designer 属于一个在线网格设计工具,有很多选项,用于定义列、尺寸和间距。

Em Calculator

Em Calculator 是一个 由JavaScript编写而成的CSS单位转换工具,可以将px像素单位转换为.em 形式的单位。

CSS 导航菜单和按钮生成工具

CSS Menu Maker

一款导航菜单生成工具,可创建跨浏览器兼容的个性化导航菜单。

CSS Menu Generator

一个相当好用的导航菜单按钮生成工具,允许在按钮上加上一些自定义文本,然后会生成对应的HTML和CSS代码,复制即可使用,速度相当快。

My CSS Menu

My CSS Menu 用于自定义跨浏览器的CSS菜单制作。

Tabs Generator

一款选项卡在线生成工具,允许设置的选项很多,包括大小、颜色、角度等,还提供下载。

List-O-Matic

List-O-Matic 是一款用于创建列表布局的工具。

Button Maker Online

一款在线生成80×15 或 88×31 规格按钮的工具。

CSS Button & Text Field Generator

通过相当简单的配置样式和参数,即可一键生成CSS按钮或文本域代码。

CSS 字体或文本工具

Fonttester

Font Tester 是一款字体在线对比工具。

CSS font style

设置字体样式为斜体或倾斜。

Typetester

Typetester 用于在线比较字体效果。

CSS Font and Text Style Wizard

一个十分简单好用的CSS字体和文本格式代码生成工具,提供预览,也可以将生成的代码复制粘贴使用。

CSS Type Set

一款CSS排版工具,可供网页设计和开发者用作网站内容排版学习与测试。

CSS 元素生成和优化工具

CSS Generator

这个工具允许你根据不同的样式表为网站选择一种风格,一边还可以查看预览,相当方便。

CSS Generator

一个文本效果生成工具,从左边可以看出共有12个基本属性值选项,右边提供效果预览,确定所有值后,点击下方的【Generate CSS Code】按钮即可生成一段对应的代码,复制可用。

Cascading Style Sheet CSS Generator

一个CSS样式表生成工具,很简单很容易使用,直接从下拉列表中选取属性值即可,支持生成多个不同的CSS样式表。

quickCSS – Online-CSS-Generator

CSS快速生成工具,只需一个点击即可完成一个样式表的创建,可以设定的属性很多。

Spiffy Corners – Purely CSS Rounded Corners

一个相当简单易用的纯CSS圆角生成工具,提供相应的 CSS 和 HTML 代码。

Clean CSS

一个好用的CSS样式代码整理及优化工具。

Simple CSS

又一个CSS样式表生成工具,提供桌面版下载使用,能够帮你生成独一无二的样式表,你也可以导入已有样式表进行修改。

CSS 精灵工具

CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

CSS – Sprit.es


Spritegen CSS Sprites

只需两步即可生成自己的CSS Sprite,上传图片,再点击【Creste Your Sprite】。

CSS Sprites

把背景图片的拼合任务交给 CSSSprites.com,它会帮你组图并给出单个图片的定位。

Website Performance (CSS Sprite Generator)

提供源图片上传,重复图片合并,大小调整,拼合输出,CSS 输出等选项的控制,支持简体中文。它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS前缀等众多功能。

Spritebox


其它CSS工具

SlickMap CSS


CSS3 Please!


CSS Sorter

CSS Sorter 是一个CSS 文件及规则整理(按字母顺序)工具, 你可以通过复制粘贴CSS、上传CSS样式表或输入文件地址来进行在线整理。

Sky CSS Tool

Sky CSS 用于创建CSS 类别名,可以免去手工书写的麻烦,要求浏览器支持JavaScript。

CSS Table Wizard

使用 CSS Table Wizard 可以测试border边框样式并生成对应代码。

Csstxt

Csstxt 能够帮助你定义文本样式,比如字体大小、字间距等。

MinifyMe

这是一款压缩工具,能够帮助你快速地将CSS 和 JavaScript 文件压缩成一个文件。

Password Generator

文件密码生成工具,通过设置 .htaccess 和 .htpasswd 两个文件来保护其他重要的文件。

XHTML/CSS Markup Generator

快速生成 XHTML 标记语言及 CSS 框架。
原文:noupe