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

2010年04月9日 by 张 鑫旭 阅读 460976 次, 今日 5 次

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

阅读全文…

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

2010年04月9日 by 张 鑫旭 阅读 235270 次, 今日 10 次

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

阅读全文…

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

2010年04月8日 by 张 鑫旭 阅读 163165 次, 今日 5 次

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

阅读全文…

CSS渐变之CSS3 gradient在Firefox3.6下的使用

2010年04月4日 by 张 鑫旭 阅读 120524 次, 今日 1 次

Firefox3.6包含了许多CSS的改进,本文将向您展示如果使用CSS渐变。
背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用,放大时也比较好看,可以让您创造出一个更灵活的布局。……

阅读全文…

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

2010年04月4日 by 张 鑫旭 阅读 120439 次, 今日 2 次


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

阅读全文…

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

2010年04月2日 by 张 鑫旭 阅读 94597 次, 今日 5 次

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

阅读全文…

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

2010年04月2日 by 张 鑫旭 阅读 96046 次

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

阅读全文…

翻译 – CSS Sprites:实用技术还是生厌之物?

2010年03月30日 by 张 鑫旭 阅读 67678 次, 今日 5 次


这是一篇翻译的文章,翻译的原因在于,我与原作者有类似的观点,即我自己也觉得CSS sprites的使用到了重新审视的时候。不过老实讲,本文作者在观点的表达以及论证上多少有些牵强,但是实际上,CSS sprites确实是需要善用的。难得的,本文没有demo,没有源文件。只是希望能够对您有一些新的启示。

阅读全文…

纯CSS实现易拉罐3D滚动效果

2010年03月29日 by 张 鑫旭 阅读 80293 次, 今日 1 次

本文展示并讲解纯CSS实现的超炫超酷的易拉罐3D滚动效果,向您展示CSS的惊人潜力。效果简述为:横向移动滚动条,易拉罐随着滚动条的滚动,自身也进行着效果逼真的3D滚动。
本文提供丰富的插图以及必要的demo页面,希望能对您的学习有所帮助。

阅读全文…

纯CSS实现侧边栏/分栏高度自动相等

2010年03月25日 by 张 鑫旭 阅读 140323 次, 今日 3 次

为了表现的美观或是一些功能的需要,我们经常希望侧边栏/分栏的高度保持一致。我们可能会使用min-height属性,IE6不支持min-height但是height会自动撑高,所以min-height + _height的组合也是常用手段之一;另外就是使用背景图片了,利用背景图片的垂直平铺,可以模拟分栏的等高背景效果,但是,此方法对布局宽度有一定的要求,如果布局宽度改变,背景图片可能也要做一番修改。但是这些方法都有局限性,没有从根本上解决问题。
本文就将真是分栏高度相等的的技术,使用margin负值实现任意分栏的高度自动相等。提供详尽的插图,代码示意。提供必要的demo,希望能对您的学习有所帮助。

阅读全文…