Buttons/Icons

CSS3制作下拉工具条

CSS3制作下拉工具条

Tooltip的效果,在Web上的运用对大家来说不在陌生了,然而很多tooltip的效果都是依赖于JavaScript或者jQuery来实现。但是随着IE6的慢慢死去,制作这样的效果是无需任何脚本语言来支持。今天我们一起来看一款使用CSS3制作的下拉工具条,也类似于tooltip的效果。在这个效果中比较难处理的是阴影色配合,另个整个效果最有特色的是CSS3属性选择器的运用。感兴趣的话继续往下看吧。

Add To Car Button

Add To Car Button

这个Demo是一位在校大三的学生白牙制作的,从今天开始白牙同学也将为大家带来很多CSS3的DEMO效果,将会涉及各个方面的UI效果,比如说常见的Button UI,Form UI,Menu UI等等。同样这些CSS3 UI效果都是将国外的一些优秀的UI设计图(psd)转换成CSS代码,让更多的学习受益,同时将在W3cplus上打造一个优秀的UI库,这个库里的代码可以随时使用,可以随时拿来学习。

白牙第一次给大家带来的案例是通过CSS3的渐变属性、阴影、CSS3的伪类和@font-face属性制作的添加物品到购物车的效果。如果你喜欢就往下看吧。

CSS3 Pictogram Button

CSS3  Pictogram Button

Buttons的制作,现在几乎无需任何图片就可以实现(当然需要忽略IE低版本),而且我现在做的项目,按钮基本上使用CSS3来制作,让那些不支持CSS3的浏览器就用纯色显示,让现代浏览器给用户带来更好的体验。至于Buttons的制作,在W3cplus上也是有很多案例了,今天我再次老调重弹,制作了Icon的button,而且制作了三种形态,3D立体按钮,内描边按钮,圆角按钮,而且配置了多个颜色,希望这些按钮能让你直接用到你的项目中(w3cplus的案例效果,已经有很多网站在直接使用(^_^))。

藤藤每日一练——Ligature Icon UI

藤藤每日一练——Ligature Icon UI

大家好久没有看到藤藤的每日一练了吧,会不会觉得少了什么?难道藤藤同学不写案例了吗?不是的,因为最近我和藤藤一起在整理ICON UI的库,希望这些UI的库能帮助大家解决一些ICON的制作时间,做到拿来就可以用。这些ICON UI我们都是使用字体来制作的,用到的就是CSS3的@font-face属性,制作方法简单。只是类名和实体符的对应,大家可以查对应的类名。您只需要把鼠标悬浮在每个ICON上就能得到相应的类名和实体符。今天要给大家展示的是Kazuyuki Motoyama的Ligature Symbols,希望大家喜欢。

CSS3制作3D立体分页导航

CSS3制作3D立体分页导航
收集了很多DEMO和相关的PSD,于是想能不能通过自己学的CSS3相关技巧,将有关PSD图效果转换成CSS3效果。灵光的冲动,让我开始做起了这件事情,今天开始我会开始制作一些CSS3的DEMO效果,而这些DEMO效果都是由对应的PSD转换过来的,换句话说,如果你不考虑兼容IE低版本的话,这些DEMO你都可以使用。那我们开始吧

css3 icon导航

css3 icon导航
本实例主要应用了border-radius,transition,font-face。先设置一个宽度并设置overflow为hidden,然后鼠标滑过用transition来改变其宽度,以显示文字信息部分。至于三个icon,前面两个为font-face做的,后面一个为图片。

css3 download按钮设计

css3 download按钮设计
本实例主要应用gradient,然后使用box-shadow和border-raidus生成一个看起来很酷的按钮。然后download文字和版本文字分为两层,download文字层的z-index大于版本文字的z-index,鼠标滑过的时候改变download文字的宽度,露出下面的版本文字层。
返回顶部