网络编程
位置:首页>> 网络编程>> 网页设计>> 解密CSS Sprites:技巧、工具和教程(4)

解密CSS Sprites:技巧、工具和教程(4)

 来源:Oncoding编码营 发布时间:2011-01-11 19:38:00 

标签:CSS,Sprites,技巧,工具
CSS Sprites视频教程

How to Use CSS Sprites
David Perel解释了CSS Sprites的基本概念,并演示了如何在网页中使用它,长度:10分钟

Creating Rounded Buttons With CSS Sprites
继续上面的教程,展示了如何制作滑动按钮

Exactly How to Use CSS Sprites
Andres Fernandez  展示了 CSS sprites如何加快加载时间和减少请求次数

How To Use CSS Sprites
Chris Coyier 展示了一个 CSS sprites的范例,他将8幅图片组合在了一起,并且使用jQuery制作了一个小程序。

Faster Page Loads With Image Concatenation
对于复杂的网站,减少图片请求数量可以减轻服务器负担,这是许多站长所希望看到的。

CSS Image Sprites In 10 Minutes

另一个关于导航菜单的教程

CSS: Using Percentages in Background-Image

介绍背景图片定位的方法

利用CSS Sprites制作图像映射(image maps)

使用CSS Sprites,你可以对一个对象的一小部分加载翻转效果,使用负值的背景图片位置( background-position ),你可以创建基于CSS的图像映射,下面的文章讲述了这一技术:

CSS Image Maps Using Sprites
一个基于CSS的图像映射的简单例子。你可以同传统的方式对比一下优劣。

City Guide Map Using Sprites
另一个横向定位的例子

Advanced Map Using Sprites
一个更高级的技术。

CSS Sprites技术

CSS Sprites 2(http://alistapart.com/articles/sprites2)
Dave Shea 使用jQuery扩展了经典的CSS Sprites, 他的技术可以让不同的链接之间使用组合图片,即使用户禁用了JavaScript。

CSS Sprites2 Refactored: Building an Unobtrusive jQuery Plug-In
Joel Sutherland 制作的jQuery插件,整理了Dave Shea的功能,并简化了初始化设置。

Background Repeat and CSS Sprites
什么情况下使用CSS Sprites

CSS Sprite: Photoshop Script Combines Two Images for CSS Hover
这是一个可以导入Photoshop的动作设置,可以让你快速制作翻转按钮的背景图片。

Extending CSS Spriting
Jennifer Semtner 扩展了经典CSS Sprites技术,并讲述应该在什么时候使用它。

Sliding Doors Meets CSS Sprites
滑动门技术 “Sliding Doors of CSS.

How to Preload Images When You Can’t Use CSS Sprites
如何处理CSS Sprites对网页内容的影响

JavaScript Sprite Animation Using jQuery
Alex Walker 结合CSS Sprites和jQuery,实现了“打开页面”的效果

IE6, CSS Sprites and Alpha Transparency
Julien Lecomte 讲述IE6下的透明hack问题

0
投稿

猜你喜欢

  • 在许多情况下,当迁移至SQL Server 2008之前必须了解那些反对和放弃功能的具体情况。下文是几个主要功能在兼容性上的问题列表:1.S
  • 今天同事 明城 在项目中碰到一个 BUG,代码具体如下:<!DOCTYPE html PUBLIC "-//W3C//DTD
  • 如何显示数据库里的图片?asp调用数据库中的图片并显示。怎样把数据库里的图片显示出来?我们以gif格式的图片为例,代码如下:showimag
  • 阅读《YUI学习笔记(1)》YAHOO.lang.dump 与 YAHOO.lang.substitute。1.&nbs
  • 常见到网上博文有错误理论,包括身边很多朋友都曾认同“可访问性(Accessibility)是为残障人士准备”的观点。其实在互联网技术领域远不
  • 今天彬Go将和大家一起讨论网页设计趋势中很重要的环节,那就是”勾引”用户的按钮。所谓”勾引”用户的按钮,其实对于Web设计师来说,就是如何设
  • 现将几种主要情况进行小结: 一、如何输入NULL值 如果不输入null值,当时间为空时,会默认写入"1900-01-01"
  • 在Windows环境下,经常遇到系统Over的情况,如果你在新装了系统和SQL Server 2005后,需要把SQL Server2000
  • 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框,而是一条细线,很多朋友对此很感兴趣。其实要实现这样的效果并不困难,我们只要
  • 软件环境: 1、操作系统:Windows 2000 Server 2、数 据 库:Oracle 8i R2 (8.1.7) for NT 企
  • 当你使用UPDATE, INSERT, DELETE语句更新数据的时候,你就改变了两个地方的数据:log buffer和data buffe
  • 准备在以后制作的网站中尝试一些变化,比如:先提交内容,后提示注册/登陆。感觉这样可以绑架更多用户……不想注册再发言?那就先让你上钩发言,然后
  • 在IE下,获取Param的时候有个诡异现象(不知道算不算bug)。为了清晰起见,下面用最简单的HTML和JavaScript来说明。有这么一
  • 用下列代码可在控制弹出NTLM验证窗口:<% Response.Status = "401 Unauthorized&quo
  • Rotation滤镜可以使图片产生旋转效果,注意必须是IE5.5及IE6.0才能看到!方法如下:制作过程:一、准备图片1张。二、建立一个CS
  • 国外有很多优秀的文章可以用来学习,我决定花些时间翻译。我并不知道这篇文章有没有人翻译过,原文名 10 Awful IE Bugs and F
  • 微软在今天早上发布新的安全通告证实,一处远程执行代码漏洞影响到了整个SQL Server产品线。该漏洞的入侵代码在两周前已经被公布在互联网上
  • 来炫耀一下,谁看得懂我写的加密算法写了一整天了,这个代码用于ajax提交,要求就是加密后内容不能变得过长,加密解密需要效率高,至于安全性,被
  • 近期,MSN、江民等知名网站相继受到了黑客的威胁和攻击,一时间网络上风声鹤唳。本报编辑部接到本文作者(炽天使)的电话,他详细讲述了发现国内最
  • 好久没有写ASP代码了,今天在做一个简单的留言本时,出现了一下错误:Microsoft Office Access Database Eng
手机版 网络编程 asp之家 www.aspxhome.com