折腾了一段时间终于把基于 mg12 的 WordPress 主题 iNove 作出小改动s(我前几天说了要个新主题)!
介绍一下有什么新改变:
- 新logo
- Windows Live背景(LiveSino 抓的)
- 漂亮CSS3导航栏(零图片)
- 文章蓝色外框(谷奥抓的)
- jQuery加载条,单击链接会出现
加上,超级难搞的侧边栏(侧边栏 – 算是修改了)
(chrome 7.0.544.0 dev截图)
目标效果:渐变 + 圆角 + 内影
FireFox 能完美显示出来
Chrome 渲染失败在bordr-radius
Chrome 修正后截图
如果不加内影的话, 不如看白板..
已知问题(更新已搁置):
单独页面里看不到文章外框的底部[ C ]搜索栏字没了[ Y:改用Google Search ]侧边栏:标签字体过大[ C ]导航栏在 chrome(win版)显示有问题:border-radius + box-shadow inset
这两个代码一起用会出现问题(google code反映很多)
+ 更新例子:想明白这个 Inset-Shadow的问题就点击我[ C:Chrome修复了这个bug! ]- 评论不能 Ctrl + Enter 发言 [ x/Y ]
- 导航栏在 IE、Opera 不能正确显示 (Opera 目前不支持的 CSS3 渐变。圆角就是 IE8 的问题)[ x ]
- 有待发现…
[ x ]:无法修正
[ Y ]:可以修正, 但是个人技术不够
[ C ]:修正了
这次的“化妆”只通过 Chrome 和 Firefox,其他游览器没检查。
一开始“化妆”就没想过它的兼容性,所以不 hack IE CSS。
一些废话话:
其实,本站的有开缓存(主题文件是一个星期、文章图是一个月)
所以呢,第一次进来一定会慢啦,不过有缓存之后加载起来会快很多的。 (推荐用上 jquery-image-lazy-loading 会更快)
还有,由于是缓存机制,有些东西会暂时看不到改动。
扩展阅读(英文):
- CSS3按钮(教程):http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
- CSS3在线渐变器(目前最强):http://www.colorzilla.com/gradient-editor/
- CSS3Please(在线工具):http://css3please.com/
- CSS3Generator(在线工具):http://css3generator.com/
- jQuery 完美网页进度条教程(中文):loo2k的详细教程
我个人推荐逛逛 Webdesignerwall.com,你有什么好介绍?