LaoZhuHome Beta

这个效果提取自Sencha Touch框架，也是在sencha touch的项目中偶然发现loading效果竟然是用纯css3写的，于是提取了出来供各位童鞋一同研究. 使用了keyframes来使动画反复循环，在webkit内核浏览器下表现的很好，目前是webkit only，火狐也请绕道吧。 下面放主要代码和demo，一demo胜千言啊。

还是国外的蛋疼达人，不知花了多少个日夜画出了这部iphone4，我相信作者一定是个很细心的人，不然这么多的细节如果让一个浮躁的人来处理估计世界末日也难看到。 作者为什么要分享这部iphone4呢 有两个原因让我想分享这部iphone4: 1.它很酷并且棒极了！！！ 2.完全使用CSS3来完成，没有任何图片哦

每一个从事前端开发的童鞋估计都知道结构（Structure）、表现（Presentation）和行为（Behavior）这三个词语意味着什么，这里我先只针对结构这一块拿出来说说。 结构（Structure），顾名思义就是网页的框架，一个良好的框架可以很方便的创造出一个优美的网页，那么何为良好的框架，这就是下面要提到的语义化（Semantic），我会以一本书的例子来比喻，这样或许会更加容易理解一些。 我们假设一个网页就是一本书，抱着最终用户优先的原则我们来着手制作网页这本书。

相信很多人在写样式的时候已经懒得把a:visited这个样式加进去了吧，一是为了避免L-O-V-E顺序带来的不便，另外一个可能就是因为觉得visited没有太大的作用，这两个原因都有自己的道理，但是如果合理运用visited在一些特定的页面或许会带来不一样的用户体验，我一直坚信一个好的用户体验设计师一定是一个较专业的前端开发工程师，只有这样才能站在更高的角度去看一些问题，不然可能会因为一些局限性而导致一个项目的维护成本增加，当然这些就是些题外话了。

也许你已经注意到小站的logo换成了一种不常见的字体，总会有一些手贱的基友会去选择一下看看到底是图片还是字体，觉得是图片的基友可能要失望了，因为那仅仅是一种字体而已，使用的是Google Web Fonts服务，Google推出这个服务已经有一年多了，以前一直没有找到用得到的地方，这两天越看logo越觉得太平淡了，于是使用了Google Web Fonts里的一个字体代替，恩，现在看着舒服多鸟。

每当遇到一些节日这边都会出一版logo动画，这重担自然落到了敬爱的汤师爷肩上，至于汤师爷是多么的油菜我已经不想多说了，现在我要做的事就是把他这个动画变成jquery版本。 在没有开始做之前我就跟汤师爷提过这个建议，我估计这小子是故意的，因为当我拿到flash源文件的时候我惊奇的发现竟然有700帧！我不得不把这700帧分成了7张图片顺序载入才完成了这个动画效果，由于帧数色彩太丰富，压缩后单张图片竟然高达4M左右，于是又不得不强行压缩成8位色彩，最后的结果已经失去了flash版的光华，但是我仍然放出来给大家看一下，至少在帧数较少的情况下完全可以用js来实现这个效果，像谷歌logo动画一样，你也可以。

记得去年这个时候已经接触了CSS3一段时间，也写过有关css3的文章（css3动画之我见），那个时候有关css3的中文资料并不是太多，学习起来有些不顺畅，再看看现在有关CSS3的资料充斥着整个网络，这也为现在开始接触这些的同学提供了很好的学习资源，虽然CSS3还不能完全用于商业化，但是各位喜欢折腾的盆友们可以自娱自乐撒。 其实很多博友都使用了一些的CSS3元素，所以现在大家看到一些CSS3效果都觉得很普遍，就像之前有人用chrome浏览器发现我在小站藏着的一些小效果都在那里说来道去，现在大家都习惯了用一些俏皮可爱的小效果，并且这小小效果确实让那些可爱的博友们感到很有意思，这就够了，这就够了哇。

我使用这个功能有一段时间了，这个功能可以翻译为内联图像，估计很多人都在期待所有浏览器都可以支持这个功能，至少目前还不靠谱，但是聪明的人类总会想出一些方法来解决出现的问题，所谓技术大多都是逼出来的。 先放一个链接吧，这里面清楚的介绍了这个功能的原理，The “data” URL scheme，文章不算长，你可以随便看一看。其实你也可以不必理解其为什么，因为下面我会告诉大家如何有效的使用内联图像。

在这个世界上有一种职业叫做前端开发攻城师，这是一个在急速扩张的职业。 他们热爱设计，热爱代码，喜欢用自己的双手创造出一个个有爱的页面，用十个字形容就是“妙手写代码，铁肩担设计”。 他们理解网络，熟知SEO，熟知网络优化，普遍有着自己的小博客，以证明自己在网络摸爬滚打了多少年； 爱翻#墙，对新鲜的网络事物都很着迷，有着一群志同道合追着要邀请码的狐朋狗友。

大家在填表单或者是站内搜索的时候都会看到占位符这种效果，比如小站右侧的站内搜索框，这种提示性的占位符可以给出一些友好的提示，告诉一些可能不用明白的用户这里填什么最合适。 这种效果一般都是用javascript来实现，但是我们可以用HTML5的方式来实现这个效果，而且使用起来更方便，更简单。 本站的评论框已经使用了此方法，或许很早就有童鞋发现了，但是没有firebug一下，如果你去firebug一些你就会发现我使用了placeholder这个属性，目前这个属性ie浏览器都不支持，所以使用ie的童鞋看不到具体效果不要奇怪，因为我也没有办法。