文章关键字 ‘Safari’

CSS3 text-fill-color简介及应用展示

2010年06月26日,星期六

本文内容并不多,主要就是简单介绍下CSS3的text-fill-color属性,并举例展示其应用。展示,如果利用CSS3的text-fill-color属性实现效果精湛的文字遮罩渐变动画效果。提供必要的截图,代码展示,以及视频动画消失。希望能对您的学习有所帮助。

阅读全文…

CSS实现兼容性的渐变背景(gradient)效果

2010年04月9日,星期五

经过之前对Firefox浏览器渐变背景实现的详细介绍,以及webkit核心浏览器下渐变背景实现的详细介绍,这里可以很游刃有余的介绍如何实现兼容性的渐变背景效果了。本文由一部分内容是介绍如何使用滤镜实现IE下的渐变背景效果,配合CSS3的gradient渐变属性,实现兼容性的渐变背景效果(Opera浏览器除外)。本文提供详细的代码展示,效果截图以及demo页面,希望能对您的学习有所帮助。

阅读全文…

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

2010年04月9日,星期五

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

阅读全文…

CSS gradient渐变之webkit核心浏览器下的使用

2010年04月8日,星期四

渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方。例如,您可以指定一个这么一个渐变:顶部的颜色是红色,中间的是蓝色,底部为黄色来作为div的背景色。渐变通过-webkit-gradient方法实现,可以用来代替图片URL。在webkit核心浏览器下(Safari4+, Chrome),有两种类型的渐变,线性的和径向的。您还可以指定多个中间过渡色,此称之为color stops。
本文足够详尽地讲解了webkit核心浏览器下的gradient渐变的使用,提供代码示例和截图示例,希望能对您的学习有所帮助。

阅读全文…

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

2010年04月2日,星期五

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

阅读全文…

让所有浏览器支持HTML5 video视频标签

2010年03月17日,星期三

HTML5 video标签可以让视频如同图片那样使用一个标签就可以轻轻松松地嵌入到页面上,然而目前只有Safari之类的浏览器支持,主流的IE浏览器是路边的电线杆——靠边站。然而,优秀的技术先驱们,发动他们的智慧,通过一个js,实现了所有浏览器下都可以使用video标签,本文就是将如何使用使得所有的主流浏览器都支持HTML5 video标签,提供必要的截图,提供demo页面,提供原JavaScript文件下载,希望能对您的学习有所帮助。

阅读全文…

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

2010年01月4日,星期一

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

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

阅读全文…

CSS3 transition实现超酷图片墙动画效果

2009年12月30日,星期三

最终的图片墙效果
CSS3是个新东西,也是个好东西,不过以往用CSS并没有让自己兴奋。比如圆角,文字投影等就的CSS也可以实现,就是多一些标签而已。但是,今天,对CSS3 transition过渡的学习真正让我兴奋了一把。因为我见到了我以前没有见到过的东西,简单的几行CSS代码实现了flash都不容易实现的炫酷效果。本文就将展示一下使用CSS3 transition实现的炫酷图片墙图片旋转悬浮效果,文章由浅入深,循序渐进,提供详尽的代码讲解以及相应的demo实例页面,相信会对您了解CSS3的一些特性有所帮助的。

阅读全文…