按钮制作技巧(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按钮,这款按钮的一个特点是有彩色的边线,这让整个按钮显得比较多姿多彩,没那么枯燥无趣.本文不仅可以让大家看到演示 ...
随机推荐
- WordPress /wp-admin/users.php畸形s参数路径泄漏漏洞
漏洞版本: WordPress 2.7.x WordPress 2.8.x WordPress 2.9.x WordPress 3.0.x WordPress 3.1.x WordPress 3.2. ...
- Qt入门(20)——Qt模块简介
当你安装Qt时,这些模块会被构建到库中.在Qt企业版.Qt评估版和Qt自由版中,包含所有的模块.对于Qt专业版,提供基本的模块--工具.核心.窗口部件.对话框.图标视图和工作区模块.画布模块画布模块提 ...
- 我的第一个wp8小程序
一:截图,功能介绍:点击音乐红色按钮,播放铃声 二:代码 XAML代码 <phone:PhoneApplicationPage x:Class="PhoneApp1.MainPage& ...
- DateDiff 函数,用生日获得年龄
一:截图 二:代码 using System; using System.Collections.Generic; using System.ComponentModel; using System. ...
- MySQL 创建库
CREATE DATABASE IF NOT EXISTS database_name DEFAULT CHARSET utf8 COLLATE utf8_general_ci; 这种创建方式能保证数 ...
- log4j配置祥解
第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 1 log4j.rootCategory=INFO, stdou ...
- Android注解利器:ButterKnife 的基本使用
前言 ButterKnife 简介 ButterKnife是一个专注于Android系统的View注入框架,可以减少大量的findViewById以及setOnClickListener代码,可视化一 ...
- Java自动装箱和自动拆箱操作
1.Java数据类型 在介绍Java的自动装箱和拆箱之前,我们先来了解一下Java的基本数据类型. 在Java中,数据类型可以分为两大种,Primitive Type(基本类型)和Reference ...
- php开启curl和openssl
php开启curl和openssl 开启php curl函数库的步骤 1).去掉windows/php.ini 文件里;extension=php_curl.dll前面的; /*用 echo phpi ...
- idea mac 快键键
alt + 花 + 左右 上一步下一步 shift + 花 + F 全文检索 花 + O 类查找 alt + 花 ...