今天给大家带来钻石图形demo，主要使用了 border.请用 Chrome 浏览器浏览.

今天 993 为大家带来 mask  的新 demo，打造过程比前作复杂一些，本作代号是：Think different，希望大家能喜欢小弟做的 demo，多提建议帮助我改进。（请在 Chrome 下浏览）

今天将介绍遮罩属性 —— mask 的简单 demo。 mask 属性暂时只有 webkit 浏览器支持，使用需要加标识符。案例中用到的缩写均可展开，特别需要强调的是 mask-origin 这个属性，指定了遮罩的初始位置。默认是 padding，本例中设置为 content。

Metro风格成了一种新的设计风潮，久违的了藤藤根据国外友人提供的Metro设计图，把整个Metrostyle设计转换成CSS代码，其中一些效果使用了CSS3来制作，比如说自定义时间动画、加载进度长，复选框自定义、tooltip提示框等效果。在整套Metrostyle UI中包括了：导航（含下拉导航效果）、登录表单、下拉控件、搜索表单、自定义选择框、时钟、加载进度条、日历、icon图标、视图按钮、分享按钮、复选框、色板、功能按钮、垂直手风琴、视频播放器面板、选项卡、按钮和价格区块等20个Web中常见的UI效果。

这个效果我一拿到效果，让我惊叹了一翻，使用纯CSS3代码制作了一个莲花开放的效果，藤藤利用自己所掌握的CSS3知识将Niels Doorn使用js和CSS3制作的莲花开放的案例修改成了纯CSS3的案例。在这个案例中，最关键之处是莲花开放的八个花瓣开放时的时间配合与旋转角度的配合。藤藤为了调整这个时间，花费了不少精力。你看到这个DEMO也会像我一样惊叹。

菜单效果在网上琳琅满目，w3cplus也制作了不少。今天根据Metrostyle的UI设计效果，配合CSS3的transform，aimation属性制作了一个下拉的动画导航效果。这个效果在webkit浏览器下得到较好的支持，在Firefox下有些卡。其中最关键的地方使用了两个额外标签控制翻转的前后效果，详细的制作过程看代码吧。

今天与大家分享一款使用CSS3制作的Twitter信息分享框。在这个DEMO中，使用的CSS3属性还是那么几个，css3的渐变gradient，盒子阴影box-shadow，css3的选择器等，不过在这个案例中两个特色之处，一个是使用了":before"配合gradient制作了内凹圆角效果，类似于chrome浏览器上的tabs效果，这个效果可有点难度（思路来自于Tabs with Round Out Borders）,还有一个亮点就是使用gradient制作了渐变的线条。想一探究竟的同学，看下面的代码吧。