练习使用css3实现3d按钮

网上有很多漂亮的用css3实现的3d按钮,如'这个'、‘糖果色按钮’,

今天练习了一下,喏,下面这样,兼容性不好。

3d效果和发光效果都是利用box-shadow,也经常利用伪元素:after和:before为目标元素添加别的效果。box-shadow是可以叠加的,所以可以为一个元素设置多个阴影,上图中蓝色按钮的右阴影如果直接box-shadow:4px 2px 0 rgb(17, 134, 167);效果是下图:

 

阴影上边界是水平的,我们需要的是斜的,解决方法就是:写多个右阴影,每个阴影的y值依次增大,如

box-shadow:1px 1px 0 rgb(17, 134, 167),2px 2px 0 rgb(17, 134, 167),3px 3px 0 rgb(17, 134, 167),4px 4px 0 rgb(17, 134, 167);

效果如下图:

 

另外按钮上的字有一点点刻在按钮上的感觉是利用文字的text-shadow(颜色值为比按钮颜色深一点)实现的,而点击上去按钮被按下的效果是利用a:hover实现的,按下时按钮向下移动是利用transform:translate(0,4px);实现的。顺便复习下a标签的‘爱恨’原则(LoVeHAte,需按此顺序写相应的css样式):

a:link,定义正常链接的样式;
a:visited,定义已访问过链接的样式;
a:hover,定义鼠标悬浮在链接上时的样式;
a:active,定义鼠标点击链接时的样式。

补充:看到了神飞‘一些上流的CSS3图片样式’,(译自:CSS3 Image Styles)里面有利用box-shadow实现的各种不同的效果。其中有一种是实现了下图这样的浮雕效果:

练习使用css3实现3d按钮

看到这个效果还奇怪:怎么box-shadow不仅可以填充颜色值,还可以填图片?看了一下才明白原来下面的那个阴影其实是给图片元素添加了一个inset、-y值的半透明阴影和一个inset、更小-y值的白色线条小阴影。

上一篇:UIButton中setTitleEdgeInsets和setImageEdgeInsets的使用


下一篇:android Jni NDK开发环境搭建及其简单实例的编写