Metro UI风格大家一定见识了不少，至于其好坏我们在此不做讨论，今天开始，我们在w3cplus上会推出一系列的Metro UI设计风格的DEMO，当然这些DEMO不是仅仅的Metro UI风格，我们会尽量使用CSS3属性，让其效果更佳优美，或者我们也会将其结合Bootstrap制作一些DEMO以供大家学习。另外广大网友提意在DEMO中加入简单的介绍，方便理解。那么从今天开始的DEMO，我们会加入一些说明，如果您有更好的建议，希望能告诉我们。谢谢！

这是一个很简单也很普通的登录表单的效果，只不过这个案例采用的是Metro的UI设计风格，当然不是Metro UI CSS中的东西，设计风格，色彩类似于Metro。另外在加载表单时，给部分元素使用了transition属性，让你在视觉上加载有动画，其在input[type="text"]得到焦点时，使用了box-shadow模仿了border效果。

Metro UI自己提供了一套font-face制作icon的字体库，而且这个字库可以制作三百多个icon，今天藤藤根据别的Metro UI设计图，制作了一个icon方面的案例，在这个案例中，使用到的知识很简单，主要是两个方面，第一是字体@font-face的属性使用，第二个就是属性选择器的灵活运用。而且这个案例中的icon我们是分两部分的，第一部分是纯CSS绘制的icon，第二部分是@font-face实现的icon。详细的请看案例代码。

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