文章关键字 ‘css3’

CSS “渐进增强”在web制作中常见应用举例

2010年04月29日,星期四


“渐进增强”是对”Progressive Enhancement”一词的译文,我觉得翻译的很是得体。所谓“渐进增强”,有点农村包围城市的味道。打个不太恰当的比方,就是要先解决广大劳苦大众的温饱问题(即“渐进”),再这个基础上尽量的往小康方向发展(谓“增强”),至于是否要所有的人都过着小康水平,则不强求,当然越多小康家庭越好,没有也无妨,反正温饱不成问题,至少不会饿死。

就目前而言,虽对“渐进增强”有所了解的人挺多,但是要说普及与深入人生还远远不到火候。再举个不恰当的比方,现在就页面重构而言,占据主流的还是 “大锅饭”思想,即人人平等,人人相等,也就是以各个浏览器下表现一致为准则。这本身没有什么问题,大家都有饭吃,但是,显而易见,这会让领先的浏览器(Firefox、chrome等)优势无法显现出来。

CSS的“渐进增强”有别于CSS hack,hack可以说是提供选择,你死我亡,竞争效应;而“渐进增强”属于更进一步,锦上添花,辅助效应。前者应尽量避免使用,而后者适当使用则有裨益……

本文将非常详细的展示“渐进增强”在web站点上的一些常见应用,提供丰富的截图示例,希望能对您的学习有所帮助。

阅读全文…

让IE6/IE7/IE8浏览器支持CSS3属性

2010年04月27日,星期二

本文将展示如果通过调用htc文件轻松让IE浏览器下也能实现一些CSS3的效果,例如盒阴影(box-shadow)、文字阴影(text-shadow)以及圆角边框(border-radius)效果。
本文提供详细的使用讲解,必要的demo页面,以及一些必要的说明,希望能对您的学习有所帮助。

阅读全文…

翻译 – 逐渐消失的Flash网站

2010年04月20日,星期二


如果你想要一个盛大的视觉效果的网站,含有复杂的交互以及跨浏览器的富体验,flash是唯一的选择。确实如此吗?回答是“不是”。随着现代浏览器的进步与提升,以及JavaScript库的被广泛采纳,使用flash显得没有意义了。但是考虑到渐进增强的需要,目前flash站点在web上仍有一席之地。

在当前的景观技术下,以及通过诸如相框,netbooks、手机、电视这类设备访问互联网时,网络标准的好处要大于那些flash,尤其是当提供内容是在各种设备上面对更广泛的受众时。

Flash是一个坐在浏览器扩展功能顶部的专利产品 。尽管flash可以提供在某一段时间内可能缺失的功能,但是对于现代浏览器而言,其所带来的价值几乎为0. 随着越来越多的设计师以及开发人员意识到web标准的好处,以及开始使用一些HTML5和CSS3的特征,我们会更少看到由Flash驱动的网站。

阅读全文…

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渐变的使用,提供代码示例和截图示例,希望能对您的学习有所帮助。

阅读全文…

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

2010年04月4日,星期日

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

阅读全文…

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

2010年04月2日,星期五

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

阅读全文…

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

2010年04月2日,星期五

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

阅读全文…

纯CSS实现各类气球泡泡对话框效果

2010年03月13日,星期六

边框法复杂应用 张鑫旭-鑫空间-鑫生活

本文的知识点较多,内容也较多,展现了CSS惊人的力量,如果使用纯粹的CSS实现视觉良好,体验上佳的web界面。讲解了“字符法”以及“边框法”,丰富示例,逐层深入,非常细致的讲解了实现的原理,方法,代码,注意点等。
本文提供详尽的插图,丰富的按钮,提供详尽的demo,希望你对您有所帮助。

阅读全文…