CSS页面重构“鑫三无准则”之“无图片”准则

2011年05月25日 by 张 鑫旭 阅读 70574 次, 今日 68 次

无图片准则 张鑫旭-鑫空间-鑫生活
“鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过。这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则,即“无宽度”、“无图片”和“无浮动”,目的是使CSS布局模块化以及增强可扩展性。

此准则是针对我个人的,可能没有什么适用性,也可能会对您的学习有所启发,所以这里还是简单分享下。其中“无宽度”准则则在去年秋天专门讲了下,这里再简单介绍下其中的“无图片”准则。

本文虽然文字不多,但是多涉及到的技术点不少。有demo,有截图,有源代码展示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip:IE不支持CSS3多背景的替代解决方案

2011年05月23日 by 张 鑫旭 阅读 58219 次, 今日 62 次

IE6-IE8浏览器不支持CSS3多背景(Multiple backgrounds),只使得这个很惹人爱的属性没了用武之地,好在IE浏览器下还是有替代的解决方法的。而本文的内容就是介绍这种替代方法,并展示了比较实际的应用实例。显然,像这种性质文章,demo页面自然少不了,丰富飞截图自然少不了,必要的源代码展示也少不了。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS垂直翻转/水平翻转提高web页面资源重用性

2011年05月19日 by 张 鑫旭 阅读 133744 次, 今日 58 次

水平或是垂直翻转性质的东西基本上类似于镜像拷贝,于是,我们在web制作的时候,一旦遇到对称出现的元素的时候,我们只需要处理一个元素就可以了,然后另外一个直接翻转使用下。这不但节约了资源的利用,还减少了代码的开销,省去了不少工作时间,换言之延长了我们的寿命,可谓相当不错的东东。

本文就展示下如何实现元素的水平翻转与垂直翻转,同时列举了几个典型实现,以了解翻转效果的现实意义。雷打不动的,有demo,有截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

基于canvas画布的两个炫酷效果展示

2011年05月17日 by 张 鑫旭 阅读 61105 次, 今日 19 次

HTML5 canvas这个玩意用通俗的话来讲就是一块用来画画的布,不过这不是普通的布,这是个类似于神笔马良的那个神笔一样神奇的东西,可以画出很多精湛美妙的东西。本文就展示两个基于canvas的炫酷效果,可以让我们对canvas的潜力有个比较直观的认识。一如既往,有demo页面,有效果截图,相关源代码展示。本文甚至还有video视频展示,总之,希望本文的内容能够对您 学习有所帮助。

阅读全文…

web页面相关的一些常见可用字符介绍

2011年05月14日 by 张 鑫旭 阅读 58470 次, 今日 55 次

世界之大,字符之多。要是真正一个一个去折腾的话,估计折腾到我找到女朋友那天也折腾不完的。本文就简单列举了常见的些字符以及一些简单应用。本文内容全当抛砖引玉,希望可以开启你对字符一点感性的认识,增加一点字符使用意识,同时为web页面制作开阔一点思路吧。
同样的,有截图,有demo,有源代码展示。总之,希望本文的内容那个对您的学习有所帮助。

阅读全文…

翻译 – CSS3 Backgrounds相关介绍

2011年05月8日 by 张 鑫旭 阅读 81759 次, 今日 85 次


就上周吧,出了个关于CSS3 Backgrounds的课件,个人觉得对于学习很有帮助,于是决定翻译下,不过作者似乎将下载功能关闭了,于是不能再原pdf文件上修改,不得已,自己就整了个长长的HTML版本的,也即是本文的主要内容了。本文截图超多,但是没有demo页面,图文并茂,相信能够对您的学习会有所帮助的。

阅读全文…

IE下实现类似CSS3 text-shadow文字阴影的几种方法

2011年05月4日 by 张 鑫旭 阅读 63222 次, 今日 49 次

IE9浏览器,甚至很可能IE10都不支持text-shadow文字阴影属性,但是人民群众的智慧是无穷无尽的,我们可以使用一些特殊的手段,或是方法实现类似于文字阴影的效果,而本文就将简单展示几种我所知的方法。

一如既往,丰富飞demo页面,相应的源代码展示,截图示例。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

基于HTML5 audio元素播放声音jQuery小插件

2011年04月28日 by 张 鑫旭 阅读 65735 次, 今日 44 次

在我浮生如梦的大学那会儿,貌似flash网站还有点小火,且大凡有点含量的flash站点上,杂七杂八的音效总是少不了。一部分音效是烘托渲染气氛的背景音乐,另外一部分就是促进互动,增强体验的交互声音,例如按钮按下或者是经过时“哔哔”声或是“叭叭”声。而在那个时候,在远离flash的web页面上鲜有声音的交互,即使有,要想实现兼容性,要不借助控件,要不还是通过与flash交互实现。
随着HTML5的推进与普及,很多以前要借助flash才能实现的效果现在可以很轻松地在网页上实现了。例如音频文件的播放。而本文就折腾点小名堂,让jQuery下轻松实现元素hover时播放声音的效果,基于HTML5 audio元素。
外甥打灯笼——照旧,有demo页面,有源文件下载和源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip:CSS3下条纹&方格斜纹背景的实现

2011年04月23日 by 张 鑫旭 阅读 49889 次, 今日 42 次

不好意思,与上篇类似,也是CSS3下的一些技术或者说是效果实现的展示。本文的内容是使用CSS代码创建各种条纹效果。一如既往,有demo,有必要的截图,有源代码展示,同时本文还要相对比较详细的讲解。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

小tip:CSS3下的渐变文字效果实现

2011年04月20日 by 张 鑫旭 阅读 81786 次, 今日 26 次

本文内容不多,就是介绍了两种实现文字渐变的效果,都需要依赖一些CSS3的属性。同样的,每个方法提供相应的demo页面,提供相应的效果截图以及必要的源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…