Web 设计师不可错过的 25+ CSS 工具

   2016-09-18 0
核心提示:  当涉及到简化 CSS 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 CSS 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。当涉及到执行一些重复的 CSS 标签时,这些

  当涉及到简化 CSS 设计和开发相关的工作时,工具总能创造奇迹。值得指出的是,绝大多数的网页设计者和开发人员对不同的 CSS 工具都感到兴奋,这些工具能帮助他们更快的制作功能完善又十分完美的网站和网页应用。当涉及到执行一些重复的 CSS 标签时,这些值得推荐的 CSS 工具是最好的选择。在本文中,我为你收集 25+ 个 CSS 工具,它们将通过最大限度的发挥 CSS 的功能来帮助你建立神奇的网站。来,让我们一起来看看吧!

  Normalize.css

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

  CSS Type Set

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

  SpritePad

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

  Conditional-CSS

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

  PxtoEM

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

  Templatr

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

  CSScomb

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

  Prefixr

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

  PSD2CSS Online

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

  MoreCSS

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

  CSS Menu Maker

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

  CSS Frame Generator

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

  CSS Redundancy Checker

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

  Awesome Fontstacks

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

  Wufoo

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

  Clean CSS

  Clean CSS 是一个完美的在线工具,使整理和维护选择器属性更加容易快捷。因为选择器整理很容易改变行为,建议使用 Clear CSS 整理你的选择器时要慎重。

  WordOff

  WordOff 是一个令人印象深刻的 HTML 代码清理工具。它可以删除不必要的元素如:<span> , < font> 和 <div>,空格,样式元素和属性。另外它还可以帮你删除空白符和一些会导致 HTML 页面破裂的代码。

  CSS Compressor

  CSS Compressor 是一个可以节省重要带宽的样式压缩工具,有三个层次的压缩选项可以自由选择,我建议你选择“正常”模式。

  CSS Hat

  如果你正在寻找一款可以将 Photoshop 图层样式转换为 CSS3 的工具,那么你一定要试试 CSS Hat。通过这款工具,你只要简单地选择多个图层,就会得到有独立选择器的每个图层的 CSS 代码。

  Kotatsu

  作为一款简单的 HTML 表单生成器,Kotatsu 可以在相同列中的单元格快速简单地附加 classes。

  Htmldevelopertools

  Htmldevelopertools 可以在浏览器窗口中更新服务器上的 CSS 文件。目前,Htmldevelopertools 工作在IIS 和 .NET3.5 环境下,它一定可以成为设计师和开发者最好的工具。

  CSS Text Wrapper

  CSS Text Wrapper 工具让你可以方便地使用多种形状的 HTML 文本域,而不仅仅局限于矩形。你可以任意在文本周围使用折线、曲线或者其它形状。

  Sky CSS Tool

  作为一个不错的在线 CSS 创作工具,Sky CSS 工具能让你不用写冗长的代码就能创建 CSS 类。而这,你仅需要一个兼容 JavaScript 的浏览器,并且让这个工具正常工作就行了。

  Grid Designer 2.4

  如果创建一个指定列数的表格,margin 和 gutter 已经变成一件充满压力的工作,Grid Designer 2.4 是适合的工具。除了可以在工具里面指定样式,你还可以利用标签的灵活性,对横跨的列做设计。

  WebPutty

  作为一个开源的工具, WebPutty 允许你在线编辑预览 CSS,而这仅仅需要你做完之后单击发布即可。

  Replace CSS Colors- Editor

  这是一个令人难以置信的工具,它允许你不去修改一条 CSS 代码而改变网站的整个配色方案。你需要做的只是选择一个本地的 CSS 文件,替换它的颜色并且立即下载新的 CSS 文件。

  CSS Gradient Generator

  如果你不习惯使用 Adobe PS 图象处理软件来制作渐变图,那么就来试试使用 CSS 渐变生成器工具吧。有了这个工具,你甚至可以利用一个专有的链接来灵活地保存你的所有的渐变图。

  当你的身边有合适的工具时,CSS 的工作就变得既简单而又令人兴奋。希望上述各有特色的工具,能够对你探索 CSS 的过程有所帮助。

  原文地址:http://www.fromdev.com/2015/07/best-css-tools-web-design.html

 
标签: CSS
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • Bootstrap.css 中请求googleapis.com/css?famil
    问题描述: Web中引入bootstrap.css中头部有访问Google服务器的请求 @import url("//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700");     国内访问不稳定,页面反应慢解决:将请求结果保存下来,放到本地,重新声明请求1.请求http:
    03-16
  • React , TypeScript,  CSS Module , Less , Antd 遇到的坑
    React , TypeScript, CSS Module , Less , Ant
    因为React 本身的脚手架自身在webpack中已经做了对CSS Module 的配置,因最近遇到了很多坑,所以从头整理了一遍 使用版本"react": "^16.13.1","antd": "^4.4.0","typescript": "~3.7.2","webpack": "4.42.0","less": "^3
    03-08
  • react 运行报错 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8.
    react 运行报错 Error: PostCSS plugin postcss
    postcss-pxtorem使用方法:https://www.cnblogs.com/liangziaha/p/13636936.html 这里报错 postcss-pxtorem 需要 8. 我以为要使用postcss-pxtorem 8.以上的版本就去看了一下postcss-pxtorem版本最高才6.0  这里降低  postcss-pxtorem@5.1.1npm i postcs
    03-08
  • React中jquery引用 react 引入css
    React中jquery引用 react 引入css
    在React中引用Jquery比较好玩,获取元素的数据更多1.引入方法举例: 1 import $ from 'jquery'; 23 import { Button } from 'antd'; 45 class testJquery extends React.Component { 67   constructor(props) { 8     super(props); 9 10     this.
    03-08
  • Vue PostCSS的使用介绍
    目录PostCSS使用安装依赖运行使用第三方插件autoprefixer使用第三方插件postcss-preset-env使用第三方插件postcss-pxtorem运行的新方式PostCSSpostcss 一种对css编译的工具,类似babel对js的处理,常见的功能如:1 . 使用下一代css语法2 . 自动补全浏览器前缀
    03-08
  • css实现弹出框 css弹出菜单
    弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的。其实就是用到了css里面的一个:target选择器+visibility属性。URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标
    03-08
  • jfinal框架页面找不到相关css,js文件404
    在JFinalConfig中添加配置: @Overridepublic void configHandler(Handlers handlers) {handlers.add(new ContextPathHandler());}页面中添加:base href="${CONTEXT_PATH}/"/之前页面找不到资源,把tomcat工程路径去掉了(path=""),这样暂时解决了问题推荐
    03-08
  • 纯CSS3实现的一些酷炫效果 css实现炫酷背景
    纯CSS3实现的一些酷炫效果 css实现炫酷背景
      之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的。一、笑脸猫动画实现效果如下:这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整。1.先看下页面结构:bodydiv class="container"!-- 脸 --div
    03-08
  • 移动端CSS底部固定和fixed定位在ios上的bug
    fixed定位在ios上的bugcss三栏布局假设我们页面的 HTML 结构是这样: div class="wrapper"div class="content"!-- 页面主体内容区域 --/divdiv class="footer"!-- 需要做到 Sticky Footer 效果的页脚 --/div/div方法1.:absolute通过绝对定位处理应该是常见的
    03-08
  • css实现图片翻转 css使图片旋转
    !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml"headmeta http-equiv="Content-Type" content="text/h
    03-08
点击排行