CSS3 UI Lib库是由腾讯AlloyTeam前端开发团队建立,主要收集国内外友好体验和创意的界面组件Demo。它除了使用CSS3技术外,还使用了HTML5JSJXjQuery等技术,来达到完美的外观表现以及交互体验。此项目自201110月份成立以来,经过团队一年多的整理和收集,已经趋于成熟。

  • CSS3 UI Lib库:Http://CSS3Lib.alloyteam.com

里面的Demo值得我们去借鉴,部分基础 Demo 已实现代码编辑以及预览功能,使用起来非常方便:选中一个 Demo,点击“代码编辑器”即可进入代码编辑状态进入编辑,点击更新预览即可更新显示。

同时部分 Demo 已支持使用“可视化工具”进行样式调整:选中一个Demo,点击“可视化工具”即进入所见即所得模式,修改左侧参数值,点击“更新预览”即可更新显示。你还可以用任何前端工具复制你想要的CSS3样式、JS代码,或者页面结构。

此库总共分为15大模块,分别是:

1. 动画(ANIMATION)

动画模块主要收集了以CSS3属性为主的一些动画特效,几乎涵盖了CSS3里面所有的动画属性做成的动画特效。

2. 按钮(BUTTON)

按钮模块主要集中了各大主流的按钮样式,以基于圆角、动画为主,使用大量的HTML5CSS3属性,非常实用。

除了可以看到不同样式的按钮外,你还可以根据以下两个链接去量身定制自己喜爱的按钮:

http://CSS3lib.alloyteam.com/#button/Demo7

http://CSS3lib.alloyteam.com/#button/Demo8

3.CSS3GRADIENT

CSS3GRADIENT是制作渐变背景的CSS3工具,简称CSS3渐变器。通过此工具,你可以获得任何你想要的CSS3渐变颜色代码,并且兼容各大浏览,使你以后制作页面背景颜色更加方便和快速。

4.表单(FORM)

表单模块主要收集了用户登录、注册等各种界面,简单、整洁,用户体验良好,非常实用。

5.图像滤镜(IMAGE_EFFECTS)

图像滤镜模块是此库最庞大的模块之一,里面收集了30多种如何展示图片的Demo。有3D2D、动画等各种特效,种类多,如果你不知道如何新颖别致的展示一组图片,那么这里面的Demo觉得会让你大饱眼福,茅塞顿开。

6.加载(LOADING)

此模块主要收集了一些常用的基于CSS3HTML5样式的页面加载动画,还在进一步完善中。

7.导航(MENU_NAV)

此模块也是该库中最庞大的模块之一,里面收集了包含苹果Win7等不同风格和样式的导航条,样式多样,非常值得借鉴。

8.面板(PANEL)

面板的功能主要用于把一些内容放在一些容器中。里面还有面板工具可以让你轻松自定想要的面板样式,并轻松获取设置代码。

9.进度条(PROGRESS_BAR)

进度条模板主要集中了一些常用的进度条展示样式,也是主要基于HTML5CSS3动画,还在进一步完善中。

10.评分/星级(RATING)

星级评分主要用于用户对一些服务的评价如上图,还在进一步完整中。

11.滚动条(SCROLLBAR)

滚动条模块也主要集中了几种常见的滚动条样式,例如苹果,都是基于HTML5 CSS3,外表美观,整洁。

12.选项卡(TAB)

选项卡主要用于tab之间的切换,里面提供了不同的选项卡模块,外观简单、整洁,值得借鉴。

13.文本(TEXT)

文本模块主要收集了一些不同字体样式的展现,以供大家参考,方便以后页面的设计。

14.提示(TOOLTIPS)

提示是指针对页面特别词语起到解释或者补充的作用,此库提供了一些常见的提示样式Demo,以供参考。

15.翻页样式(TURNPAGE)

翻页主要模拟翻书的动作,这里收集了几种很友好的交互体验,以供参考。

最后,欢迎大家多多体验,多提意见,更多作品,请访问我们的团队Blog – http://www.AlloyTeam.com

声明:本 CSS3 UI 库部分 Demo 来自互联网,版权归作者所有。

 

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2012/11/the-css3-ui-lib-library-introduction/

  1. 徐梓萱 2015 年 12 月 31 日

    大家顶啊,这么好的文章,博主辛苦了

  2. 123 2015 年 12 月 25 日

    黄钻到期,外链失效。

发表评论