PJHome新风格上线

经过三天放假时间,把PJHome的首页的样式进行了一次彻底的改版。之前就打算尝试用CSS3来做一个新的主页,现在总算完成了。

新版主页,设计出过两版,因为家里的显示器差异问题,第一版被我否决了。原因是不同显示器上差异太大(眼睛被欺骗了)。

在这个版本的风格中,样式的编写是基于Chrome的环境下编写的。所以这个风格也只有在safari和chrome下能还原完整的效果。firefox和IE8其次,Opera下还有一些小问题,不过问题不大。 IE7和IE6细节上的差异就很多。本来打算放弃IE6的,不过当我调整好IE7后,又不忍心hack了一下IE6至少算能看了,但是不支持IE6的决心没变。

在做这个风格的时候,也发现了自己在写PJBlog的皮肤框架的很多不足,所以为了实现这个风格的部分效果,没办法改动了一些程序的模版,所以就不提供下载了。整个风格还是实验性阶段,样式很凌乱没有系统得整理好,一些细节还有问题。

 

1)新风格的特点:

      很多页面的实现采用了CSS3来完成。减少了很多不必要的图片开支(当然还没做得和彻底)。

      在Chrome和Safari下 能够100%还原页面, firefox 和 IE8 Opera能够还原80%左右,IE6 IE7会再损失 10%的特性。 

      如果装了雅黑字体,浏览会更加完美

      960样式布局,这真是一个神奇的数字。

      更加简洁的页面布局

 

2)CSS3 差异?

 

(顶部登陆框,用到的rgba和圆角,以及text-shadow)

 

(文字渐变色,用到了webkit的mask image和渐变色填充)

 

(日期,用了文字投影,1px的白色底)

 

 

(最复杂的一部分,用了:after 伪类填充文字,然后过渡渐变,最后鼠标移动的时候把伪类填充出来的文字过渡到白色)

 

(tag的效果,只用了圆角)

 

(图片框,用了圆角和box-shadow)

 

(动画转动的翻页,只有chrome下能看到。当然还有投影)

 

(这个很简单,投影和圆角)

 

3)初稿截图,最初的稿件,只上线了一天,被我否掉了。。。



[本日志由 puterjam 于 2010-04-06 11:52 PM 编辑]
上一篇: 深入分析IE9的图片性能测试实例
下一篇: PJHome In Iphone Preview
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: css3 style theme pjhome
相关日志:
评论: 57 | 引用: 0 | 查看次数: -
Dabo[2012-09-04 08:04 PM | | Mail To:newboo@126.com | 123.151.31.105 | del | 回复回复]
第一眼看到这个就被吸引住了,求发我这个邮箱一份或提供下载,谢谢
zhongyi[2011-11-26 05:29 PM | | | 183.37.70.76 | del | 回复回复]
ZZY[2011-11-12 05:53 PM | | | 113.83.207.115 | del | 回复回复]
哇,好漂亮啊,能讲讲用什么软件做的么?
TEST2000[2011-05-05 03:59 PM | | | 218.65.122.15 | del | 回复回复]
大哥,能暴暴 TX和麻花腾的内幕不?让我等草民有点见解咯
点点滴滴[2011-04-20 09:01 AM | | | 111.182.13.154 | del | 回复回复]
的待定待定待定
我爱你返利网[2011-03-15 11:33 PM | | | 122.142.171.16 | del | 回复回复]
好厉害啊  博客的模板和程序看起来真的养眼 以前一直在找 今天终于找到怔住了 呵呵  真的 很不错  521red.com   淘宝返利 购物返利
汽车人[2010-12-28 12:57 AM | | | 58.246.65.134 | del | 回复回复]
新风格,新感受,支持:)
紫芒果[2010-12-05 06:00 PM | | | 220.170.109.52 | del | 回复回复]
不错呀
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱:
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 开启 | [img]标签 关闭