折腾这个“Dark Elf官网”一开始就是个意外。本来我最近打算搞点别的，结果前两天跟一个甲方聊项目，他非要一个特别炫酷的暗黑风格界面，预算给得又少，我直接就拒绝了。他当时就说我做不出来，还说我没那本事。那行，我回家就自己搞一个，证明一下这种风格根本不难，而且比他想象的还要
我直接就动手了，没花时间去画什么狗屁设计图，那玩意儿浪费时间，而且最终还得改。我的方法是直接上代码，先抓感觉。我给自己定了几个关键步骤：
确定基调与布局
- 抓感觉： 我先把色盘定了。不能只是纯黑，必须是深灰、血红、冷蓝这三个颜色来回切换，主要就是想让用户感觉阴森森的，有那种古老又危险的氛围。
- 选架子： 后端没必要搞得太复杂，随便搭了个NodeJS的简单服务，也没用什么高级框架，就几个路由用来模拟数据请求。重点是前端的样式要快，所以直接用原生HTML和CSS打底，减少不必要的依赖。
- 堆组件： 页面布局就是全屏背景图打底，中间一块内容区居中。我把左上角放了个像图腾一样的Logo，右边四个导航按钮，用CSS把边框搞成那种不规则的锯齿状，看起来像石头雕刻出来的。
细节打磨与实现
光是黑不溜秋可不行，暗黑风最重要的是细节和交互，就是要让用户觉得这个页面是活的，而不是死板的图片。
- 搞动画： 我用了大量的发光效果（Glow），字体、按钮、边框，凡是重要的东西，都有点微微的红光或蓝光闪烁。鼠标悬停上去，要有那种粒子飘动的效果，虽然有点俗气，但是暗黑风离开了特效，就没那味儿了。
- 处理图片： 我找了一些高分辨率的黑暗精灵图片，全部做了滤镜处理，把饱和度降到最低，只留下一层冷蓝色的光芒，然后叠加一层薄薄的烟雾效果。
- 搞内容： 内容都是我瞎编的，关于黑暗精灵的介绍、历史，重点是排版，一定要让字看起来很神秘，行距必须拉开，字体选了个看着像古老符文的衬线字体。
为啥这么较真？
说起来，我这么较真，非要证明这个暗黑风好做，也是被以前的事情给搞怕了。记得前几年，我刚开始接活的时候，遇到一个特别抠门的客户，他非说我的设计太“亮”，要我改成他想象中的那种阴影效果。我改了十几稿，他还是不满意，直接把我尾款扣了。说我没有抓住感觉。
那时候我正赶上家里有点事，急着用钱，压力大得要死。为了那点尾款，我天天晚上熬到两三点，眼睛都熬红了，去跟他对线。结果他直接把我拉黑了。我气得在家里把键盘都砸了，当时就发誓，以后再也不接这种磨磨唧唧、不懂装懂、还敢说我能力不够的活儿了。要么信任我，要么别找我。这回我做这个Dark Elf官网，就是给自己一个交代，也是给那些不懂装懂的人一个巴掌。
这回这个Dark Elf官网，我就是铆足了劲，不到两天就给它扔了上去，效果我自己觉得比那个甲方提的狗屁要求强一百倍。你看着它黑不溜秋的，但是每一个悬停效果，每一个文字的排版，都是我用实践砸进去的。说它简单，也简单，但前提是你得知道怎么把那种‘阴郁’的感觉和交互细节拿捏到位。
现在看起来，整个网站跑得挺稳，而且手机端也适配了，虽然我没指望谁会用手机看黑暗精灵的故事。这回，起码我能拍着胸脯说，这种风格，我拿下了。