练习使用css3实现3d按钮
2014-09-29 16:44
218 查看
网上有很多漂亮的用css3实现的3d按钮,如'这个'、‘糖果色按钮’,
今天练习了一下,喏,下面这样,兼容性不好。
小黑子小虎子
3d效果和发光效果都是利用box-shadow,也经常利用伪元素:after和:before为目标元素添加别的效果。box-shadow是可以叠加的,所以可以为一个元素设置多个阴影,上图中蓝色按钮的右阴影如果直接box-shadow:4px 2px 0 rgb(17, 134, 167);效果是下图:
阴影上边界是水平的,我们需要的是斜的,解决方法就是:写多个右阴影,每个阴影的y值依次增大,如
效果如下图:
另外按钮上的字有一点点刻在按钮上的感觉是利用文字的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实现的各种不同的效果。其中有一种是实现了下图这样的浮雕效果:
看到这个效果还奇怪:怎么box-shadow不仅可以填充颜色值,还可以填图片?看了一下才明白原来下面的那个阴影其实是给图片元素添加了一个inset、-y值的半透明阴影和一个inset、更小-y值的白色线条小阴影。
今天练习了一下,喏,下面这样,兼容性不好。
小黑子小虎子
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实现的各种不同的效果。其中有一种是实现了下图这样的浮雕效果:
看到这个效果还奇怪:怎么box-shadow不仅可以填充颜色值,还可以填图片?看了一下才明白原来下面的那个阴影其实是给图片元素添加了一个inset、-y值的半透明阴影和一个inset、更小-y值的白色线条小阴影。
相关文章推荐
- 冒泡动画按钮的简单实现(使用CSS3)
- 使用 CSS3 实现 3D 图片滑块效果
- 使用 CSS3 实现 3D 图片滑块效果
- 如何使用CSS3实现一个3D商品标签
- 冒泡动画按钮的简单实现(使用CSS3)
- 纯css3实现的3D按钮
- 纯css3实现的3D按钮
- 60.自定义View练习(五)高仿小米时钟 - 使用Camera和Matrix实现3D效果
- 无需图片,使用CSS3实现圆角按钮[转]
- 纯CSS3实现牛奶般剔透的3D按钮特效
- 无需图片,使用CSS3实现圆角按钮[转]
- 如何使用CSS3实现一个平滑的3D文本标题
- 郭克华手机编程教学视频----我的练习源码(5)命令按钮监听2:使用当前类实现
- 使用 CSS3 实现 3D 图片滑块效果【附源码下载】
- 使用jQuery和CSS3实现的“加载中”效果按钮 极客标签 - 做最棒的极客知识分享平台
- CSS3实现的渐变按钮,在IE7、IE6下的滤镜使用。
- 不使用JS,使用CSS3 target 以及 动画效果实现,点击一下弹出,并且保持弹出状态,然后再点击一下弹回的导航栏(或者可以叫做按钮)
- 如何使用CSS3实现一个3D泡沫图形