[转自己以前的文章]

无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候。今天分享一个之前学做按钮的技巧,有人叫做css精灵效果。

通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让人看上去有按钮的感觉。但是第一种方式会有弊端,如果图片在服务器上,我们要想成功点击某个“按钮”,那么我们作为客户端必须要向服务器发送两次请求,下载好这两个图片,才能成功点击出现按钮的效果。

我们用第二种方式来看一下,用制图软件(如ps),把两个按钮图片合成上下排版的一张图片,给按钮上半个图片的高,然后再用户点击的时候,让这张图片的高度进行负的半个高度像素 (-??px) 显示,只向服务器发送一次图片请求即可呈现按钮效果。

按钮制作技巧(css精灵效果)-高级版的更多相关文章

  1. Simptip – 使用 Sass 制作的 CSS Tooltip 效果

    Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...

  2. CSS实现按钮点击后根据背景色加深效果-一颗优雅草bigniu

    具体代码如下 button{ position: relative; } button:active::before { display: block; content: ''; position: ...

  3. Web app制作细节:web app互动制作技巧

    Google .微软.苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗,并试图建立以自己为中心的”云“服务平台,企图在web app时代到来的时候充当霸主.本文将围绕web app的制作, ...

  4. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  5. 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  6. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  7. css精灵动画

    精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...

  8. jQuery制作Web全屏效果

    需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...

  9. 纯CSS3彩色边线3D立体按钮制作教程

    原文:纯CSS3彩色边线3D立体按钮制作教程 今天我们来分享一款利用纯CSS3实现的3D按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...

随机推荐

  1. ♫【HTML5 敏捷实践】第1章 使用语义化的方式实现

    <!DOCTYPE html> 向后兼容的HTML5<doctype>标签.HTML5规范规定<doctype>对大小写不敏感:然而,之前版本的HTML需要< ...

  2. 【转】java中byte数组与int类型的转换(两种方式)----不错

    原文网址:http://blog.csdn.net/piaojun_pj/article/details/5903009 java中byte数组与int类型的转换,在网络编程中这个算法是最基本的算法, ...

  3. JavaScript中的加号

    JavaScript中的加号“+”可以作为数学运算符的加,也可以作为字符串拼接,也可以作为一元运算符,表示正数. 1+2 "2"+"3" 3+"2&q ...

  4. K - Candies(最短路+差分约束)

    题目大意:给N个小屁孩分糖果,每个小屁孩都有一个期望,比如A最多比B多C个,再多了就不行了,会打架的,求N最多比1多几块糖 分析:就是求一个极小极大值...试试看 这里需要用到一个查分约束的东西 下面 ...

  5. 使用atomic一定是线程安全的吗

    这个问题很少遇到,但是答案当然不是.atomic在set方法里加了锁,防止了多线程一直去写这个property,造成难以预计的数值.但这也只是读写的锁定.跟线程安全其实还是差一些.看下面. @inte ...

  6. Android ===smail语法总结

    (转载自 网络)smail 语法总结 http://www.blogjava.net/midea0978/archive/2012/01/04/367847.html Smali背景: Smali,B ...

  7. android如何建立数据库。(如何重写SQLiteOpenHelper)

    public class DBConnection extendsSQLiteOpenHelper{//继承SQLiteOpenHelper, public DBConnection(Context ...

  8. Android自动化测试之Monkey工具

    前言:Android自动化测试工具.方法和框架,包括android测试框架.CTS.Monkey.Monkeyrunner.benchmark.test tool等. 一. 什么是MonkeyMonk ...

  9. [Angular 2] Template property syntax

    This lesson covers using the [input] syntax to change an element property such as “hidden” or “conte ...

  10. 【Java规划】DOM XML Parser分解、遍历、创XML

    1.前言 DOM XML Parser简介 DOM 它是 W3C 处理 XML 规范 API,这是很多其他的 XML 地基处理相关标准,不仅是 Java,其他的,如 Javascript,PHP.MS ...