新做了个博客主题

By | 2012/08/23

老主题厌倦了,现在处处吹简洁风,我也来俗套一把~

结果就是这样的,不再有图,除了文章里的,颜色尽量的少,事实上就三四种颜色,文字的灰色,链接的绿色或蓝色(链接为什么要两种颜色?对啊…… 为什么啊,下个版本链接就一种颜色!),加上背景的白色,简约又简单,不错不错……

有几个地方得记录一下…

导航菜单

菜单很简单,鼠标移过去会显示子菜单,并有类似Meter风的下划线,只不过这个菜单在IE6下是无效的,为什么?因为IE6的:hover伪类只在a标签上有用,我这个是li标签,按说一般会使用JS实现个.hover属性,不过我打算不再主题中增加任何JS,所以我直接无视了IE6…… 看不到么?看不到就看不到吧~ IE6早该拉出去枪毙10^32遍了!

书页动画

如果您使用的是高级浏览器,把页面拉到最下面,可以看到右下角有书页被风吹动的效果~ IE8及以下就不要浪费目光了,不知为什么Opera也不行,应该是我水平问题……

这个动画是想完全是CSS3的keyframes和animation效果,本来呢,纸张的阴影是靠::after伪类实现的,这很方便,不过有个问题就是除了高版本的FireFox,animation无法在伪类上发挥作用,本来看不到就看不到吧(我好想很喜欢这句话),偏偏我是chrome的死忠Fans,不能在谷歌浏览器上看到全部效果实在不舒服,于是书页动画我直接加了一个无内容的div来模拟了,虽说有些奇怪,不过我看了舒服了……

data小图片

右侧边栏的项目,大多是li列表,前面有一个灰绿色小圆点,那个圆点呢,可不是一张图片(大多数情况下),而是“data:image/png;base64,xxxxxx”,这个是个好东西啊,无需额外下载图片,直接写在了CSS文件里,把图片转base64编码工具多的是,或者直接用Python写一个也是三分钟的事情,好用的感天动地!唯一不好的是,IE6/7不支持这个,网上好多文章说用MSHTML来兼容,什么东东啊……不认识就直接让他用图片呗~我就是这么处理的,*background hack了一下,简单,有效。

评论

评论的样式我考虑了好久,最终使用的是现在手机上流行的短信样式,各位看官在一边,我在另外一边,使用对话泡泡的形式展示对话。泡泡的显示也让我伤脑筋了一段时间。那个箭头,一开始想用图片的,想想有些掉身价,反复考虑后往里面加三个标签,CSS控制下就完事儿了。高端的transform什么都没用,完全使用border的特性制作出来。不错,挺漂亮:)

至于阴影和圆角,看得到就看看,看不到就拉倒啦~~

插件

弃用了使用已久的Syntax Highlighter,为什么?因为这插件太重量级,而且在IE6下工作的不够好!所以我选用了简单的WP-syntax,虽说功能少些,也足够了(事实上我原打算不用高亮直接一个pre的了,想想还是花哨一点儿吧,毕竟这博客也没什么实质吸引人的内容,只能靠外表粉饰一番了),对了要修改一下源文件默认使其开启行号,代码没有行号,我根本看不下去……

原来的@reply也不用了,直接在comments.php里写完js代码,一点就是,简单的很……

TODO

我对头部和尾部还不满意,完全就是小米般的“没有设计的设计”,但是一时又想不到放些什么好,只好先偷偷懒。。。

3 thoughts on “新做了个博客主题

  1. WM

    data小圖片:
    其實用psuedo elemement搭配box-shadow也可以畫出來啊

    評論的箭頭:
    有before跟after兩個psuedo elemement可以用就不必多加標籤了吧

    Reply
    1. xishui Post author

      为了实现最大兼容, box-shadow、伪类我只用在可有可无的地方,这两个地方我还是希望能够在任意浏览器(好吧就是IE6/7而已)中显示的,唯有写无意义的标签了……

      Reply
  2. 东方美铃颂

    咦,更新啦。之前发现这个Pygame的最好的教程的博客,但订阅之后感觉好久没更新了的说。不一定是技术,什么生活趣事也都可以分享啊。
    新版界面确实比较简洁,不过感觉颜色太淡了,少了一些必要的条条框框,各个部分区分度不大了。百度之前也改版了,感觉也很简洁,可以参考一下吧^_^。
    支持博主,期待更多好文。

    Reply

发表评论

电子邮件地址不会被公开。 必填项已用*标注