文章关键字 ‘opera’

页面可用性之img标签longdesc属性与HTML5

2011年04月8日,星期五

国外就页面可用性方面的讨论是很多也是很深的,貌似关注longdesc属性的前端相关人员还是很多的,相关的讨论也较多。相比国内,就淡得多。其实自己之前对该属性也是七窍只通六窍——一窍不通。所以,不想班门弄斧,本文就简单介绍下longdesc属性相关的一些内容,一些深入的可用性方面的东西自己确实业余的很,就不提及了。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

HTML5 drag & drop 拖拽与拖放简介

2011年02月9日,星期三

本文简单介绍了下利用HTML5 drag & drop API非常简单轻松地实现拖拽与拖放效果。提供一些关键术语的讲解,提供简单实用的demo页面,提供必要的源代码展示和效果截图。总之,希望能对您的学习有所帮助。

阅读全文…

CSS3 Transitions, Transforms和Animation使用简介与应用展示

2010年11月25日,星期四


本文介绍CSS3动画相关的几个属性是:transition, transform, animation,分别理解为过渡,变换,动画。虽然目前很多浏览器还没有完全支持这些属性,但是,在渐进增强的原则下,其高效的动画实现方式还是有很实际的应用价值的。本文实例当先(共14个),依次展示transition属性,transform属性,animation属性,而后三者结合展示一些更实际的效果与应用。
本文demo页面非常详细,提高必要的源代码展示,和截图供参考。希望能对您的学习有所帮助。

阅读全文…

拜拜了,浮动布局-基于display:inline-block的列表布局

2010年11月3日,星期三


对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。
另外,IE6下,重复的列表元素会出现莫名的bug,例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题,本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多,讲解详细,配以丰富飞截图,必要的demo页面。还是视频展示,希望能对您的学习有所帮助。

阅读全文…

翻译-你必须知道的28个HTML5特征、窍门和技术

2010年08月27日,星期五

前端的发展如此之迅猛,一不留神,大侠你可能就会被远远地甩在后面了。如果你不想被HTML5的改变/更新搅得不知所措的话,可以把本文的内容作为必须了解的热身课程。
本文为翻译内容,介绍了28个HTML5相关的技术,知识点等。内容较多,不少内容,我都重新制作了demo页面,并配以截图,希望能对您的学习有所帮助。

阅读全文…

拾人牙慧 – CSS3实现Opera浏览器的logo

2010年08月7日,星期六

CSS3实现Opera浏览器的logo

本文纯粹的展示如何使用CSS3实现高逼真的Opera浏览器的logo效果,当然,如果您关注CSS3,也一定可以从中学到不少CSS3方面的知识的。延续我一贯的文章风格,丰富的截图,丰富飞代码展示,外带源文件打包下载。总之,希望能对您的学习有所帮助。

阅读全文…

实现兼容性的CSS粗虚线边框(dashed)效果

2010年05月24日,星期一

CSS border-style属性中,有一个非常常用的属性,就是dashed,用来形成虚框。平时我们使用的宽度多半是1像素,所以其中的差异不细究,也不易觉察。但是,如果边框的宽度(border-width)大于1像素,那么不同浏览器下的表现差异就比较明显了。

如何让各个浏览器下的边框表现一致呢?这就是本文要为你讲解的。提供丰富飞截图,代码展示,提供必要的示例demo,希望能对您的学习有所帮助。

阅读全文…

CSS content内容生成技术以及应用

2010年04月9日,星期五

本文讲解CSS content属性,这一属性您可能用的不多,关注的也不多,其根本原因就是IE6/IE7的不支持,但是,IE6/IE7的淘汰只是时间问题。实际上,CSS content属性是个非常强大的属性,其应用范围可能要比您之前认为的要广泛的多。本文就将针对这一属性从基本开始详细阐述,并列举一系列有代表性的应用,提供详尽的代码示例,效果截图以及demo页面,希望您对您的学习有所帮助。

阅读全文…

CSS3&HTML5各浏览器支持情况一览表

2010年04月2日,星期五

正如题目所显示的,本文展示的内容是CSS3&HTML5各浏览器支持情况一览表,方便您的查阅。其他的话语就不多说了,会定时更新,希望能对您的学习有所帮助。

阅读全文…

页面可用性之outline轮廓外框的一些研究

2010年01月4日,星期一

在IE以及Firefox浏览器下,默认情况下,点击链接文字或图片(特指a标签下的)。会留下一个轮廓框。就我个人而言,对于链接点击后留下的轮廓框,我都是采取无视的态度,因为权衡来讲,对链接轮廓框大动干戈麻烦大于好处。但是网站千差万别,总有需要解决这类虚框的时候。

目前网上或设计师工程师常用的方法就是设置…,此方法确实有效,或是由于跟风,或是由于没有深入思考,或是根本没有必要想那么多,此方法会大大降低页面的可用性…

阅读全文…