小tip: 使用CSS将图片转换成黑白(灰色、置灰)

2012年08月19日 by 张 鑫旭 阅读 228513 次, 今日 62 次

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;),不过,当时,其他浏览器是无解的。不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。

本文就将介绍如何是有CSS3的一些新方法实现图片的黑白效果。另外,最后还介绍下一款可以实现各个浏览器下图片黑白的小JS插件。有截图,有demo,有代码示意,希望本文的内容能够对您的学习有所帮助。

阅读全文…

说说CSS学习中的瓶颈

2012年07月26日 by 张 鑫旭 阅读 219536 次, 今日 32 次

本文内容如题。根据自己的经历,思考以及体会,探讨了CSS学习中的瓶颈,以及如何克服等。有配图示意,有简单的源代码展示,还有对您有所启示的demo页面。总之,希望本文的内容对您的学习有所帮助。

阅读全文…

不使用JavaScript让IE浏览器支持HTML5元素

2012年07月20日 by 张 鑫旭 阅读 77512 次, 今日 9 次

如果我们不做什么手脚的话,IE6~IE8浏览器不支持HTML5元素, <nav>, <header>, <footer>, <article> …
然而,前篇Google前端规范HTML部分中提到:要使用语义的HTML5元素作为text/html, 考虑到Google不可能把IE8等浏览器弃之不顾,因此,肯定是有什么方法可以让IE6~8浏览器也支持HTML5元素的……

本文就将介绍几个不使用JavaScript实现IE浏览器支持HTML5元素的方法,希望本文的内容能够对您的学习有所帮助。

阅读全文…

翻译:谷歌HTML、CSS和JavaScript风格规范

2012年07月18日 by 张 鑫旭 阅读 60273 次, 今日 12 次

本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范,而是一种带有总结性质的简单称述。完整的中文翻译,国内已经有(只有HTML/CSS, 无JS)。

大家都有自己的工作要做,大多数人没有多少精力去看冗长而且还是英文的规范文档。本文这里的基本点的总结基本上提炼了大家需要知道的一些东西,便于快速阅读。
希望本文的翻译能够对大家在使用HTML, CSS, JavaScript上有一定的启发与帮助。

阅读全文…

见多识广:CodePen项目网站简介

2012年07月17日 by 张 鑫旭 阅读 117982 次, 今日 22 次

本文内容如题所示,介绍CodePen这个网站,CodePen某些地方与jsfiddle是比较类似的,但是还是有不少不一样的地方。本文就介绍其中的异同。最后,并以实例展示CodePen的使用。本文有大量截图,以便表述准确易理解。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

高富帅seajs使用示例及spm合并压缩工具露脸

2012年07月11日 by 张 鑫旭 阅读 160167 次, 今日 11 次

正如题目所表示的,本文主要内容是关于seajs及其自带合并压缩工具spm的,虽然前后扯了不少闲淡,但是,对于不熟知seajs的新手而言,应该还是有一定的帮助的。还是跟以前一样,demo页面,源代码展示,必要的截图等,都是俱全的。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

Stylus-NodeJS下构建更富表现力/动态/健壮的CSS

2012年06月29日 by 张 鑫旭 阅读 89842 次, 今日 10 次


SASS显然优于LESS(所以你就休息去吧),SASS刚出来的时候我就在文章有有所提到,现在貌似已经被很多同行熟知,甚至有些小众项目组已经使用之。
然而,我却没有专门花功夫介绍SASS, 为何?那为何现在又花大把功夫整理和介绍Stylus?异同在何处?……

阅读全文…

photon-3D光线引擎项目展示与介绍

2012年06月20日 by 张 鑫旭 阅读 36760 次, 今日 8 次

众所周知,3D效果是否逼真,光线的模拟很重要——不同角度光线,不同的阴影/投影显示。
一个正方体,我们最多可以同时看到3面,这3面我们使用CSS可以很从容的模拟,但是,这种模拟往往过于平面。不过,如果我们增加点阴影,显然,效果就完全不一样。而这种光线效果的添加就是photon引擎所做的事情!

本文就将介绍这个很赞的3D光线渲染引擎photon. 希望对感兴趣的朋友提供点帮助。

阅读全文…

小tip: 外链地址网站标志图标API应用

2012年06月13日 by 张 鑫旭 阅读 61495 次, 今日 6 次

本文主要介绍如何利用一些API获得网站的favicon,即收藏图标,标志图标。并且如何在实际项目中应用。一如既往,提供必要截图,demo实例页面以及源代码展示。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

理解CSS3 transform中的Matrix(矩阵)

2012年06月8日 by 张 鑫旭 阅读 435442 次, 今日 88 次

理解CSS3 transform中的Matrix(矩阵)

本文非常详尽的讲解了CSS3 transform中的矩阵。花了很多时间制作了很多帮助理解的demo,还专门制作了效果演示gif动图,配以丰富必要的截图说明,文字表述上也力求通俗易懂。个人觉得本文质量还是很不错的,希望可以对此感兴趣的人提供力所能及的帮助。

阅读全文…