来自第三方的普通标准按钮，例如，facebook, Twitter的按钮尺寸大小和样式都不太相同。而且对于开发人员来说修改一个CSS的按钮相对更加轻松和愉悦。更重要的在于不同国家语言都可以方便的使用CSS按钮。

今天我们介绍的这套CSS按钮来自于Zocial，你无须使用其它的标签。所有的按钮都是可缩放并且可定制的。而且在老版本的浏览器上都可以很优雅的展现。当然对于IE6/7来说，不如图片的显示效果好。

按钮预览

在线演示  本地下载

主要的特性

• 100%的矢量CSS3图标
• 自定义字体文件和@font-face图标
• 按钮和图标带有版本支持 
• 完整的尺寸缩放
• 主从按钮统一
• 可以很好的支持老版本浏览器
• GitHub repository (手写CSS)
• Sass framework (six buttons) (by @adamstac)

如何使用

导入zocial.css，然后使用如下代码即可：

<button class="zocial…

设计行业是当前发展最快的行业之一，设计师需要了解最新的视觉设计趋势，及其类似jQuery，HTML5，CSS3的互动技术。在今天 这篇文章中，我想与大家分享这20个最新的CSS教程，大家可以参考里面的网页设计元素， 从中找到适合自己的内容。希望对大家都有所帮助！

Quickly Build a Swish Teaser Page With CSS3

How to Create a CSS3 Dropdown Menu [Tutorial]

Orman Clark's Vertical Navigation Menu: The CSS3 Version

Accordion with CSS3

Tutorial: CTA button without images using CSS3 and Entypo

Create the Illusion of Stacked Elements with CSS3 Pseudo-Elements

Pure CSS3 LavaLamp Menu

CSS3 signup…

今天我们介绍一个非常不错的用来查看不同浏览器下CSS属性兼容性的在线工具 - Browser Support，如果你需要查看不同浏览器下CSS的兼容性的话，这个工具肯定能帮你大忙，特别如果你想在你的项目中使用CSS3的话，这个工具肯定也是你不错的选择。

使用这个工具，你可以输入需要查询的属性，当然这个工具拥有自动补齐功能，使你可以更方便的查看不同的CSS属性。

搜索结果会按不同的浏览器来展示兼容属性。

是不是很方便？希望大家在web开发中能够用到这个在线工具。

在线演示  本地下载

今天介绍一款来自script-tutorial的超酷飞行状菜单特效，和传统的下拉菜单不同，它的子菜单都是水平飞入而非滑动下拉出现，非常的与众不同，希望大家喜欢！

HTML代码

首先这里我们定义HTML菜单项目，使用li来构建菜单内容，如下：

<ul id="nav">

    <li><a href="http://www.script-tutorials.com/">Home</a></li>

    <li><a class="hsubs" href="#">Menu 1</a>

        <ul class="subs">

            <li><a href="#">Submenu…

在线演示  本地下载  在线调试

如果大家经常关注互联网新网站和应用的话，或者你喜欢收集不同的网站模板，你会发现越来越多的网站模板或者网站在使用CSS伪类 - pseudo class。

今天我们这里给大家简单介绍伪类中经常使用的俩个:before和:after。希望大家能够觉得有帮助！

如果你喜欢我们的文章，或者有任何问题，请给我们留言，谢谢！

什么是伪类(pseudo class)？

pseudo这个单词来源于希腊语的音译，意思是虚构的，假的，或者伪的意思。因此这里不难理解为什么我们称之为伪类。

和一般的DOM中的元素样式不一样，它并不改变任何DOM内容。只是插入了一些修饰类的元素，这些元素对于用户来说是可见的，但是对于DOM来说不可见。

因此大家需要注意一下几点：

• 它们不是真正的元素，对于很多情况下，大家不用用它展示实际意义的内容，尽量用它显示修饰性内容或者设计性内容，例如，图标
• 要知道有些相关的开发工具，例如著名的开发工具firebug根本就不显示任何的伪类生成内容，如果你使用的话，你知道后果的！你将陷入盲目的debug中。当然你使用Chrome可以看到样式，但是在DOM看不到元素。

什么时候使用伪类(pseudo…

这个叫做DemoStudio的网站来自于Mozilla Developer networks，收集了很多超酷的CSS3和Javascript特效。因为都是实验产品，所以如果你使用这些技术，有可能在一些老的浏览器，比如，IE中无法正常工作。当然如果你有fallback的话，大可以使用这些技术。相信你肯定会喜欢这些超酷的特效。如果大家喜欢，请给我们留言！

折纸效果

相当不错的折纸效果

RotorJS

旋转3D操作类库 - 轻量级并且可扩展

3D图片过渡

类似flash效果的3D CSS过渡效果

The Box

一个动画卡片和白纸的3D情节，由回收材料制成。

3D Flip list menu

一个翻动的3D菜单特效

动画菜单图标

小并且可缩放，纯CSS3实现的动画

Animated CSS3 Gallery

一个使用淡入缩放图片效果画廊

The CSS Book

纯CSS实现的3D书效果

via quaness.com

互联网拥有很多免费的工具和应用，几乎可以帮助你实现任何你需要的UI组件和设计，大家还记得上周我们介绍的纯CSS实现的气泡式提示文章吗？今天我们将介绍一个在线的生成气泡式提示的web工具 - CSS ARROW PLEASE，希望大家喜欢！

主要特性

• 设置气泡提示位置（上下左右）
• 提示尺寸大小
• 文字颜色
• 边框大小和尺寸
• 边框颜色
• 自动生成css代码

生成代码

.arrow_box {

    position: relative;

    background: #202020;

     border: 4px solid # ccc;

}

.arrow_box: after, .arrow_box: before {

    top: 100 % ;

    border: solid transparent;

   …