按钮制作技巧(css精灵效果)-高级版
2015-04-13 11:13
435 查看
[转自己以前的文章]
无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候。今天分享一个之前学做按钮的技巧,有人叫做css精灵效果。
通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让人看上去有按钮的感觉。但是第一种方式会有弊端,如果图片在服务器上,我们要想成功点击某个“按钮”,那么我们作为客户端必须要向服务器发送两次请求,下载好这两个图片,才能成功点击出现按钮的效果。
我们用第二种方式来看一下,用制图软件(如ps),把两个按钮图片合成上下排版的一张图片,给按钮上半个图片的高,然后再用户点击的时候,让这张图片的高度进行负的半个高度像素 (-??px) 显示,只向服务器发送一次图片请求即可呈现按钮效果。
无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候。今天分享一个之前学做按钮的技巧,有人叫做css精灵效果。
通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让人看上去有按钮的感觉。但是第一种方式会有弊端,如果图片在服务器上,我们要想成功点击某个“按钮”,那么我们作为客户端必须要向服务器发送两次请求,下载好这两个图片,才能成功点击出现按钮的效果。
我们用第二种方式来看一下,用制图软件(如ps),把两个按钮图片合成上下排版的一张图片,给按钮上半个图片的高,然后再用户点击的时候,让这张图片的高度进行负的半个高度像素 (-??px) 显示,只向服务器发送一次图片请求即可呈现按钮效果。
相关文章推荐
- 按钮制作技巧(css精灵效果)-高级版
- 用CSS制作凸出按钮效果
- CSS高级技巧:阴影效果
- 通过css的before和after制作按钮的动画效果
- CSS高级技巧:阴影效果
- 17-CSS3 高级技巧 精灵图 字体图标 滑动门
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
- CSS网页制作技巧:背景图片定位
- 制作漂亮的三维表格 立体效果菜单按钮
- 12 个 CSS 高级技巧汇总
- 利用CSS实现按钮效果(无图片)
- 制作按钮点击的平滑的过渡效果
- DIV+CSS网页制作布局技巧学习
- atitit.按钮光标滑过高亮切换以及其他动态效果的实现css html js --attilax总结
- 详解CSS制作Web页面条纹背景样式的技巧
- CSS 高级布局技巧
- 20 个 CSS 高级技巧汇总
- 用CSS实现圆角按钮的效果
- 12 个CSS高级技巧汇总
- CSS---8款CSS制作数据报表技巧