早就有把皮肤换了的打算，直到上周五才开始动手。

本身没做过设计的工作，处理起颜色来还是比较蛋疼的。公司某页面推荐了hailpixel （http://color.hailpixel.com/）配色就靠这个了，虽说我不懂配色，拾取的颜色也有细微区别，取几个颜色看着舒服就这么定下来了。

作为一个做前端的，自然是不画PSD直接上来写。之前总是想先把设计搞出来再开始写页面，这也是一直没有动手的原因。周五在等设计图的空闲突然想写了，直接来写倒是挺好。写了一个头部样式之后，感觉之后的必须得那样写才行。也就是传说中的风格定下来了吧。

写界面的过程中用了不少CSS3动画。在这里总结一下吧。

1.导航条。

首先导航条的颜色不同是用CSS选择器做的。用到了nth-child()。括号里是几就选择第几个。设为nth-child(2n)的话选择的就是第偶数个。

先将所有li元素都定义了一个:hover{height:100px;margin-top: -50px}，然后发现这样第一个太丑，于是定义了一个li:nth-child(1):hover{width: 20%;height: 50px;margin-top:0;} 

2.首页的文章标题。

文章标题用到了2D变换。

transform:rotate(10deg):顺时针旋转10度

其他的2D变换还有

transform: translate(50px,100px) ：向左移动50px，向上移动100pxtransform: scale(2,4)：长变为2倍，高变为4倍。（看到了这个属性才知道也许导航条那里的效果可以通过这个来实现）transform: skew(30deg,20deg)：水平翻转30度，竖直翻转20度

其实在选择做2D变换之前我也尝试了3D变换，不过觉得奇奇怪怪的。

用transform: rotateX(360deg)可以让元素水平翻转360度，我一开始写的便是这个，用了以后简直翻花眼，也许把transition设得大一点会好一些？

同样的transform: rotateY(360deg)就是让元素垂直翻转。

文章标题的背景颜色设置我也用了nth-child选择器设置。

3.其他一些链接

我尝试性地把一些链接的:hover设置为font-size和color改变，效果还不错。或许可以尝试一下改变font-family。

4.文章页面的绿色通道

我一直觉得这绿色通道太丑太low，幸好都比较好改。果断将原来的background取消掉，换成了我自己取的颜色加了圆角。文字加了text-shadow，hover的时候文字阴影变了个颜色。

text-shadow的设置和box-shadow一样，前两个是阴影距离，然后是扩散大小，最后是颜色。

5.其他一些

其他也就是改改字体颜色，改改透明度的事情。

还有文章页面，我觉得还可以改进一下。特别是那个支持和反对，以前看着就丑，现在感觉更丑，跟整体界面根本不搭有没有。

 

好的，这篇随笔就是这样。

忘了说，不要用IE访问，我没做兼容！

本文链接：热烈庆祝博客换了新皮肤，转载请注明。