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

2010年01月12日 by 张 鑫旭 阅读 93843 次, 今日 1 次

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

阅读全文…

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

2010年01月12日 by 张 鑫旭 阅读 173446 次

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

阅读全文…

CSS3 border-image详解、应用及jQuery插件

2010年01月8日 by 张 鑫旭 阅读 184160 次

本文可以说是对CSS3 中border-image讲解的非常深入细致的一篇文章。对border-image进行的全方位的剖析,不是泛泛的谈参数特性,而是由大量的类比,图片标注,动画演示等。是难得的一篇优秀的技术文章(我很少称赞自己的)。相信一定会对您对border-image的理解大有帮助。

文章还列举了大量border-image的应用实例,可以让您见识到border-image惊人的应用潜力,最后还有一个相关插件的讲解。

本文提供大量的截图,手工绘图,演示图,gif动画,还有flash演示,提供详尽的demo页面,以及必要的资源下载,希望对您的学习有所帮助。

阅读全文…

jQuery-两款不同原理的圆角插件讲解

2010年01月6日 by 张 鑫旭 阅读 49020 次, 今日 1 次

本文介绍两款原理完全不同的jQuery圆角插件,一个是jquery.corners.js插件,还有一个是jquery.corner.js插件,两个相差一个”s”,但是内部核心方法差异却很大,一个是使用canvas标签,另外一个则用div标签一个一个摞起来的。
另外,本文还会对每一款插件做讲解,包括其使用方法,实现的原理,注意的问题等。每款均提供demo页面与相关源文件下载。文章最后还总结了各个插件的优缺点等,总之,希望能对您对圆角的学习和认识有所帮助。

阅读全文…

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

2010年01月4日 by 张 鑫旭 阅读 73383 次, 今日 1 次

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

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

阅读全文…

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

2009年12月30日 by 张 鑫旭 阅读 121263 次

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

阅读全文…

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

2009年12月30日 by 张 鑫旭 阅读 119434 次, 今日 4 次

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

阅读全文…

jQuery图片文本滚动切换插件jCarousel中文翻译与详解

2009年12月25日 by 张 鑫旭 阅读 119730 次

图片滚动切换显示插件
jCarousel是一款历史悠久,功能强大的图片或文字等列表内容滚动切换显示插件。可以自定义皮肤,可以自定义显示的方向,可以从外部控制每次切换显示的元素的个数,动画的时间等。可以切换任何形式的数据,静态的HTML,动态的文本数据,JavaScript数据,Ajax请求的XML数据,JSON,feed订阅数据等,都可以切换显示。优点真是很多。网上推荐这款插件的文章不少,但是真正好好研究这个插件的文章就很少。我从昨晚10点一直到现在,连续奋战10多个小时终于完成了这款插件的源文件讲解及全部demo为中文翻译。
在这篇文章里,您会看到中文翻译后的插件使用等详尽的介绍,提供一一对应的中文版demo页面,提供中文版的源文件下载。希望对您有所帮助。

阅读全文…

酷酷的jQuery鼠标悬停图片放大切换显示效果

2009年12月25日 by 张 鑫旭 阅读 61617 次, 今日 3 次

缩略图放大显示效果截图
介绍一个蛮酷的图片缩略图放大预览的效果,外带图片切换显示功能。动画显示,投影样式,效果不错。提供demo页面,提供源文件下载,希望对您有所帮助。

阅读全文…

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

2009年12月24日 by 张 鑫旭 阅读 131961 次

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

阅读全文…