文章关键字 ‘兼容性’

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

2010年04月9日,星期五

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

阅读全文…

区分IE8/IE7/IE6及其他浏览器-CSS “\9″hack

2010年04月4日,星期日


CSS hack这个东东可以说是老掉牙的东西,我是不会再放到锅里炒的。之所以写这篇文章,更主要的是介绍一个CSS hack – “\9″ hack。
本文以介绍”\9” hack为引子说说如果简单有效的区分IE8/IE7/IE6以及其他的现代浏览器,提高详尽的代码展示,提高必要的demo页面以及各个浏览器表现的截图,希望能对您的学习有所帮助。

阅读全文…

CSS实现跨浏览器兼容性的盒阴影效果

2010年04月2日,星期五

在web页面的ui表现中,投影效果可以说是非常常见的一种表现效果了。例如开心网的头像修饰效果:点击这里看图
然而,在CSS2的时代,我们多半使用图片实现类似效果,或是使用CSS其他属性模拟阴影效果,但是,现在,CSS3的崛起使得这个问题已经不再是是个问题了,本文就将展示如何实现跨浏览器的盒阴影效果。
本文提供详尽的代码,必要的demo以及图片效果展示,希望能对您的学习有所帮助。

阅读全文…

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

2010年04月2日,星期五

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

阅读全文…

CSS3 animate实现图片墙3D翻转效果

2010年01月12日,星期二

本文主要就是展示了一个用纯CSS实现的图片墙动画3D翻转效果,有图片演示,有视频演示,有demo页面,提供简单的代码分析和原理讲解。目前而言仅chrome浏览器和Safari浏览器下有效果,所以,本文主要在于展示CSS3的一些特性以及潜能。希望对有兴趣的朋友有所帮助。

阅读全文…

图片旋转效果的一些研究、jQuery插件及实例

2010年01月12日,星期二

图片的旋转可以说是一种效果,但是逐渐的,旋转已经不单单是属于视觉效果那个范畴,其更具有使用性,功能性。我们都知道,照片有时候是需要横过来的拍的,当我们预览或共享到web上时需要进行旋转。这个操作在以往可能更多的是交给软件去完成,然后再将旋转到正常角度的图片发布到web上。但是,现在直接就可以在web上对图片进行旋转之类的处理,就算图片处理软件再怎么方便好用,也不及直接发布时对图片做调整来的方便。这就是图片旋转功能的实用意义。
本文从各个方面阐述图片旋转的实现方法,一步一步,从CSS,滤镜,canvas标签,涉及各个浏览器,分析各自特性,并讲解一些插件,最后提供各种方法的综合实例,有详细的demo页面和源文件下载,希望能对您有所帮助。

阅读全文…

HTML CSS列表元素ul,ol,dl的研究与应用

2009年12月30日,星期三

HTML标签元素就是砖砖瓦瓦,看上去很一般,但是到了优秀的设计师手里和优秀的工人那里就会发挥出无限的潜力与魅力,于是有了我们多姿多彩的互联网。列表元素也是如此,HTML列表元素(如ol,ul,dl)等在现下的网站开发制作中有着非常广泛的应用,然而,它们的在不同浏览器下的脾气却不一样。本文就是分析这些列表元素的基本特性,在不同浏览器下的各类兼容性问题,以及介绍一些常见的应用等。虽然还有几十更多的用途和技术可以在本文中讨论,但是本文展示的一些东西以让我们彻底的了解HTML中列表标签元素的的概貌,帮助您用列表这类砖瓦构建出漂亮的“互联网建筑”。

阅读全文…

checkbox复选框的一些深入研究与理解

2009年12月23日,星期三

本文可以说是一篇针对checkbox复选框不错的文章。前半部分针对复选框在不同浏览器下的表现进行了深入的研究与思考,揭示了产生差异的原因,让我们可以更轻松的处理复选框的样式表现,后半部分只要演示了一些关于复选框的常见JavaScript操作,例如如何判定复选框是否被选中,如何判定复选框组是否被选中,以及复选框的全选反选的实现等。
整片文章提供详细的视图,提供必须的代码演示。另外JavaScript部分提供demo实例页面,希望对您有所帮助。

阅读全文…

css行高line-height的一些深入理解及应用

2009年11月28日,星期六


前两天在腾讯ISD团队博客上看到一篇翻译的文章“深入理解css 行高”,是个不错的文章,学到了不少东西,颇有感觉,于是决定结合自己的一些经验与理解写篇内容互补或者说是角度不同的文章吧。
本文核心重点在于inline box模型下的line-height高度问题,希望可以纠正css中对高度的正确认识,并依次展开列举了一些常见的有关line-height的应用,提供demo页面,希望对您的学习有所帮助。

阅读全文…

我熟知的三种三栏网页宽度自适应布局方法

2009年11月17日,星期二

目前,以1024像素显示器为目标的960~1000像素的网页在占有率越来越高的宽屏下的显示有些吃力了。采用流动性布局,也就是宽度自适应布局可以有效解决这一问题。自适应问题是个很大的题目,如果深入细节,不是几篇文章可以说清的。本文就针对实现简单的三栏宽度自适应做题。简要展示了我所熟知的三种宽度自适应布局方法。全都是比较优秀,没有兼容性问题的方法。提供demo实例演示以及源文件下载。希望对您有所帮助。

阅读全文…