WEB前端开发

时尚的CSS3进度条先看效果图，非常漂亮吧：

demo：http://www.css88.com/demo/css3-progress-bars/

英文原文：http://www.red-team-design.com/stylish-css3-progress-bars

HTML代码：
HTML代码比较简单

1. .progress-bar – 定义进度栏的常规样式。
2. .blue – 定义进度条的风格，这里是蓝色的
3. .stripes – 当前进度的动画类型。
4. span – 填充进度条。内联设置的宽度，0%-100%，进度条的宽度。

CCS代码：

添加颜色，进度条风格：

条纹样式

闪烁样式：

发光样式：

在不支持css3的浏览器下的表现：

demo:http://www.css88.com/demo/css3-progress-bars/

在Codrops上看到了这篇文章《Animated Buttons with CSS3》，按钮效果非常赞！转过来分享一下：

demo：http://www.css88.com/demo/AnimatedButtons/ (页面有广告，点击需谨慎！！！)

animate.css 是提供炫酷，有趣，跨浏览器css3动画的网站，你可以在高级项目中使用这些效果，为高级浏览器用户提供更好的交互体验。动画效果包括强调突出，滑块，淡入淡出，放大缩小等等。你也可以结合jQuery一起使用，例如$(‘.bouncy’).addClass(‘bounceInDown’);

• 项目主页：http://daneden.me/animate/
• git地址：https://github.com/daneden/animate.css

文章来自36氪

Path的UI惊起哇声一片，最大的亮点无疑是左下角的菜单展开效果。于是有各个版本的仿Path菜单出现，比如我们之前报道过的国内某牛人的作品，这里还有若干个关于Path菜单的讨论。但最引人注意的还是来自法国小伙Victor的作品：用纯CSS3制作的Path菜单效果。

他说他喜欢Path的新界面，尤其是添加菜单，作为一个前端设计师的他打算在浏览器里实现同样的效果。以下是他制作的一段视频：

整个作品通过html/css3完成，没有使用任何图片，没有任何javascript。因此仅支持Webkit浏览器。Victor通过Sass+Compass计算每个图标的坐标，并生成了动画效果。你不用重写代码就可以添加或删除项目。

实际效果请移步至这里，你可以在github上找到这段源代码。

HTML5和CSS3逐渐成为WEB前端开发的必须技能，开发过程中检查不同浏览器对HTML5和CSS3支持情况成了是一件非常烦心的事情。

比如我们要检查某个浏览器是否支持canvas元素：

function SUP_canvas() {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};

是否支持WebGL：

function SUP_webgl() {
return !!window.WebGLRenderingContext;
};

还有很多html5和css3其他属性…，值得庆幸的是我们发现了Modernizr开源Javascript库

Modernizr是一个用来检测浏览器是否支持HTML5以及CSS3特性的基于MIT证书的开源Javascript库。Modernizr的功能其实很简单，就是用js检测浏览器对HTML5/CSS3的特性支持情况，支持某个属性，就在页面的标 签上添加一个相应的class，不支持的话就添加一个no-前缀的class，比如，如果检测的浏览器支持video标签，MODERNIZR就会 在标签上添加video类，否则，添加no-video类。

最新的Modernizr是2.0.6版本的，如果你下载开发（development）版本，给我们提供全部的内容，如果要下载production版本的modernizr，我们会发现，我们可以根据自己的需要进行订制。在其下载页面上，我们选择自己所需的HTML和CSS特性，然后生成一个javascript文件。这么做会极大程度上减少冗余代码，减少不必要的检测，对web前端这个很看重用户体验的地方，性能就是一点一点压出来的。

使用Modernizr也非常简单，只要而且必须在标签里应用就可以了，无需调用Modernizr_init()之类的初始化方法。modernizr必须放在里，最好放在css声明之后，因为HTML5 Shiv（用以在IE中启用HTML元素）必须在之前执行，而且要使用modernizr添加的class，需要阻止FOUC。还有一点在于html声明里的no-js的class。它设置了一个默认状态，如果页面禁用了javascript我们就可以知道了。

