按钮制作技巧(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按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
随机推荐
- 南桥先生谈《OUTLIERS》
借来一套语音版的 Outliers 听完了.这本书里有很多故事,可是希望借此找到成功的奥秘恐怕很难,作者做的是一描述而不是预见.听了半天,只听出了六个字: “天时地利人和”. 比如比尔·盖茨,他之所以 ...
- Jenkins 五: 构建Ant项目
1. 点击“新建”,在“Item名称”栏输入要构建的项目名,比如“Ant_project”,选择“构建一个自由风格的软件项目”,点击“OK”按钮. 2. 找到“源码管理”-> “Subversi ...
- 二维码开源库zbar、zxing使用心得
首先说明我的测试场景是“识别打印在纸上的二维码”,在扫描结果中寻找二维码并进行识别,而不是直接让摄像头对着二维码扫描. zbar和zxing用的都是自己从github上clone的c++源码/接口编译 ...
- winform程序中将控件置于最顶层或最底层的方法
有时,我们可能动态的添加控件,并准备将其置于对顶层或最底层.实现的方法有两个: 一种方法是在WinForm窗体中使用Controls控件集的SetChildIndex方法,该方法将子控件设定为指定的索 ...
- SEO为什么越来越难?
不是很长的折腾seo该,无脑想如何很长的头发外链,一方面,没有花费的时间SEO在,另一方面SEO越来越难,的另一个方面,也SEO特征,不可控和不可预测性,致使我们花了非常多的情况下,SEO大部分时间都 ...
- 深入探索C++对象模型-5
虚拟继承下的对象构造: 由于虚拟基类对象在子类中只能保持一个实例,那么,子类构造的时候调用父类的构造函数的时候必须保证虚拟基类对象不能够重复构造. 那么如何保证基类对象的唯一性? C++规定虚拟基类对 ...
- RxJava RxAndroid【简介】
资源 RxJava:https://github.com/ReactiveX/RxJava RxAndroid :https://github.com/ReactiveX/RxAndroid 官网:h ...
- Poj 3368 Frequent values
/* 线段树区间合并 维护几个信息 到时候乱搞一下就好了 开始T了 有一种情况可以不用递归 直接算出来 */ #include<iostream> #include<cstdio&g ...
- C#解leetcode 18. 4Sum
Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = tar ...
- vertical-align各属性对比
测试用代码 <!DOCTYPE html> <html> <head> <style> #dd { //line-height: 300px; back ...