[转自己以前的文章]

无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候。今天分享一个之前学做按钮的技巧,有人叫做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. 如何在svn系统中使用git

    如果正在使用svn,打算换到git,又暂时不想放弃已有的svn代码库,可以选择git-svn.说一说我自己从svn到git的经验吧. 开始 安装最新版本的git,从git 1.5.3以后支持git-s ...

  2. Single Number III——LeetCode

    Given an array of numbers nums, in which exactly two elements appear only once and all the other ele ...

  3. Windows Shell Extension 系列文章

    Windows Shell Extension 系列文章 http://www.codeproject.com/Articles/512956/NET-Shell-Extensions-Shell-C ...

  4. 转:VS2010解决方案转换到VS2008

    原文链接地址:http://www.codeproject.com/Tips/80953/Converting-VS2010-Solution-to-VS2008 如果你使用VS2010的任何版本写代 ...

  5. [转]C服务端与java客户端的socket通信注意事项

    http://blog.csdn.net/gaoxin1076/article/details/7671752 Socket网络通讯开发总结之:Java 与 C进行Socket通讯 注意以下问题: 1 ...

  6. Solr使用solr4J操作索引库

    Solrj是Solr搜索服务器的一个比较基础的客户端工具,可以非常方便地与Solr搜索服务器进行交互.最基本的功能就是管理Solr索引,包括添加.更新.删除和查询等.对于一些比较基础的应用,用Solj ...

  7. swiper.js 移动端触摸滑动插件

    API链接: http://www.swiper.com.cn/api/start/2014/1218/140.html <body> <div class="swiper ...

  8. DCL双检查锁机制实现的线程安全的单例模式

    public class MyObject { private volatile static MyObject myObject; private MyObject(){} public stati ...

  9. pandas对象保存到mysql出错提示“BLOB/TEXT column used in key specification without a key length”解决办法

    问题 将DataFrame数据保存到mysql中时,出现错误提示: BLOB/TEXT column used in key specification without a key length 原因 ...

  10. Gridview实现银行选择列表

    [MainActivity.java] package com.example.activitydemo; import android.os.Bundle; import android.view. ...