Metro UI

Metrostyle Web UI

Metrostyle Web UI

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

藤藤每日一练——Metro Icon

藤藤每日一练——Metro Icon

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

藤藤每日一练——Metro Login Form

藤藤每日一练——Metro Login Form

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

藤藤每日一练——Metro UI For Block

藤藤每日一练——Metro UI For Block

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

返回顶部