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）初稿截图，最初的稿件，只上线了一天，被我否掉了。。。

文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: css3css3 stylestyle themetheme pjhomepjhome
相关日志: