chisdy.A.Pro

本文转自：《前端观察》

整理自：List of Really Useful Tools For CSS3 Developers
中文：CSS3开发工具收集

通常来说，CSS非常简单。但是当浏览器厂商开始实现CSS3特性，问题开始变得有些复杂了。不难，只是有些复杂。这可能包括两个方面：首先有些心得CSS3属性(比如，transition、渐变、transform等)不是那么简单，其次我们不得不使用浏览器厂商指定扩展。直到你最喜欢用的IDE原生支持CSS3，你最好的伙伴将是CSS3生成器、手册、参考指南以及基于JS的方案。这正是本文要推荐的，这里将收集能够助你学习和使用CSS3的真正有用的工具。

生成器

• CSS3 Please!跨浏览器的CSS规则生成器，支持：border-radius、box-shadow、渐变(线性)、rgba色彩、transform (旋转)、transition和@font-face。
• CSS3 生成器支持border radius、box shadow、text shadow、RGBA、@font-face、多列、box resize、box sizing 和outline.
• CSS3 Sandbox有一些列的CSS3生成器：线性渐变、放射渐变、文字阴影、盒阴影、Transforms和文字描边。
• @font-face生成器来自于Font Squirrel的很好用的CSS3 @font-face 生成器。
• CSS3渐变生成器为Firefox和Webkit浏览器生成线性渐变。
• CSS 圆角生成用于Firefox、Webkit和标准CSS3语法的“border-radius”属性。
• Webkit CSS3 生成器简单的助你理解Webkit引入的CSS3特性。
• CSS3 学习工具动态为你的浏览器获取私有前缀并检测该属性是否被它支持。

Continue reading »

最近在弄网站的时候出现个问题，也是之前一直没去解决的，一个非常简单的问题，花了我几个小时的时间一步步去查找，如果平时的知识点能好好的积累的话，根本没必要花这样的冤枉时间，NND。

我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西，说实话挺讨厌float的，老是需要清除浮动以至于得到满意的效果。用position的话，不仅可以考虑在去掉css的情况下html文档的重点输出顺序，还可以减少不必要的嵌套代码，更重要的就是自由，爱放哪放哪。

这次的问题出现在position:relative同辈元素的z-index设置上，一般同辈元素都是靠z-index去定位层级，z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素，在不设置z-index值的情况下，因为#ibanner的html输出在#header的后面，所以#ibanner层对比#header层来说是居上叠加的，看Demo1

Demo1在IE(IE6、IE7、IE8，Jquery紧支持IE6+)浏览器下，很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner，跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header，没理由啊，想不通，后来看了14px发布的《层叠加的五条叠加法则》后才明白过来，原来白为IE鼓掌了，最后变成又是IE的问题了。

接下来最终目的是要把.nav的层级提高，那么只需要搞定IE就行了，这个就简单了，设置#header跟#ibanner的z-index值就OK了。看Demo2（中间迷失了一个多小时，以为#ibanner设置z-index值就OK了，一直在测试就是不行，还用上了判断为IE浏览器的时候，#ibanner的z-index值为-1，太扯了，太瞎了。还有个可能是jquery的问题。）

我是明白过来了，估计看这篇文章的人一下子反应不过来，去看下14px发布的《层叠加的五条叠加法则》就清楚了，自己测试摸索吧，这样才记得牢。

对于网店来说，表单的设计是很重要的，无论是注册，登录，还是订购，都是吸引访客进行下一步操作的重要因素。那么，从table布局过度到div+css及合理语义化布局后，表单的设计不再就几个tr，td死死的框着，可以考虑表单的便捷及亲和力可用性，以下便介绍几个例子，重新温习下：

1、Fancy Form Design Using CSS

这篇文章相信很多人都看过了，文章很长，主要介绍了构建表单的标签应用，布局及如何用CSS去控制，非常值得学习。

2、StylePhreak Simple CSS Form
3、Who says CSS forms can’t be pretty?
4、Man in Blue: Form Examples
5、CSS Play – A form with style
6、The Form Garden
7、Prettier Accessible Forms
8、HTML form effects with CSS
9、A 2 column CSS form layout
10、25 Stylish Examples of Web Forms

有介绍25个不错的表单形式

http://wufoo.com/ http://www.phpform.org/ 两个表单设计网站，非常方便。