“CSS相关”目录存档

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

2010年01月12日,星期二

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

阅读全文…

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

2010年01月4日,星期一

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

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

阅读全文…

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

2009年12月30日,星期三

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

阅读全文…

IE6下z-index犯癫不起作用bug的初步研究

2009年12月24日,星期四

CSS中,z-index是个内容繁多,牵连甚广的知识点,CSS手册中的那点知识那就是冰山一角。如果深入研究,牵涉到border及background的堆叠模型,同级显示问题,同级牵连显示问题,以及浏览器处理显示的机制等,我可能表述有些含糊,但确确实实z-index蕴含着很深的知识点。
我在z-index的研究上面的功夫还不够,所以一些深入的东西我是没有信心讲好的。不过本篇文章可以说是做了个不错的表面功夫,详细的阐述了IE6下两个常见的z-index层级bug,有理有据,一步步细致分析,提供代码演示,提供demo页面,希望对您的学习能有所帮助。

阅读全文…

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

2009年11月28日,星期六


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

阅读全文…

CSS实现圆角六色渐变自适应按钮详解

2009年11月21日,星期六

本文将要展示如何用纯css实现2个像素的真正意义上的圆角,并且按钮带有细腻圆滑的渐变效果,其色彩丰富,可支持6种过渡色,从上往下可支配的颜色达9种。
本文将通过业余的图片、视频来演示实现的原理,将代码形象化,提供demo,希望您可以充分了解这种技术,也希望能开阔您的思维,对您的工作与学习有所帮助。

阅读全文…

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

2009年11月17日,星期二

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

阅读全文…

告别图片—使用字符实现兼容性的圆角尖角效果beta版

2009年11月6日,星期五

字符既是文字又是图片,所以很多时候我们可以使用字符代替图片实现一些貌似只有图片才能实现的效果,例如,圆角,尖角等。您就可以使用字符实现这类效果。可以优化页面,提高性能。
本文以Google gmail邮箱中字符应用为引子,讨论的字符的一些特性,与图片相比的一些优缺点。而后,以字符+css的方式展示如果使用字符实现圆角效果,如何实现尖角效果。最后拿新浪微博的对话框做实际的实例,演示如何使用字符代替图片,实现几乎同样效果的优化,以展示字符的实际应用性及潜力。
本文提供详尽细致的demo页面,提供源文件打包下载,希望本文的论述能够对您有所帮助。

阅读全文…

关于Google圆角高光高宽自适应按钮及其拓展

2009年10月24日,星期六

谷歌gmail邮箱中出现的圆角高宽自适应按钮
本文以Google圆角高光高宽自适应按钮为引子,阐述此貌似平常的按钮后面的强大技术,并提供我经过我反复试验的更加优化高效的css实现方法,并对其优点进行分析。然后进一步扩展,探讨Google在css技术应用以及网页产品开发上的思想意识,强调应该有将css扩展性重用性发挥到极致的意识。并通过将虾米网图片按钮转换为效果一致的css按钮这个实例进一步验证培养css重用性可扩展性意识的重要性。本文不仅仅是讲解如何通过高效的css实现一些貌似只有图片才能实现的效果,更重要的是要传达Google在产品设计在技术运用上所体现的一种思想,传达Google是如何将产品的扩展性预见性运用到极致的,借以希望你我都能从众领悟到一些东西,然后在前端这块领域有所作为。
本文提供技术实现代码以及demo实例页面,希望对您有所帮助。

阅读全文…

对html与body的一些研究与理解

2009年09月18日,星期五


最近一直构思着写篇关于html标签的文章,虽说之前处理过html标签,也解决过不少棘手的问题,但是对其理解还不是很透彻,很多原理都是自己推测的。
在网上查阅相关资料想整合一下相关的信息,发现深入探讨html,与body的文章很少,只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值,其余都没有什么相关的好文章。
而这里,我要讲述的与上面的交集并不多,主要是讲述一些关于html与body的各种表现,我自己的一些解释,以及处理相关问题的些经验,很多应该是网上很少提及的东西,内容不算深奥,我尽量截图展示,表述清晰,希望对大家能够有所帮助。

阅读全文…