Firefox 几乎符合 CSS3 标准

目前的 Firefox 19 都支持很多 CSS3 的属性,而且他们都不需要添加 -moz 前缀(W3C 标准嘛)!以下的 CSS3 都不需要添加前缀:

  1. CSS Gradients
  2. CSS Repeating Gradients
  3. CSS3 3D Transforms
  4. CSS3 Transforms (这个是旋转、缩放)
  5. CSS3 Animation
  6. CSS3 Transitions
  7. rem (root em) units
  8. calc() as CSS unit value
  9. CSS3 Border-radius
  10. CSS3 Box-shadow (4.0 开始免前缀)

上面列表的属性,几乎从 Firefox 16 开始不需要添加 moz 前缀。

本文章只针对某些 CSS3 属性。

[via caniuse.com]

给你的网页添加深度 – V2

之前的post 介绍了怎样用 box-shadow 制造/添加网页的深度。效果嘛,比较单一,只用了 box-shadow。不过,这次我们 V2 的效果应该比较帅点了:

类似半椭圆形的暗影
类似半椭圆形的暗影

方法

1、使用径向渐变(radial-gradient)

不用解释了吧,还不明白就直接看微软的演示

.demo {
    background: -webkit-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), transparent);
    background: -moz-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), transparent);
    background: -o-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), transparent);
    background: -ms-radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), transparent);
    background: radial-gradient(50% 0, farthest-side, rgba(0, 0, 0, .2), transparent);
    background-size: 100% 20px;
    background-repeat: no-repeat;
}

2、解析

一定用到下面2个CSS:

background-size: width height; 决定这个背景图片(径向渐变)的高和宽

background-repeat:no-repeat; 我们只需要一个类似半椭圆形的暗影,不想看见重复嘛

注意:你的游览器需要支持CSS渐变才能看见这些效果

如果要保持设计一致性,应该要用 png/gif图片作为后备,因为 IE10 以下的版本都不支持哦

弹性方框模型

本文章不完整。弹性方框模型是什么,看看演示的Example 3

什么是`弹性方框模型`?
它可以让你控制元素的位置(通常我们都是用 position:absolute),但是如果父元素的高度、宽度,改变的话,子元素又得该。不过,flexbox 可以解决这些问题

看这里容易点明白什么是弹性方框模型
1、HTML5 ROCKS 的详细介绍。(旧语法)
2、flexiejs.com (生成器 – 旧语法)
3、flexplorer (生成器 – 新语法)
4、agektmr.com(生成器 – 新语法)
今天最主要是如何用 HTML 和 CSS3 写个类似 jQuery 的风琴效果

演示:弹性方框模型例子

BUG:
1、不算是 bug,不过 CSS 暂时没 jQuery 这样 slideDown 或者 slideUp。所以只能硬把 height 设置到指定的数值
2、又或者使用 display: block;,不过这样没法使用 transition 这些特效

游览器支持率
什么游览器能使用 Flexbox?请看 http://caniuse.com/flexbox

/* Flexbox 现在还是工作草案,只能玩玩不能放在主网站上。 */


更新 1
根据 w3c.org语法不再是 display: box;。新语法是 display: flex;。新的语法需要 chrome 21 后才支持。

更新 2
解决上面所说的 bug!用 CSS 动画可以制作 jQuery 类似的 slideDown 了,我们可以 animate max-height。例如有个 ul,我们可以这样:

.example ul{
    max-height: 0px;
    overflow: hidden;
    /* 其他CSS都写这儿 */
}
.example:hover ul{
    max-height: 300px; /* 根据元素的高度设置这个数值 */
}

更新3:添加新语法相关的网站,flexplorer + agektmr.com

CSS3 :nth-of-type()

CSS3 :nth-of-type() 选择器

定义和用法

:nth-of-type() 选择特定类型第 n 个元素(指定类型)。

提示::nth-child() 有一样的功能,一样选择第 n 个元素,并且无视元素类型。

语法

p:nth-of-type(2) {
   background: blue;
}

设置第二个 p 元素蓝色背景颜色。

使用关键字

p:nth-of-type(odd) {
   background:white;
}
p:nth-of-type(even) {
   background:red;
}

上面的代码是:单数的 p 元素是白色,双数是红色

使用公式

.selector:nth-of-type(an+b) {
   /* css codes go here */
}

an + b,a代表一个循环的大小,n是一个计数器(从0开始,然后2,3,4,…),和b是偏移值。

白话来说:
3n+0 = 3×0+0 = 0,(因为没零所以不会选择),然后就是 3,9,12,15…
3n+1 = 3×0+1 = 1,然后 4,7,10,14…
3n-1 = 3×0-1 = 2,然后 5,8,11…

总结:
1、如果 b = 0 , 可以写成 an
2、3n+1 的意思就是 3 的倍数然后加1

演示

浏览器支持

支持 :nth-of-type 的游览器

所有主流游览器都支持,除了 IE8 或者更旧的版本

via:w3schools.com

CSS3:美化 HTML5 验证

CSS3:美化 HTML5 验证让我们看看如何创建使用客户端验证用户的数据。这项操作,我们将使用 CSS 给它装饰一下,包括一些 CSS3 !

详细教程在:tutsplus.com(英文)

演示

分析

分析图

点击图放大

新 HTML5 元素

HTML5有几个新的形式输入类型。这些新功能可以更好的输入控制和验证。

例如:

<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="jacky@example.com" required />
<span class="form_hint">Proper format "usr@something.com"</span>
</li>

Continue reading CSS3:美化 HTML5 验证