按钮制作技巧(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按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
随机推荐
- awk合并文件一例
群里的朋友求助: $ cat file1a 1 2 3b 2 3 4c 3 4 5 $ cat file2d 你b 好c 吗 合并两个文件,需要实现: a 1 2 3b 2 3 4 好c 3 4 5 ...
- poj 1273 Drainage Ditches (网络流 最大流)
网络流模板题. ============================================================================================ ...
- 【转】java 容器类使用 Collection,Map,HashMap,hashTable,TreeMap,List,Vector,ArrayList的区别
原文网址:http://www.360doc.com/content/15/0427/22/1709014_466468021.shtml java 容器类使用 Collection,Map,Hash ...
- 图论(2-sat):HDU 3062 Party
Party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- 网络流(最大流) POJ 1637 Sightseeing tour
Sightseeing tour Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 8628 Accepted: 3636 ...
- HDOJ(HDU) 2156 分数矩阵(嗯、求和)
Problem Description 我们定义如下矩阵: 1/1 1/2 1/3 1/2 1/1 1/2 1/3 1/2 1/1 矩阵对角线上的元素始终是1/1,对角线两边分数的分母逐个递增. 请求 ...
- 一步一步学android之事件篇——单击事件
在使用软件的时候单击事件必不可少,比如我想确定.取消等都需要用户的单击,所有的单击事件都是由View.OnClickListener接口来进行处理的,接口定义如下: public static int ...
- Git 的优点
1. 快速 如果你每移动一下鼠标都要等待五秒,是不是很受不了?版本控制也是一样的,每一个命令多那么几秒钟,一天下来也会浪费你不少时间.Git的操作非常快速,你可以把时间用在别的更有意义的地方. 2. ...
- 3rd day
今天学习创建了几个简单的表:
- [Javascript] Log Levels and Semantic Methods
Go beyond console.log by learning about log levels, filtering log output and structuring your output ...