早就有把皮肤换了的打算，直到上周五才开始动手。
本身没做过设计的工作，处理起颜色来还是比较蛋疼的。公司某页面推荐了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，向上移动100px
transform: 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.其他一些
其他也就是改改字体颜色，改改透明度的事情。
还有文章页面，我觉得还可以改进一下。特别是那个支持和反对，以前看着就丑，现在感觉更丑，跟整体界面根本不搭有没有。
好的，这篇随笔就是这样。