用调试工具我们看到在html标签里加了很多样式类，从这些样式类里我们可以完全看出您使用的浏览器对HTML5和CSS3支持情况，以“no-”开头的，就是这个浏览器不支持的特性：

知道了这些特性的支持情况我们就可以使用css选择器做一些表现上的差异，比如,如果不支持标签，那么test类文本为红色。
.canvas .test {
color: blue;
}

.canvas .test {
color: red;
}

同样，我们也可以在JavaScript利用这些特性检测的结果，代码：

if(Modernizr.canvas){
//开始画图啦！

}else{
alert("fuck!");
}

Modernizr 2还提供了一种load机制，方便代码管理，比如：

Modernizr.load({
test: Modernizr.canvas,//检查是否支持标签及相应的属性
yep : 'canvas.js',//如果支持标签及相应的属性那么加载canvas.js，
nope: 'no-canvas.js'//如果不支持标签及相应的属性那么加载no-canvas.js，
});

如果直接用的是development版本的modernizr，你会发现，根本就没有Modernizr.load，因为它是作为一个单独文件发布的：yepnope.js。而在production版本，我们选择将其包含在modernizr里。

官方网址：http://www.modernizr.com/

前几天在Qzone上看到css3动画，非常神奇，所以也学习了一下。首先看看效果http://www.css88.com/demo/css3_Animation/

很悲剧的是css3动画现在只有WebKit内核的浏览器（Safari和Chrome）支持，虽然应用还不是时候，但是效果却不可低估。

在哪里定义动画效果？

css3动画一般通过鼠标事件或者说状态定义动画，通常我们可以用CSS中伪类和js中的鼠标事件来定义。

js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等

transition的基本语法：

css3动画通过transition属性和其他css属性（颜色，宽高，变形，位置等等）配合来实现。

transition的语法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

当然这是简写，我们也可以完整的写：

transition-property ： none | all | [ <IDENT> ] [ '

1

,

' <IDENT> ]*；

transition-duration ： <time> [, <time>]*

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay ： <time> [, <time>]*

继续阅读：WebKit CSS3 动画基础»

css3中的box-shadow（阴影）可以查看：http://www.css88.com/archives/2136或者http://www.css88.com/tool/css3Preview/Box-Shadow.html

在ie下模拟css3中的box-shadow（阴影）可以使用ie的Shadow（阴影）滤镜

基本语法：filter: progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度（数值）, Strength=阴影半径（数值）);

注意：该滤镜必须配合background属性一起使用，否则该滤镜失效。

IE下模拟css3中的box-shadow（阴影）代码：

.box-shadow{

filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=5);/*for ie6,7,8*/

background-color: #eee;

-moz-box-shadow:2px 2px 5px #969696;/*firefox*/

-webkit-box-shadow:2px 2px 5px #969696;/*webkit*/

box-shadow:2px 2px 5px #969696;/*opera或ie9*/

}

演示地址：http://www.css88.com/demo/box-shadow/

今天网上看到了一个让IE实现CSS3中的border-radius（圆角）:

.box-radius {
border-radius: 15px;
behavior: url(border-radius.htc);
}

演示地址：http://www.css88.com/demo/border-radius/

下载htc文件（源码来自）：http://code.google.com/p/curved-corner/

注意：htc文件是要放在服务器上，放在本地测试是不行的！

大家知道IE 6,7,8不支持CSS3中新加属性，老外写了一个htc，可以让IE 6,7,8模拟部分的CSS3属性,包括：border-radius（圆角），box-shadow（阴影），text-shadow（文本阴影）：

注意：htc文件是要放在服务器上，放在本地测试是不行的！

见代码：

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */
}

下载htc文件：http://www.css88.com/demo/ie-css3/ie-css3.htc

原站：http://fetchak.com/ie-css3/

原文地址：http://www.findmebyip.com/litmus/#target-selector

从网页上截了了个图下来：