按钮制作技巧(css精灵效果)-高级版
[转自己以前的文章]
无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候。今天分享一个之前学做按钮的技巧,有人叫做css精灵效果。
通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让人看上去有按钮的感觉。但是第一种方式会有弊端,如果图片在服务器上,我们要想成功点击某个“按钮”,那么我们作为客户端必须要向服务器发送两次请求,下载好这两个图片,才能成功点击出现按钮的效果。
我们用第二种方式来看一下,用制图软件(如ps),把两个按钮图片合成上下排版的一张图片,给按钮上半个图片的高,然后再用户点击的时候,让这张图片的高度进行负的半个高度像素 (-??px) 显示,只向服务器发送一次图片请求即可呈现按钮效果。
按钮制作技巧(css精灵效果)-高级版的更多相关文章
- Simptip – 使用 Sass 制作的 CSS Tooltip 效果
Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...
- CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu
具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...
- Web app制作细节:web app互动制作技巧
Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的制作, ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- css精灵动画
精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...
- jQuery制作Web全屏效果
需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...
- 纯CSS3彩色边线3D立体按钮制作教程
原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
随机推荐
- bzoj1076
好像题目有点问题?且现在决定不吃的宝物以后也不能再吃好像下次还是可以吃的,就是这样然后明显是状压dp,注意这道题明显倒推更容易因为顺推很可能从一个无效状态推到有效状态 ..,..] of double ...
- ♫【jQuery】detach
Jquery empty() remove() detach() 方法的区别 <!DOCTYPE html> <html> <head> <meta char ...
- (转载)用PHP正则表达式清除字符串的空白
(转载)http://www.chinaz.com/program/2009/0220/67569.shtml 我们经常会处理来自用户输入或从数据库中读取的数据,可能在你的字符串中有多余的空白或制表符 ...
- adb测试使用相关
1.adb中文 无论是shell下显示中文.logcat输出中文乱码还是adb push/pull路径包括中文名,windows下都可以通过更改cmd窗口代码页为UTF-8解决: chcp 65001 ...
- 汇编学习笔记(3)[bx]和loop
本文是<汇编语言>一书的学习笔记,对应书中的4-6章. 汇编程序的执行 要想将源代码变为可执行的程序需经过编译.连接两个步骤,WIN7操作系统下需要MASM程序来进行编译连接工作.将MAS ...
- Java---实现运行任意目录下class中加了@MyTest的空参方法(实现图形界面)
说明: 因为上个代码,总是要输入完整的绝对路径,比较麻烦,于是,就写了这个小程序,直接进入文件对话框选择需要运行的class文件. 只需要提前输入完整的类名. 注意:加的MyTest必须打个包,加上: ...
- Ancient Message (古埃及象形文字识别 Uva 1103)
原题:https://uva.onlinejudge.org/external/11/1103.pdf 给一幅图(16进制), 判断图中有哪些象形文字. 只识别 这6个就可以 示例: 将16进制数据 ...
- input页面居中,软键盘覆盖input
input框位于底部 对于ios的软键盘遮盖input输入框问题,网上已经有了一些解决办法,无非就是改变布局,再加scroll.js插件实现滚动, input框位于顶部 这种情况不会出现问题, inp ...
- windows form (窗体) 之间传值小结
windows form (窗体) 之间传值小结 windows form (窗体) 之间传值小结 在windows form之间传值,我总结了有四个方法:全局变量.属性.窗体构造函数和deleg ...
- 用canvas把图片变成黑白相片
<!--这里没有代码--> 原来是把灰度系数分别 乘以 每个像素点的三个像素色(R,G,B)的值,然后得到的三个值加起来,再把得到的值赋值进去给每个R ,G,B. 微软的MSDN上提到的是 ...