开心网转帖后面有一个标签式的短评观点交互效果，这种效果的精髓与QQ好友印象是很接近的。但是开心网的实现标签N多，层级也N复杂，且JS实现的交换，并使用了背景图片，缺点多多。本文的内容就是如何使用纯CSS实现类似的效果。本文提供必要的demo页面，页面截图和源代码展示。希望本文的内容能够对您的学习有所帮助。
“CSS相关”目录存档
小卖弄：开心网标签词观点交互的CSS实现
2011年06月10日，星期五CSS页面重构“鑫三无准则”之“无图片”准则
2011年05月25日，星期三
“鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过。这是自己在页面重构的经验中总结出来的一套约束自己CSS的准则，即“无宽度”、“无图片”和“无浮动”，目的是使CSS布局模块化以及增强可扩展性。
此准则是针对我个人的，可能没有什么适用性，也可能会对您的学习有所启发，所以这里还是简单分享下。其中“无宽度”准则则在去年秋天专门讲了下，这里再简单介绍下其中的“无图片”准则。
本文虽然文字不多，但是多涉及到的技术点不少。有demo，有截图，有源代码展示，总之，希望本文的内容能够对您的学习有所帮助。
小tip:IE不支持CSS3多背景的替代解决方案
2011年05月23日，星期一IE6-IE8浏览器不支持CSS3多背景(Multiple backgrounds)，只使得这个很惹人爱的属性没了用武之地，好在IE浏览器下还是有替代的解决方法的。而本文的内容就是介绍这种替代方法，并展示了比较实际的应用实例。显然，像这种性质文章，demo页面自然少不了，丰富飞截图自然少不了，必要的源代码展示也少不了。总之，希望本文的内容能够对您的学习有所帮助。
CSS垂直翻转/水平翻转提高web页面资源重用性
2011年05月19日，星期四水平或是垂直翻转性质的东西基本上类似于镜像拷贝，于是，我们在web制作的时候，一旦遇到对称出现的元素的时候，我们只需要处理一个元素就可以了，然后另外一个直接翻转使用下。这不但节约了资源的利用，还减少了代码的开销，省去了不少工作时间，换言之延长了我们的寿命，可谓相当不错的东东。
本文就展示下如何实现元素的水平翻转与垂直翻转，同时列举了几个典型实现，以了解翻转效果的现实意义。雷打不动的，有demo，有截图，希望本文的内容能够对您的学习有所帮助。
web页面相关的一些常见可用字符介绍
2011年05月14日，星期六世界之大，字符之多。要是真正一个一个去折腾的话，估计折腾到我找到女朋友那天也折腾不完的。本文就简单列举了常见的些字符以及一些简单应用。本文内容全当抛砖引玉，希望可以开启你对字符一点感性的认识，增加一点字符使用意识，同时为web页面制作开阔一点思路吧。
同样的，有截图，有demo，有源代码展示。总之，希望本文的内容那个对您的学习有所帮助。
翻译 – CSS3 Backgrounds相关介绍
2011年05月8日，星期日
就上周吧，出了个关于CSS3 Backgrounds的课件，个人觉得对于学习很有帮助，于是决定翻译下，不过作者似乎将下载功能关闭了，于是不能再原pdf文件上修改，不得已，自己就整了个长长的HTML版本的，也即是本文的主要内容了。本文截图超多，但是没有demo页面，图文并茂，相信能够对您的学习会有所帮助的。
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011年05月4日，星期三IE9浏览器，甚至很可能IE10都不支持text-shadow文字阴影属性，但是人民群众的智慧是无穷无尽的，我们可以使用一些特殊的手段，或是方法实现类似于文字阴影的效果，而本文就将简单展示几种我所知的方法。
一如既往，丰富飞demo页面，相应的源代码展示，截图示例。总之，希望本文的内容能够对您的学习有所帮助。
小tip:CSS3下条纹&方格斜纹背景的实现
2011年04月23日，星期六不好意思，与上篇类似，也是CSS3下的一些技术或者说是效果实现的展示。本文的内容是使用CSS代码创建各种条纹效果。一如既往，有demo，有必要的截图，有源代码展示，同时本文还要相对比较详细的讲解。总之，希望本文的内容能够对您的学习有所帮助。
小tip:CSS3下的渐变文字效果实现
2011年04月20日，星期三本文内容不多，就是介绍了两种实现文字渐变的效果，都需要依赖一些CSS3的属性。同样的，每个方法提供相应的demo页面，提供相应的效果截图以及必要的源代码展示。总之，希望本文的内容能够对您的学习有所帮助。
CSS clip:rect矩形剪裁功能及一些应用介绍
2011年04月2日，星期六
CSS中有一个属性叫做clip，为修剪，剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中，且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。但是，貌似大家很少使用此属性。实际上clip是实在在的可以在实际项目中大放光彩的东东。
本文一如既往，提供必要的demo页面以及源代码展示，提供属性的一些具有代表性的实例。总之，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用