html5
千里送人头
这个作者很懒,什么都没留下…
展开
-
HTML5移动Web App相关标准状态及路线图
W3C最新公布了和移动WebApp有关的标准当前的状态及路线图,它汇总了和移动Web App开发相关的所有HTML5和CSS3标准以及他们当前的状态和未来路线,对使用HTML5进行移动Web App开发的开发者有着极大的指导意义。文档地址为:http://www.w3.org/2012/08/mobile-web-app-state/。 下面是该文档的主要内容。转载 2012-09-17 15:08:10 · 473 阅读 · 0 评论 -
IE9在Win7下任务栏新特性简介
IE9在Win7下的任务栏绑定、Jumplist等功能体现了网站即应用的思想,通过增强的功能可以像传统软件一样方便的浏览、控制网站,获取消息通知,体现了以网站为中心,去浏览器中心化的发展思路。在下图里,常用的网站成为了任务栏上的一个应用图标。而Jumplist放置网站的跳转列表,可以方便的浏览和跳转到网站的对应栏目。 任务栏覆盖图标可以显示来自网站的消息通知,例如有几封新邮件或转载 2012-09-17 15:36:04 · 1805 阅读 · 0 评论 -
浏览器九宫格的简单实现
九宫格,也叫做快速拨号(Speed dial) ,是现代浏览器一个非常重要的功能,用户可以在空白页上定制和放置自己喜爱的网站,这样可以方便的打开所需的网站,无需输入和记忆网址。 九宫格页面一般由9个格子到16格子组成,每个格子可以自由的拖动以交换位置。下面我们来实现一个简单的3*3九宫格。 我们先定义一个容器来放置3*3个格子,定义它的宽度为3个格转载 2012-09-17 15:34:49 · 645 阅读 · 0 评论 -
使用CSS3构建Ajax加载动画
原文地址:http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/译者:蒋宇捷 通常前端工程师采用gif动画图片来表现Ajax的加载。但是现在css3已经引入了动画属性,我们可以在不采用gif动画图片的情况下,采用css3达到同样的Ajax加载动画效果。那么让转载 2012-09-17 15:33:17 · 723 阅读 · 0 评论 -
用CSS3实现浏览器的缩放功能
作者:蒋宇捷(hfahe)版权声明:原创作品,欢迎转载,转载时请务必以超链接形式标明文章原始出处 、作者信息和本声明。 css3提供了强大的transform属性来实现动画效果。下面我简介一下如何用css3来实现浏览器里的缩放功能。HTML页面 我们先写一个简单的页面,以测试页面缩放的代码。 页面上有两个按钮,一个放大,转载 2012-09-17 15:30:42 · 579 阅读 · 0 评论 -
用CSS3创建旋转载入器
原文地址:http://css-tricks.com/css3-loading-spinner/原文作者:Chris Coyier译者:蒋宇捷 为了好玩,我创建了一个小小的CSS3纵向旋转的载入效果。下面是这个光环在Webkit内核浏览器上的效果图片。工作原理:两个圆形重叠在一起. 其中一个使用伪元素创建。伪元素创建的圆形使用负的z-index放置在下面。伪转载 2012-09-17 15:28:50 · 450 阅读 · 0 评论 -
仅用CSS创建立体旋转幻灯片
原文:http://net.tutsplus.com/tutorials/html-css-techniques/build-a-kickbutt-css-only-3d-slideshow/作者:Will Moyer译者:蒋宇捷(http://blog.csdn.net/hfahe)友情提示:本文难度为中等,阅读完需要45分钟,理解需要一定的基础。下载源文件示例在线观转载 2012-09-17 15:17:04 · 840 阅读 · 0 评论 -
用HTML5创建超酷图像灰度渐变效果
原文:http://www.webdesignerwall.com/tutorials/html5-grayscale-image-hover/译者:蒋宇捷转载请标明出处:蒋宇捷(hfahe)http://blog.csdn.net/hfahe 曾几何时,网站上显示的灰度图像必须手动进行转换。现在使用HTML5画布,图像可以被巧妙的转换为灰色,而不必使用图像编辑软件。我下面转载 2012-09-17 15:25:59 · 369 阅读 · 0 评论 -
使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
转载请标明出处:蒋宇捷(hfahe) http://blog.csdn.net/hfahe 考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上。具体实现方式可参考http://www.qianduan.net/css-gradient-text-effect.html。这种方式优点是图片可控,转载 2012-09-17 15:20:30 · 656 阅读 · 0 评论 -
HTML5浏览器测试网站汇总
我经常看到有很多人询问HTML5某个特性当前各浏览器的支持情况。的确,因为HTML5内容庞大,特性众多,而浏览器的支持情况又混杂不一,随时都有可能变化,所以了解起来比较困难。在这里,我汇总了一些常用的网站供前端开发者了解HTML5浏览器的支持情况。浏览器支持情况统计 When Can IUse:图表经常更新,展示了HTML5、CSS3、SVG等浏览器的支持情况。在这转载 2012-09-17 15:12:15 · 408 阅读 · 0 评论 -
AutoPager的简单实现
Firefox有个自动翻页的插件AutoPager,使用起来非常的方便。腾讯微博也有相同的功能,当鼠标滑动到底部时会自动展开下一页,如下图所示: 展开后如下所示:这个功能虽然比较小,但是实现起来是非常有意思的事情,我们可以选择多种方法达到目的。下面我介绍一种简单的实现方式。1、首先移动滚动条会触发window.onscroll事件。2、我们可转载 2012-09-17 15:38:50 · 599 阅读 · 0 评论 -
用CSS3创建动画价格表
原文地址:http://webdesignersdesk.com/2010/08/create-animated-price-grid-using-css3/译者:蒋宇捷 今天我们将要只使用CSS3来创建一个动画价格表。完全不使用Jquery,不使用图片,不使用Flash。今天我们将要学到的知识CSS3线性渐变CSS3放射渐变CSS3转换C转载 2012-09-17 15:32:34 · 363 阅读 · 0 评论 -
用纯CSS3实现QQ LOGO
在微博上看到有新浪的朋友用CSS3实现的新浪微博LOGO(如下图所示),一时手痒,就顺手也用CSS3实现了一个QQ的LOGO。 Demo的地址见:http://namepk.sinaapp.com/qq.html,目前只支持Chrome观看,效果如下图所示: 主要用到的CSS3属性如下所示: 1、 border-radius转载 2012-09-17 15:29:45 · 1299 阅读 · 0 评论 -
用CSS3实现动画进度条
CSS3的新特性为我们实现漂亮的进度条扫清了障碍,我们可以完全不需要任何图片和简单的Javascript代码就可以构建。一、第一个例子 效果图: Demo地址:http://namepk.sinaapp.com/demo/progress.html。1、 基本的HTML HTML代码非常简单:[c-sharp] view plaincopy转载 2012-09-17 15:14:40 · 781 阅读 · 0 评论 -
用HTML5实现手机摇一摇的功能
在百度开发者大会上我介绍过HTML5另外一个重要特性就是DeviceOrientation,它将底层的方向传感器和运动传感器进行了高级封装,提供了DOM事件的支持。这个特性包括两种事件:1、 deviceOrientation:封装了方向传感器数据的事件,可以获取手机静止状态下的方向数据,例如手机所处角度、方位、朝向等。2、 deviceMotion:封装了运动传感器数据的事件转载 2012-09-17 15:10:53 · 446 阅读 · 0 评论 -
使用Javascript开发移动应用程序
原文地址:http://blog.frontendforce.com/2010/05/mobile-application-development-using-javascript/译者:蒋宇捷 Javascript并不仅仅只用于网页和网站程序。你还可以创建实时应用、服务端解决方案、桌面和移动应用。移动应用分为两种:浏览器里的网页应用和本地应用。本地应用通常更快更强大,因转载 2012-09-17 15:27:09 · 529 阅读 · 0 评论